电话本字母侧边栏

我们在做项目的时候，我们经常会碰到类似于我们手机里面的电话本侧边栏的控件，比如地址选择，院校选择等等，以前的用的时候我用的是listView来写，写起来比较麻烦，代码也比较多，于是就动手写一个自定义控件。我的实现思路是，我们定义一个数组，用来装索引字母，控件的高度为26个字母的高度加上上下的padding，控件的宽度是单个字母的宽度加上左右的padding，再不断地去动态的画出这26个字母，在onTouchEvent里面去处理我们手指的触摸事件，然后再去调用invalidate();从而调用我们的onDraw()；

下面草图是关于控件高度计算的一些解释：

结合上面的图片分析，下面我们再看看主要代码就很清晰了：

    private Paint mPaint;
    // 定义26个字母
    public static String[] mLetters = {"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 mCurrentSelectedLetter;


    public SliderBar(Context context) {
        this(context, null);
    }

    public SliderBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SliderBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        // 自定义属性，颜色  字体大小
        mPaint.setTextSize(sp2px(15));// 设置的是像素
        // 默认颜色
        mPaint.setColor(Color.BLACK);
    }

    // sp 转 px
    private float sp2px(int sp) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,
                sp, getResources().getDisplayMetrics());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 宽度 = 左右的padding + 字母的宽度(取决于你的画笔)
        int textWidth = (int) mPaint.measureText("A");// A字母的宽度,这里随便一个字母的宽度都行
        int width = getPaddingLeft() + getPaddingRight() + textWidth;
        // 高度可以直接获取
        int height = MeasureSpec.getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //获取每个字母的高度
        int itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / mLetters.length;
        for (int i = 0; i < mLetters.length; i++) {
            //每个字母的中间位置
            int letterCenterY = i * itemHeight + itemHeight / 2 + getPaddingTop();
            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
            int dy = (int) ((fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);
            int baseLine = letterCenterY + dy;
            int textWidth = (int) mPaint.measureText(mLetters[i]);
            int x = getWidth() / 2 - textWidth / 2;
            if (mLetters[i].equals(mCurrentSelectedLetter)) {
                mPaint.setColor(Color.BLUE);
                canvas.drawText(mLetters[i], x, baseLine, mPaint);
            } else {
                mPaint.setColor(Color.BLACK);
                canvas.drawText(mLetters[i], x, baseLine, mPaint);
            }

        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //获得手指当前的触摸位置Y
                float currentY = event.getY();
                //字母的高度
                int itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / mLetters.length;
                //获得手指触摸位置是在哪个字母的位置
                int currentPosition = (int) (currentY / itemHeight);
                if (currentPosition < 0)
                    currentPosition = 0;
                if (currentPosition > mLetters.length - 1)
                    currentPosition = mLetters.length - 1;
                mCurrentSelectedLetter = mLetters[currentPosition];
                if (mListener != null) {
                    mListener.touch(mCurrentSelectedLetter, true);
                }
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                if (mListener != null) {
                    mListener.touch(mCurrentSelectedLetter, false);
                }
                mCurrentSelectedLetter = "";
                invalidate();
                break;
        }
        return true;
    }

    public interface LetterTouchListener {
        void touch(String letter, boolean isTouch);
    }

    private LetterTouchListener mListener;

    public void setOnLetterTouchListener(LetterTouchListener listener) {
        this.mListener = listener;
    }

使用：

<?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="moocollege.cn.listindex.MainActivity">

    <TextView
        android:id="@+id/dialog"
        android:layout_width="80.0dip"
        android:layout_height="80.0dip"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:background="@drawable/back_search_bar"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/colorAccent"
        android:textSize="30.0dip"
        android:visibility="gone" />

    <moocollege.cn.listindex.SliderBar
        android:id="@+id/slide_bar"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:paddingBottom="10dp"
        android:paddingRight="16dp"
        android:paddingTop="10dp" />
</RelativeLayout>

public class MainActivity extends AppCompatActivity implements SliderBar.LetterTouchListener {

    private SliderBar mSliderBar;
    private TextView mShowText;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSliderBar = (SliderBar) findViewById(R.id.slide_bar);
        mShowText = (TextView) findViewById(R.id.dialog);
        mSliderBar.setOnLetterTouchListener(this);
    }

    @Override
    public void touch(String letter, boolean isTouch) {
        if (isTouch) {
            mShowText.setVisibility(View.VISIBLE);
            mShowText.setText(letter);
        } else {
            mShowText.setVisibility(View.GONE);
        }
    }
}

我们看一下实际电话本侧边索引和我们自己的效果：

好了就是这么简单，再也不用去listview了，下次来个侧边栏和列表组合使用。