自定义字母滑动LetterSlide控件

在通信目录中大家经常看到通过字母的滑动，选择存储名单中首字母相同的显示在当前，慢慢在学习，慢慢在积累，下面就是效果展示图片：

LetterSlide.gif

实现思路：
1、首先实现最右边的字母列表自定义控件。
2、在上述自定义控件中重写onTouchEvent(MotionEvent event)事件，确定点击或者滑动所选择的是那个字母？
3、在该自定义控件中书写选择字母的回掉接口，在布局中通过图片中间所示的圆形来显示？
针对上图所示的效果图，我们首先自定义最右边的列表展示控件：
1、自定义LetterSlide控件：

public class LetterSlide extends View {
    private int mHightLightColor= Color.RED;
    private int mNormalColor=Color.GRAY;
    private int mLetterSize=16;
    private Paint mHightLightPaint;
    private Paint mNormalPaint;
    private String[] letters={"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 String mCurrentLetter;
    private float letterHeight;
    public LetterSlide(Context context) {
        this(context,null);
    }
    public LetterSlide(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }
    public LetterSlide(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.LetterSlide);
     mHightLightColor=array.getColor(R.styleable.LetterSlide_highLightColor,mHightLightColor);
        mNormalColor=array.getColor(R.styleable.LetterSlide_normalColor,mNormalColor);
        mLetterSize= (int) array.getDimension(R.styleable.LetterSlide_letterSize,mLetterSize);

        initPaint(context);


    }
    private void initPaint(Context context) {
        mHightLightPaint=new Paint();
        mHightLightPaint.setAntiAlias(true);
        mHightLightPaint.setTextSize(Densityuitl.dip2px(context,mLetterSize));
        mHightLightPaint.setColor(mHightLightColor);

        mNormalPaint=new Paint();
        mNormalPaint.setAntiAlias(true);
        mNormalPaint.setTextSize(Densityuitl.dip2px(context,mLetterSize));
        mNormalPaint.setColor(mNormalColor);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        /*计算宽度*/
        int textWidth = (int) mHightLightPaint.measureText("A");
        int width=getPaddingLeft()+getPaddingRight()+ textWidth;
        int height=MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width,height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /*计算 一个字母的高度*/
        letterHeight = ((float)getHeight()/letters.length);

        for (int i = 0; i < letters.length; i++) {
            String letter = letters[i];
            /*字体的宽度*/
            float textWidth = mNormalPaint.measureText(letter);
            /*内容的宽度*/
            float contentWidth = getWidth()-getPaddingRight()-getPaddingLeft();
            /*计算从View坐标系的X轴方向开始画文字*/
            float x=getPaddingLeft()+(contentWidth-textWidth)/2;
            /*计算基线*/
            Paint.FontMetrics fontMetrics = mNormalPaint.getFontMetrics();
            float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
            float baseLine = letterHeight / 2 + (letterHeight * i) + dy;
            if (!letter.equals(mCurrentLetter)){
                canvas.drawText(letter,x,baseLine,mNormalPaint);
            }else{
                canvas.drawText(letter,x,baseLine,mHightLightPaint);
            }
        }
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        /*计算当前滑动选中的字母是那个*/
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                float y = event.getY();
                int v = (int) (y / letterHeight);
                if (v<0){
                    v=0;
                }else if (v>letters.length-1){
                    v=letters.length-1;
                }
                if (letters[v].equals(mCurrentLetter)){
                    return true;
                }
                mCurrentLetter=letters[v];
                if (listener!=null){
                    listener.onListener(mCurrentLetter,false);
                }
                break;
            case MotionEvent.ACTION_UP:
                if (listener!=null){
                    listener.onListener(mCurrentLetter,true);
                }
                break;
        }
        /*进行重绘*/
        invalidate();
//        return super.onTouchEvent(event);
        return true;
    }
    private OnLetterSlideListener listener;
    public interface OnLetterSlideListener{
        void onListener(String letter,boolean upFlag);
    }
    public void setListener(OnLetterSlideListener listener) {
        this.listener = listener;
    }
}

2、在Activity中画布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    tools:context="com.empsun.chenxin.letterslide.MainActivity">

    <com.empsun.chenxin.letterslide.LetterSlide
        android:id="@+id/letter_slide"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        app:highLightColor="#f00"
        app:normalColor="#21e0f9"
        app:letterSize="6sp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:background="#00ffffff"
        android:layout_alignParentRight="true"
        />
    <LinearLayout
        android:visibility="gone"
        android:id="@+id/chooice_layout"
        android:layout_centerInParent="true"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/circle_bg"
        android:gravity="center"
        >
        <TextView
            android:id="@+id/chooice_letter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#34e6fa"
            android:textSize="20sp"
            />
    </LinearLayout>
</RelativeLayout>

3、在Activity中进行代码处理：设置监听、设置选中字幕显示处理。

public class MainActivity extends AppCompatActivity implements LetterSlide.OnLetterSlideListener {
    private LetterSlide letter_slide;
    private TextView chooice_letter;
    private LinearLayout chooice_layout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        letter_slide = (LetterSlide) findViewById(R.id.letter_slide);
        letter_slide.setListener(this);
        chooice_letter = (TextView) findViewById(R.id.chooice_letter);
        chooice_layout = (LinearLayout) findViewById(R.id.chooice_layout);
    }
    @Override
    public void onListener(String letter, boolean upFlag) {
        if (!upFlag){
            chooice_layout.setVisibility(View.VISIBLE);
            chooice_letter.setText(letter);
        }else{
            chooice_layout.setVisibility(View.GONE);
        }
    }
}

综上代码就可以实现如图所示的效果了！！！