Android 自定义View——联系人右侧字母索引

现在很多app里面都有侧边栏字母索引列表，看着效果很炫酷，其实不难，那我们现在也来一起自定义一个侧边栏索引列表。

没图说个毛

GIF图：

------------------------------------开始撸代码-------------------------------------

一.首先我们先来写右侧的侧边栏

 

public class SideBar extends View {

    /*绘制的列表导航字母*/
    private String words[] = {"↑", "☆", "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 Paint wordsPaint;
    /*按下字母背景画笔*/
    private Paint bgPaint;
    /*每一个item的宽度*/
    private int wordWidth;
    /*每一个item的高度*/
    private int wordHeight;
    /*手指按下的字母索引*/
    private int touchIndex = -1;
    /*手指按下的字母改变接口*/
    private onWordsChangeListener listener;

    private TextView mTextDialog;

获取到控件的宽高，计算出每个item的宽高

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        wordWidth = getMeasuredWidth();
        int height = getMeasuredHeight();
        wordHeight = height / words.length;
    }

开始画字母列表

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < words.length; i++) {

            wordsPaint.setTypeface(Typeface.DEFAULT);
            wordsPaint.setAntiAlias(true);
            wordsPaint.setTextSize(DensityUtils.dp2px(getContext(), 14));

            // 是按下的字母则绘制背景
            if (touchIndex == i) {
                canvas.drawCircle(wordWidth / 2, wordHeight / 2 + i * wordHeight, wordHeight / 2, bgPaint);
                wordsPaint.setColor(Color.WHITE);
            } else {
                wordsPaint.setColor(Color.parseColor("#666666"));
            }

            //获取文字的宽高
            Rect rect = new Rect();
            wordsPaint.getTextBounds(words[i], 0, words[i].length(), rect);
            //得到文字的X坐标
            float wordX = wordWidth / 2 - wordsPaint.measureText(words[i]) / 2;
            float wordY = wordHeight / 2 + rect.height() / 2 + wordHeight * i;
            canvas.drawText(words[i], wordX, wordY, wordsPaint);
            wordsPaint.reset();
        }
    }

二.处理触摸事件:

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN | MotionEvent.ACTION_MOVE:
                float y = event.getY();
                //关键点===获得我们按下的是那个索引(字母)
                int index = (int) (y / wordHeight);
                touchIndex = index;
                //防止数组越界
                if (listener != null && 0 <= touchIndex && touchIndex <= words.length - 1) {
                    //回调按下的字母
                    listener.wordsChange(words[touchIndex]);
                    invalidate();
                    if (mTextDialog != null) {
                        mTextDialog.setText(words[index]);
                        mTextDialog.setVisibility(View.VISIBLE);
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                touchIndex = -1;
                invalidate();
                if (mTextDialog != null) {
                    mTextDialog.setVisibility(View.GONE);
                }
                break;
        }
        return true;

    }

   /*手指按下了哪个字母的回调接口*/
    public interface onWordsChangeListener {
        void wordsChange(String words);
    }

三.listview列表：将汉字转为拼音排序

 List<Person> mSortList = new ArrayList<Person>();

        for (int i = 0; i < date.length; i++) {
            Person sortModel = new Person();
            sortModel.setName(date[i]);
            //汉字转换成拼音
            String pinyin = characterParser.getSelling(date[i]);
            String sortString = pinyin.substring(0, 1).toUpperCase();

            // 正则表达式，判断首字母是否是英文字母
            if (sortString.matches("[A-Z]")) {
                sortModel.setLetter(sortString.toUpperCase());
            } else {
                sortModel.setLetter("#");
            }

            mSortList.add(sortModel);
        }

Collections.sort(mSortList, pinyinComparator);

 sideBar.setOnWordsChangeListener(new SideBar.onWordsChangeListener() {
            @Override
            public void wordsChange(String words) {
                if ("↑".equals(words)) {
                    listview.setSelection(0);
                } else if ("☆".equals(words)) {
                    listview.setSelection(1);
                } else {
                    //该字母首次出现的位置
                    int position = myAdapter.getPositionForSection(words.charAt(0));
                    if (position != -1) {
                        listview.setSelection(position+2);
                    }
                }
            }
        });

好啦! 大工告成，是不是很简单呢？嘿嘿。。。

==============源码下载============