电话本字母侧边栏

我们在做项目的时候，我们经常会碰到类似于我们手机里面的电话本侧边栏的控件，比如地址选择，院校选择等等，以前的用的时候我用的是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了，下次来个侧边栏和列表组合使用。