Android通讯录索引效果

发表于 | 分类于 | 阅读次数：

通讯录索引效果，网上很多了，我这里做个记录。

效果预览


SideBar

此类自定义索引的字母

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
public class SideBar extends View {
    // 触摸事件
    private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
    // 26个字母
    public static String[] A_Z = {"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", "#"};
    private int choose = -1;// 选中
    private Paint paint = new Paint();
    private TextView mTextDialog;
    /**
     * 为SideBar设置显示字母的TextView
     *
     * @param mTextDialog
     */
    public void setTextView(TextView mTextDialog) {
        this.mTextDialog = mTextDialog;
    }
    public SideBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
    public SideBar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public SideBar(Context context) {
        super(context);
    }
    /**
     * 重写这个方法
     */
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 获取焦点改变背景颜色.
        int height = getHeight();// 获取对应高度
        int width = getWidth(); // 获取对应宽度
        int singleHeight = height / A_Z.length - 2;// 获取每一个字母的高度  (这里-2仅仅是为了好看而已)
        for (int i = 0; i < A_Z.length; i++) {
            paint.setColor(Color.rgb(33, 65, 98));  //设置字体颜色
            paint.setTypeface(Typeface.DEFAULT_BOLD);  //设置字体
            paint.setAntiAlias(true);  //设置抗锯齿
            paint.setTextSize(30);  //设置字母字体大小
            // 选中的状态
            if (i == choose) {
                paint.setColor(Color.parseColor("#3399ff"));  //选中的字母改变颜色
                paint.setFakeBoldText(true);  //设置字体为粗体
            }
            // x坐标等于中间-字符串宽度的一半.
            float xPos = width / 2 - paint.measureText(A_Z[i]) / 2;
            float yPos = singleHeight * i + singleHeight;
            canvas.drawText(A_Z[i], xPos, yPos, paint);  //绘制所有的字母
            paint.reset();// 重置画笔
        }
    }
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        final float y = event.getY();// 点击y坐标
        final int oldChoose = choose;
        final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
        final int c = (int) (y / getHeight() * A_Z.length);// 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数.
        switch (action) {
            case MotionEvent.ACTION_UP:
                setBackgroundDrawable(new ColorDrawable(0x00000000));
                choose = -1;//
                invalidate();
                if (mTextDialog != null) {
                    mTextDialog.setVisibility(View.INVISIBLE);
                }
                break;
            default:
                setBackgroundResource(R.color.colorPrimary);
                if (oldChoose != c) {  //判断选中字母是否发生改变
                    if (c >= 0 && c < A_Z.length) {
                        if (listener != null) {
                            listener.onTouchingLetterChanged(A_Z[c]);
                        }
                        if (mTextDialog != null) {
                            mTextDialog.setText(A_Z[c]);
                            mTextDialog.setVisibility(View.VISIBLE);
                        }
                        choose = c;
                        invalidate();
                    }
                }
                break;
        }
        return true;
    }
    /**
     * 向外公开的方法
     *
     * @param onTouchingLetterChangedListener
     */
    public void setOnTouchingLetterChangedListener(
            OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
        this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
    }
    /**
     * 接口
     *
     * @author coder
     */
    public interface OnTouchingLetterChangedListener {
        public void onTouchingLetterChanged(String s);
    }
}

xml调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">
       <android.support.v7.widget.RecyclerView
           android:id="@+id/mRecyclerView"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />
       <TextView
           android:id="@+id/textDialog"
           android:layout_width="80dip"
           android:layout_height="80dip"
           android:layout_centerInParent="true"
           android:layout_gravity="center"
           android:gravity="center"
           android:textColor="#ffffffff"
           android:background="@color/colorPrimary"
           android:textSize="30.0dip"
           android:visibility="invisible" />
       <你的包名.SideBar
           android:id="@+id/sidebar"
           android:layout_width="20dip"
           android:layout_height="wrap_content"
           android:layout_alignParentRight="true" />
   </RelativeLayout>

ContactActivity

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
public class ContactActivity extends BaseActivity {
    @Bind(R.id.mRecyclerView)
    RecyclerView mRecyclerView;
    @Bind(R.id.sidebar)
    SideBar sidebar;
    @Bind(R.id.textDialog)
    TextView textDialog;
    private List<PersonBean> data;
    ContactAdapter mContactAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_contact);        
        sidebar.setTextView(textDialog);
        // 设置字母导航触摸监听
        sidebar.setOnTouchingLetterChangedListener(new SideBar.OnTouchingLetterChangedListener() {
            @Override
            public void onTouchingLetterChanged(String s) {
                // TODO Auto-generated method stub
                // 该字母首次出现的位置
                int position = mContactAdapter.getPositionForSelection(s.charAt(0));
                if (position != -1) {
                    mRecyclerView.getLayoutManager().scrollToPosition(position);
                }
            }
        });
        data = getData(getResources().getStringArray(R.array.listpersons));
        // 数据在放在adapter之前需要排序
        Collections.sort(data, new PinyinComparator());
        for (int i = 0; i < data.size(); i++) {
            Log.i("wxl", "Fpinyin=" + data.get(i).getFirstPinYin());
        }
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(linearLayoutManager);
        mContactAdapter = new ContactAdapter(data);
        mRecyclerView.setAdapter(mContactAdapter);
    }
    private List<PersonBean> getData(String[] data) {
        List<PersonBean> listarray = new ArrayList<PersonBean>();
        for (int i = 0; i < data.length; i++) {
            String pinyin = PinyinUtils.getPingYin(data[i]);
            String Fpinyin = pinyin.substring(0, 1).toUpperCase();
            PersonBean person = new PersonBean();
            person.setName(data[i]);
            person.setPinYin(pinyin);
            // 正则表达式，判断首字母是否是英文字母
            if (Fpinyin.matches("[A-Z]")) {
                person.setFirstPinYin(Fpinyin);
            } else {
                person.setFirstPinYin("#");
            }
            listarray.add(person);
        }
        return listarray;
    }  
   
}

persons.xml

模拟数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="listpersons">
        <item> 马云</item>
        <item> 马化腾</item>
        <item> 佩兰</item>
        <item> 奥巴马</item>
        <item> 普京</item>
        <item> 金三胖</item>
        <item> 暗影军团</item>
        <item> 141特遣队</item>
        <item> 冲锋号</item>
        <item> +胜利号</item>
        <item> 超级赛亚人</item>
        <item> 金克拉</item>
        <item> 亚古兽</item>
        <item> 数码宝贝大冒险</item>
        <item> 大胜归来</item>
        <item> 道士下山</item>
        <item> A利亚克</item>
        <item> 胜利冲锋龙卷风</item>
        <item> 走在冷风中</item>
        <item> 外面的世界</item>
        <item> 烦恼歌</item>
        <item> 如果没有你</item>
        <item> 四季歌</item>
        <item> 南山南</item>
        <item> +胜利号</item>
        <item> 光能使者</item>
        <item> 铁甲小宝</item>
        <item> 皮卡丘</item>
        <item> 奥特曼</item>
        <item> 开普勒452b</item>
        <item> 神舟20号</item>
        <item> 屌炸天的结尾</item>
    </string-array>
</resources>

PersonBean

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
public class PersonBean {
    private String Name;
    private String PinYin;
    private String FirstPinYin;
    public String getName() {
        return Name;
    }
    public void setName(String name) {
        Name = name;
    }
    public String getPinYin() {
        return PinYin;
    }
    public void setPinYin(String pinYin) {
        PinYin = pinYin;
    }
    public String getFirstPinYin() {
        return FirstPinYin;
    }
    public void setFirstPinYin(String firstPinYin) {
        FirstPinYin = firstPinYin;
    }
    public String toString() {
        return "姓名：" + getName() + "   拼音：" + getPinYin() + "    首字母："
                + getFirstPinYin();
    }
}

PinyinUtils

这里需要pinyin4j包，下载地址：http://pinyin4j.sourceforge.net/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class PinyinUtils {
    /**
     * 汉字转拼音
     */
    public static String getPingYin(String inputString) {
        HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
        format.setCaseType(HanyuPinyinCaseType.LOWERCASE);
        format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
        format.setVCharType(HanyuPinyinVCharType.WITH_V);
        char[] input = inputString.trim().toCharArray();
        String output = "";
        try {
            for (char curchar : input) {
                if (java.lang.Character.toString(curchar).matches("[\\u4E00-\\u9FA5]+")) {
                    String[] temp = PinyinHelper.toHanyuPinyinStringArray(curchar, format);
                    output += temp[0];
                } else
                    output += java.lang.Character.toString(curchar);
            }
        } catch (BadHanyuPinyinOutputFormatCombination e) {
            e.printStackTrace();
        }
        return output;
    }
}

PinyinComparator

按照字母排序类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public class PinyinComparator implements Comparator<PersonBean> {
    @Override
    public int compare(PersonBean lhs, PersonBean rhs) {
        return sort(lhs, rhs);
    }
    private int sort(PersonBean lhs, PersonBean rhs) {
        // 获取ascii值
        int lhs_ascii = lhs.getFirstPinYin().toUpperCase().charAt(0);
        int rhs_ascii = rhs.getFirstPinYin().toUpperCase().charAt(0);
        // 判断若不是字母，则排在字母之后
        if (lhs_ascii < 65 || lhs_ascii > 90)
            return 1;
        else if (rhs_ascii < 65 || rhs_ascii > 90)
            return -1;
        else
            return lhs.getPinYin().compareTo(rhs.getPinYin());
    }
}

ContactAdapter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
public class ContactAdapter extends RecyclerView.Adapter<ContactAdapter.ViewHolder> {
    List<PersonBean> data;
    public ContactAdapter(List<PersonBean> data) {
        this.data = data;
    }
    class ViewHolder extends RecyclerView.ViewHolder {
        TextView nickname;
        TextView tag;
        public ViewHolder(View itemView) {
            super(itemView);
            nickname = (TextView) itemView.findViewById(R.id.nickname);
            tag = (TextView) itemView.findViewById(R.id.tag);
        }
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = View.inflate(parent.getContext(), R.layout.contact_item, null);
        return new ViewHolder(view);
    }
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        PersonBean person = data.get(position);
        // 获取首字母的assii值
        int selection = person.getFirstPinYin().charAt(0);
        // 通过首字母的assii值来判断是否显示字母
        int positionForSelection = getPositionForSelection(selection);
        if (position == positionForSelection) {// 相等说明需要显示字母
            holder.tag.setVisibility(View.VISIBLE);
            holder.tag.setText(person.getFirstPinYin());
        } else {
            holder.tag.setVisibility(View.GONE);
        }
        holder.nickname.setText(data.get(position).getName());
    }
    public int getPositionForSelection(int selection) {
        for (int i = 0; i < data.size(); i++) {
            String Fpinyin = data.get(i).getFirstPinYin();
            char first = Fpinyin.toUpperCase().charAt(0);
            if (first == selection) {
                return i;
            }
        }
        return -1;
    }
    @Override
    public int getItemCount() {
        return data.size();
    }
}

contact_item.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!-- 这个TextView就是显示字母的 -->
    <TextView
        android:id="@+id/tag"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="#e6e6e6"
        android:gravity="center_vertical"
        android:paddingLeft="10dip"
        android:text="Z"
        android:visibility="visible" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <View
            android:id="@+id/view_lv_item_line"
            android:layout_width="match_parent"
            android:layout_height="0.5dip"
            android:layout_marginLeft="10dip"
            android:layout_marginRight="20dip"
            android:background="#174465" />
        <ImageView
            android:id="@+id/iv_lv_item_head"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/view_lv_item_line"
            android:layout_marginLeft="5dp"
            android:src="@mipmap/ic_launcher" />
        <TextView
            android:id="@+id/nickname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dip"
            android:layout_toRightOf="@id/iv_lv_item_head"
            android:text="周华健" />
    </RelativeLayout>
</LinearLayout>

附录

Android 联系人字母排序（仿微信）



联系作者

我的微信公众号：吴小龙同学，欢迎关注交流，公号回复关键字「1024」有惊喜哦。