自定义通讯录字母索引

1、先来看下布局的效果

布局的代码如下，其中LetterIndexView为我们将要自定义的控件，使用相对布局置于界面的右侧；

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="com.itemp.letterindexview.MainActivity">    <ListView        android:id="@+id/lvFriends"        android:layout_width="match_parent"        android:layout_height="match_parent"/>    <TextView        android:id="@+id/tvCurrentLetter"        android:layout_width="100dp"        android:layout_height="100dp"        android:background="@drawable/shape_letterindexview_bg_pressed"        android:gravity="center"        android:textSize="50sp"        android:layout_centerInParent="true"        android:textColor="@color/white"        android:textStyle="bold"        android:visibility="visible"        android:text="A" />    <com.itemp.letterindexview.LetterIndexView        android:id="@+id/liv"        android:layout_width="35dp"        android:layout_height="match_parent"        android:layout_margin="5dp"        android:layout_alignParentRight="true"        /></RelativeLayout>

2、继承于View并使用绘图法在画布上绘制字母：

public class LetterIndexView extends View

3、实现构造方法，在其中初始化画笔，并为控件设置背景图（shape资源制作的圆角矩形）

    public LetterIndexView(Context context) {        this(context, null);    }    public LetterIndexView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public LetterIndexView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        //setBackgroundResourece();        setBackgroundResource(R.drawable.shape_letterindexview_bg);        paint = new Paint();        paint.setAntiAlias(true);//抗锯齿    }

4、shape资源的定义代码：res/drawable/shape_letterindexview_bg.xml

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#fff" />    <stroke        android:width="1dp"        android:color="#ddd" />    <corners android:radius="10dp" /></shape>

这是一个白色实心的圆角矩形，按下后将其变为黄色实心的圆角矩形，文件为res/drawable/shape_letterindexview_bg_pressed.xml：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#ff0" />    <stroke        android:width="1dp"        android:color="#ddd" />    <corners android:radius="10dp" /></shape>

5、定义字符串数组作为索引的文本：

String[] letters = new String[]{    "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", "#",};

6、覆写onDraw()方法，将字母纵向排列均匀地绘制在画布上：

@Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if (width == 0) {            width = getWidth();            height = getHeight();        }        //把字母画在控件上，【选中字母】用红色画笔，否则黑色        for (int i = 0; i < letters.length; i++) {            //计算startX，控件宽度的一半减去字母宽度的一半            String letter = letters[i];            float letterSize = paint.measureText(letter);            float startX = (width - letterSize) / 2;            //startY，上方所有单元格的高度之和+（单元格高度的一半+字母高度的一半）            float unitHeight = (height - 40) / 27f;            float startY = 20 + i * unitHeight + (unitHeight + letterSize) / 2;            //高亮字母为红色，否则为黑色            if(i == currentPosition){                paint.setColor(Color.RED);            }else {                paint.setColor(Color.BLACK);            }            paint.setTextSize(35);            paint.setStyle(Paint.Style.FILL_AND_STROKE);//使用加粗效果            canvas.drawText(letter, startX, startY, paint);//绘制字母        }    }

7、接下来覆写onTouchEvent()定义手指在控件上的滑动响应，逻辑为：
·手指按下，整个控件的背景色变为黄色，并根据手指按下的y的位置，确认哪个字母为选中字母，并重绘以将该字母高亮显示，并通知外界响应按下事件（比如显示小窗口见本文末尾GIF）
·手指滑动，动态改变选中字母，并重绘以将该字母高亮显示
·手指抬起，控件背景恢复为默认的白色，并通知外界响应（比如隐藏小窗口见文章末尾GIF）

    @Override    public boolean onTouchEvent(MotionEvent event) {        float y = event.getY();        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                //改变背景效果                setBackgroundResource(R.drawable.shape_letterindexview_bg_pressed);                //根据手指位置设置高亮字母并重绘                invalidateCurrentPosition(y);                //通知外界手指按下                if (callback != null) {                    callback.onFingerDown(true);                }                break;            case MotionEvent.ACTION_MOVE:                //根据手指位置设置高亮字母并重绘                invalidateCurrentPosition(y);                //通知外界字母变化                if (callback != null) {                    callback.onLetterChanged(letters[currentPosition]);                }                break;            case MotionEvent.ACTION_UP:                //恢复背景效果                setBackgroundResource(R.drawable.shape_letterindexview_bg);                //通知外界手指抬起                if (callback != null) {                    callback.onFingerDown(false);                }                break;        }        return true;    }    /**     * 根据手指位置动态设置高亮字母并重绘     * @param y     */    private void invalidateCurrentPosition(float y) {        currentPosition = (int) ((y / height) * letters.length);        if(currentPosition > 26){            currentPosition = 26;        }        invalidate();    }

11、以接口的方式通知外界：手指按下或抬起，高亮字母发生改变：

    LetterIndexCallback callback;    public void setCallback(LetterIndexCallback callback) {        this.callback = callback;    }    public interface LetterIndexCallback {        void onFingerDown(boolean down);        void onLetterChanged(String letter);    }

12、最后当外界ListView主动滚动时，字母索引的选中字母也随之变化，我们为外界提供公共方法，用于更新选中字母的位置：

    /**     * 供外界ListView滚动时通知到当前控件     * @param firstLetter     */    public void setCurrentLetter(String firstLetter) {        for (int i = 0; i < letters.length; i++) {            if(letters[i].equals(firstLetter)){                setCurrentPosition(i);                return;            }        }    }

13、Activity实现【索引控件】的回调接口，并将自身设置给【索引控件】：

public class MainActivity extends AppCompatActivity implements LetterIndexView.LetterIndexCallback 

@Override    public void onLetterChanged(String letter) {        tvCurrentLetter.setText(letter);    }    @Override    public void onFingerDown(boolean fingerDown) {        if(fingerDown){            tvCurrentLetter.setVisibility(View.VISIBLE);        }else {            tvCurrentLetter.setVisibility(View.GONE);        }    }

letterIndexView.setCallback(this);

效果如下：