这里主要参考了使用SectionIndexer实现微信通讯录的效果
在这里做个记录
效果图
页面使用RelativeLayout，主要分为三个部分，match_parent的主listView，右边字母的SideBar，还有就是微信那种点击字母时浮动的一个TextView
布局:
fragment_contacts.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent"> 6 <ListView 7 android:layout_width="match_parent" 8 android:layout_height="match_parent" 9 android:listSelector="@android:color/transparent" 10 android:id="@+id/listFragmentContacts"/> 11 <TextView 12 android:id="@+id/textFragmentContacts" 13 android:layout_width="wrap_content" 14 android:layout_height="wrap_content" 15 android:layout_centerInParent="true" 16 android:padding="20dp" 17 android:textSize="40sp" 18 android:textColor="@android:color/white" 19 android:background="#33000000" 20 android:visibility="gone" 21 tools:visibility="visible" 22 tools:text="A"/> 23 <lee.example.com.testdj.customWeight.ContactsMySideBar 24 android:id="@+id/sideBarFragmentContacts" 25 android:layout_width="24dp" 26 android:layout_height="match_parent" 27 android:layout_alignParentRight="true"/> 28 </RelativeLayout>
layout_contacts_item.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="wrap_content" 6 android:orientation="vertical"> 7 8 <!--section，表示组--> 9 <TextView 10 android:id="@+id/tvSectionContactsItem" 11 android:layout_width="match_parent" 12 android:layout_height="wrap_content" 13 android:gravity="left" 14 android:textSize="22sp" 15 android:textColor="#666666" 16 tools:text="section"/> 17 18 <TextView 19 android:id="@+id/tvNormalContactsItem" 20 android:layout_width="match_parent" 21 android:layout_height="wrap_content" 22 android:padding="6dp" 23 android:textColor="@android:color/black" 24 android:background="@android:color/white" 25 android:textSize="20sp" 26 tools:text="text"/> 27 </LinearLayout>
实现：
首先，自定义View来实现SideBar，ContactsMySideBar.java
1 public class ContactsMySideBar extends View{
2
3 private static final String TAG = "ContactsMySideBar";
4
5 private SectionIndexer sectionIndexer;
6 private final char[] letters = new char[]{‘A‘, ‘B‘, ‘C‘, ‘D‘, ‘E‘, ‘F‘, ‘G‘, ‘H‘, ‘I‘, ‘J‘, ‘K‘, ‘L‘, ‘M‘, ‘N‘, ‘O‘, ‘P‘, ‘Q‘, ‘R‘, ‘S‘, ‘T‘, ‘U‘, ‘V‘, ‘W‘, ‘X‘, ‘Y‘, ‘Z‘};
7 private Paint paint; //画笔用来绘制字母
8 private ListView listView;
9 private int focusedIndex = -1; //点击选中的索引
10 private int drawWidth, drawHeight; //绘制单个字母的宽高
11
12 public interface OnTouchChangedListener{
13 void onTouchDown(char c);
14 void onTouchUp();
15 }
16
17 private OnTouchChangedListener listener;
18
19 public void setOnTouchChangedListener(OnTouchChangedListener listener){
20 this.listener = listener;
21 }
22
23 public void setListView(ListView listView){
24 this.listView = listView;
25 sectionIndexer = (SectionIndexer) listView.getAdapter();
26 }
27
28 public ContactsMySideBar(Context context) {
29 super(context);
30 init();
31 }
32
33 public ContactsMySideBar(Context context, AttributeSet attrs) {
34 super(context, attrs);
35 init();
36 }
37
38 public ContactsMySideBar(Context context, AttributeSet attrs, int defStyle) {
39 super(context, attrs, defStyle);
40 init();
41 }
42
43 private void init(){
44 //设置画笔属性
45 paint = new Paint();
46 paint.setColor(Color.GRAY);
47 paint.setTextSize(18f);
48 paint.setTextAlign(Paint.Align.CENTER);
49 }
50
51 @Override
52 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
53 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
54 drawWidth = getMeasuredWidth()/2; //宽度为sideBar的一半
55 drawHeight = getMeasuredHeight()/letters.length; //设置高度
56 }
57
58 @Override
59 protected void onDraw(Canvas canvas) {
60 for (int i = 0; i < letters.length; i++){
61 canvas.drawText(String.valueOf(letters[i]), drawWidth, drawHeight + (i * drawHeight), paint);
62 }
63 }
64
65 @Override
66 public boolean onTouchEvent(MotionEvent event) {
67 int pointerY = (int) event.getY();
68 int selectedIndex = pointerY / drawHeight;
69 if (selectedIndex >= letters.length){
70 selectedIndex = letters.length - 1;
71 }else if(selectedIndex < 0){
72 selectedIndex = 0;
73 }
74
75 switch (event.getAction()){
76 case MotionEvent.ACTION_DOWN:
77 //点击时设置为半透明
78 setBackgroundColor(Color.parseColor("#33000000"));
79 case MotionEvent.ACTION_MOVE:
80 if (sectionIndexer == null){
81 sectionIndexer = (SectionIndexer) listView.getAdapter();
82 }
83 // Log.d(TAG, letters[selectedIndex] + "");
84 //根据数组中的元素获取对应的组位置
85 int position = sectionIndexer.getPositionForSection(letters[selectedIndex]);
86 Log.d(TAG, "" + position);
87 if (position == -1){
88 return true;
89 }
90 if (selectedIndex != 0){
91 if (position != 0){
92 //改变当前listView所处位置
93 listView.setSelection(position);
94 }
95 }else {
96 listView.setSelection(position);
97 }
98
99 //重绘SideBar
100 invalidate();
101 if (null != listener){
102 listener.onTouchDown(letters[selectedIndex]);
103 }
104 break;
105 case MotionEvent.ACTION_UP:
106 case MotionEvent.ACTION_CANCEL:
107 //松开手指取消背景色
108 setBackgroundResource(android.R.color.transparent);
109 invalidate();
110 if (null != listener){
111 listener.onTouchUp();
112 }
113 break;
114 }
115 return true;
116 }
117 }
这部分代码很简单，重写了OnMeasure和OnDraw来绘制SideBar，在OnTouchEvent中写出了SideBar的响应事件
定义listView的adapter
SideBarAdapter.java
1 public class SideBarAdapter extends BaseAdapter implements SectionIndexer{
2
3 private static final String TAG = "SideBarAdapter";
4
5 private Context context;
6 private List<ContactsModel> modelList;
7 private LayoutInflater layoutInflater;
8
9 public SideBarAdapter(Context context, List<ContactsModel> modelList){
10 this.context = context;
11 this.modelList = modelList;
12 layoutInflater = LayoutInflater.from(context);
13 }
14
15 @Override
16 public int getCount() {
17 return modelList.size();
18 }
19
20 @Override
21 public ContactsModel getItem(int i) {
22 return modelList.get(i);
23 }
24
25 @Override
26 public long getItemId(int i) {
27 return i;
28 }
29
30 @Override
31 public View getView(int i, View convertView, ViewGroup viewGroup) {
32 Holder holder;
33 if (convertView == null){
34 convertView = layoutInflater.inflate(R.layout.layout_contacts_item, viewGroup, false);
35 holder = new Holder();
36 holder.normalTv = (TextView) convertView.findViewById(R.id.tvNormalContactsItem);
37 holder.sectionTv = (TextView) convertView.findViewById(R.id.tvSectionContactsItem);
38 convertView.setTag(holder);
39 }else {
40 holder = (Holder) convertView.getTag();
41 }
42 String text = modelList.get(i).getName();
43 setSectionTv(i, holder, text);
44 setNormalTv(holder, text);
45
46 return convertView;
47 }
48
49 private void setNormalTv(Holder holder, String text){
50 holder.normalTv.setText(text);
51 }
52
53 private void setSectionTv(int position, Holder holder, String text){
54 //获取每个item字符串的头一个字符
55 // Log.d(TAG, ZhCharactersUtil.changeToSpell(text));
56 char firstChar = ZhCharactersUtil.changeToSpell(text).toUpperCase().charAt(0);
57 //若为第一个位置直接设置组view就行
58 if (position == 0) {
59 holder.sectionTv.setVisibility(View.VISIBLE);
60 holder.sectionTv.setText((firstChar + "").toUpperCase());
61 }
62 //若不是，需判断当前item首字母与上一个item首字母是否一致，再设置组view
63 else {
64 String preLabel = modelList.get(position - 1).getName();
65 //获取上一个item的首字母
66 char preFirstChar = ZhCharactersUtil.changeToSpell(preLabel).toUpperCase().charAt(0);
67 if (firstChar != preFirstChar) {
68 holder.sectionTv.setVisibility(View.VISIBLE);
69 holder.sectionTv.setText((firstChar + "").toUpperCase());
70 } else {
71 //若与上一个item首字母一致则不需要重复设置组view
72 holder.sectionTv.setVisibility(View.GONE);
73 }
74 }
75 }
76
77 @Override
78 public Object[] getSections() {
79 //获取组信息的数组，比如这里可以返回char[]{‘A‘,‘B‘,...}
80 return new Object[0];
81 }
82
83 @Override
84 public int getPositionForSection(int section) {
85 //根据组信息获取索引
86 for (int i = 0; i < modelList.size(); i++) {
87 String str = modelList.get(i).getName();
88 char firstChar = ZhCharactersUtil.changeToSpell(str).toUpperCase().charAt(0);
89 if (firstChar == section) {
90 return i;
91 }
92 }
93 return 0;
94 }
95
96 @Override
97 public int getSectionForPosition(int i) {
98 //根据索引获取组信息，这里不做处理
99 return 0;
100 }
101
102 private final class Holder {
103 TextView normalTv, sectionTv;
104 }
105 }
这里用到了一个第三方，jpinyin，是用来对汉字进行处理，转换成拼音等等，ZhCharactersUtil.java就是用来处理汉字的，我这里只需要取拼音的第一个字母
1 public class ZhCharactersUtil {
2 public static String changeToSpell(String string){
3 char[] chars = PinyinHelper.getShortPinyin(string).toCharArray();
4 return chars[0] + "";
5 }
6
7 }
这里的ContactsModel里边只有两个属性，一个name，一个firstCharacter，其中firstCharacter是用来进行排序的，上边adapter的代码可以用modelList.get(i).getFirstCharacter()来简化一些，偷懒了，所以开始写好了就放在那没动，这里这个model就不记录了。
在Activity中使用，我这里是在fragment中使用，都是一样的
1 private ListView listView; 2 //悬浮的textView 3 private TextView maskText; 4 private ContactsMySideBar sideBar; 5 6 //然后对他们进行初始化
1 private void initData(){
2 ContactsModel model1 = new ContactsModel("张一");
3 ContactsModel model2 = new ContactsModel("张二");
4 ContactsModel model3 = new ContactsModel("李一");
5 ContactsModel model4 = new ContactsModel("李二");
6 ContactsModel model5 = new ContactsModel("赵一");
7 ContactsModel model6 = new ContactsModel("赵二");
8 ContactsModel model7 = new ContactsModel("王三");
9 ContactsModel model8 = new ContactsModel("王二");
10 ContactsModel model9 = new ContactsModel("阿张");
11 ContactsModel model10 = new ContactsModel("不行");
12 ContactsModel model11 = new ContactsModel("特别");
13 ContactsModel model12 = new ContactsModel("将就");
14 ContactsModel model13 = new ContactsModel("公司");
15 ContactsModel model14 = new ContactsModel("空是");
16 ContactsModel model15 = new ContactsModel("好附件打开");
17 ContactsModel model16 = new ContactsModel("现在");
18 ContactsModel model17 = new ContactsModel("哦跑");
19
20 ContactsModel model18 = new ContactsModel("aaasss");
21 ContactsModel model19 = new ContactsModel("bbb");
22 ContactsModel model20 = new ContactsModel("s");
23 ContactsModel model21 = new ContactsModel("jjj");
24 ContactsModel model22 = new ContactsModel("oot");
25
26 modelList.add(model1);
27 modelList.add(model2);
28 modelList.add(model3);
29 modelList.add(model4);
30 modelList.add(model5);
31 modelList.add(model6);
32 modelList.add(model7);
33 modelList.add(model8);
34 modelList.add(model9);
35 modelList.add(model10);
36 modelList.add(model11);
37 modelList.add(model12);
38 modelList.add(model13);
39 modelList.add(model14);
40 modelList.add(model15);
41 modelList.add(model16);
42 modelList.add(model17);
43 // modelList.add(model18);
44 // modelList.add(model19);
45 // modelList.add(model20);
46 // modelList.add(model21);
47 // modelList.add(model22);
48 Collections.sort(modelList, new Comparator<ContactsModel>() {
49 @Override
50 public int compare(ContactsModel contactsModel, ContactsModel t1) {
51 return contactsModel.getFirstCharacter().compareTo(t1.getFirstCharacter());
52 }
53 });
54
55 adapter = new SideBarAdapter(getContext(), modelList);
56 listView.setAdapter(adapter);
57 sideBar.setListView(listView);
58 sideBar.setOnTouchChangedListener(new ContactsMySideBar.OnTouchChangedListener() {
59 @Override
60 public void onTouchDown(char c) {
61 maskText.setText(c + "");
62 maskText.setVisibility(View.VISIBLE);
63 }
64
65 @Override
66 public void onTouchUp() {
67 maskText.setVisibility(View.GONE);
68 }
69 });
70 }
这里添加了一些假数据，完成。
时间： 2024-10-19 18:00:50