自定义View之字母索引

在Android中，字母索引这一设计在很多App中都有体现。手机联系人、微信、支付宝等在联系人一栏都会有这种设计。这种设计的便捷之处就是可以快捷的查找联系人。所以，我们今天也来打造这么一个自定义View的效果。注意，这里仅仅是模仿UI效果，不会实现功能。

字母索引

这里只是谈一下实现的思路，不再详细的说明各个流程。详细的流程请看上两篇自定义View的文章，那两篇我流程写的很详细。

由于现在只想要这个IndexBar显示的宽度为字母的宽度+padding。也就是在这里我们的布局width为wrap_content，而height为match_parent。所以，在绘制竖排竖排字母前，我们还是要测量一下View。

onMeasure()中：

1
2
3
4
5
6
7
8
9
10
11
@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //测量文字宽度
        mTextWidth = (int) mPaint.measureText("A");
        //view的宽 = 左边padding + 右边padding　+ 文字大小
        int width = getPaddingLeft() + getPaddingRight() + mTextWidth;
        setMeasuredDimension(width, height);
    }

这里很好理解，由于高度是match_parent，所以直接不用处理高度。这里只要处理宽度就可以了。通过计算得到View的宽，之后只需要使用setMeasuredDimension(width, height)就完成了整个View的测量。

接下来，就可以进行View的绘制了。

onDraw()中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@Override
   protected void onDraw(Canvas canvas) {
       //每个字母x坐标的起始位置 = View的宽度 - 字母宽度 - 右边的padding
       int x = getWidth() - mTextWidth - getPaddingRight();
       //单个字母的高度 = View的高度 / 字母总数
       float singleLetterHeight = (getHeight()) / letters.length;
       for (int i = 0; i < letters.length; i++) {
           //得到具体的字母
           String letter = letters[i];
           //拿到当前画笔的 Paint.FontMetrics
           Paint.FontMetrics metrics = mLetterPaint.getFontMetrics();
           //第一个字母的基线位置（y坐标）
           int y = (int) ((metrics.bottom - metrics.top) / 2 - metrics.bottom);
           //每一个字母的基线y坐标 = 单个字母高度/2 + 第i个字母的高度 + 第一个字母的基线坐标
           //这里之所以加上 singleLetterHeight / 2 是为了让字母整体向下移动，因为第一个字母会显示不全
           int baseLine = (int) ((singleLetterHeight / 2 + singleLetterHeight * i) + y);
           //通过上面计算的坐标，开始绘制每个字母
           canvas.drawText(letter, x, baseLine, mLetterPaint);
       }
       //手指触摸时出现的覆盖在字母上的深颜色的矩形框的位置
       Rect rect = new Rect(x / 2, 0, getWidth(), getHeight());
       if (isDown) {
           //绘制那个矩形框
           canvas.drawRect(rect, mPaint);
           //为了让手指离开时，矩形框也消失的一个flag
           isDown = false;
       }
   }

当然下面这样进行坐标的计算也是可以的,是利用getTextBounds()：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@Override
   protected void onDraw(Canvas canvas) {
       //每个字母x坐标的起始位置 = View的宽度 - 字母宽度 - 右边的padding
       int x = getWidth() - mTextWidth - getPaddingRight();
       //单个字母的高度 = View的高度 / 字母总数
       float singleLetterHeight = (getHeight()) / letters.length;
       for (int i = 0; i < letters.length; i++) {
           //得到具体的字母
           String letter = letters[i];
           Rect rect = new Rect();
           mLetterPaint.getTextBounds(letter,0,letter.length(),rect);
           //第一个字母的基线位置
           int y = rect.bottom - rect.top;
           Log.d(TAG, "onDraw: "+y);
           Log.d(TAG, "onDraw: "+rect.bottom);
           Log.d(TAG, "onDraw: "+rect.top);
           //每一个字母的基线y坐标 = 单个字母高度/2 + 第i个字母的高度 + 第一个字母的基线坐标
           //这里之所以加上 singleLetterHeight / 2 是为了让字母整体向下移动
           int baseLine = (int) ((singleLetterHeight / 2 + singleLetterHeight * i) + y);
           //通过上面计算的坐标，开始绘制每个字母
           canvas.drawText(letter, x, baseLine, mLetterPaint);
       }
       //手指触摸时出现的覆盖在字母上的深颜色的矩形框的位置
       Rect rect = new Rect(x / 2, 0, getWidth(), getHeight());
       if (isDown) {
           //绘制那个矩形框
           canvas.drawRect(rect, mPaint);
           //为了让手指离开时，矩形框也消失的一个flag
           isDown = false;
       }
   }

绘制矩形框时，发现矩形框与字母颜色类似，做了如下处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private void init(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.LetterSiderBar);
        mLetterColor = array.getColor(R.styleable.LetterSiderBar_letterTextColor, mLetterColor);
        mLetterSize = array.getDimension(R.styleable.LetterSiderBar_letterTextSize, mLetterSize);
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.DKGRAY);
        mPaint.setAlpha(127);
        mPaint.setStyle(Paint.Style.FILL);
        mLetterPaint = new Paint();
        mLetterPaint.setAntiAlias(true);
        mLetterPaint.setTextSize(sp2px(15));
        mLetterPaint.setColor(Color.GRAY);
        mLetterPaint.setStyle(Paint.Style.STROKE);
        mLetterPaint.setTypeface(Typeface.DEFAULT_BOLD);
}

setAlpha(127)，允许传入0~255之间的一个值，0为全透明，255为不同明。这里传入127表示半透明。这样就解决了同是灰色显示不清的问题。

绘制完字母之后，就需要进行触摸手势的处理了，这里只需要重写onTouchEvent()方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            //手指按下
            case MotionEvent.ACTION_DOWN:
            //手指滑动
            case MotionEvent.ACTION_MOVE:
                //当前位置
                float currentMoveY = event.getY();
                //单个字母高度
                float singleLetterHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / letters.length;
                //当前字母所在位置
                int currentPosition = (int) (currentMoveY / singleLetterHeight);
                //当前的位置<0，就代表手指滑到了View之外，View最上面
                //直接将当前位置置为第一个字母位置
                if (currentPosition < 0) {
                    currentPosition = 0;
                }
                //当前位置 > 所有字母数，手指在View之外，View最下面
                //直接将当前位置置为最后一个字母位置
                if (currentPosition > letters.length - 1) {
                    currentPosition = letters.length - 1;
                }
                //得到当前字母
                mCurrentLetter = letters[currentPosition];
                if (mListener != null) {
                    isTouch = true;
                    mListener.onTouch(mCurrentLetter, isTouch);
                }
                isDown = true;
                break;
            //手指抬起
            case MotionEvent.ACTION_UP:
                postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (mListener != null) {
                            isTouch = false;
                            mListener.onTouch(mCurrentLetter, isTouch);
                        }
                    }
                }, 500);
                break;
            default:
        }
        invalidate();
        return true;
    }

为了在触摸同时屏幕中心显示当前字母，就需要将当前字母传递出去。所以，这里用了java中的接口回调将当前字母传给调用者。

1
2
3
4
5
6
7
public void setOnSlideLetterBarTochListener(OnSlideLetterBarTochListener listener) {
        this.mListener = listener;
    }
    public interface OnSlideLetterBarTochListener {
        void onTouch(String letter, boolean isToch);
    }

最后，布局文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
    >
    <com.example.letterindexview.LetterSiderBar
        android:id="@+id/slide"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:padding="15dp"
        />
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/shape_text"
        android:gravity="center"
        android:textColor="#fff"
        android:textSize="30sp"
        android:visibility="gone"
        />
</RelativeLayout>

屏幕中心圆形文字，是一个TextView，背景是一个shape。

1
2
3
4
5
6
7
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval"
    >
    <solid android:color="@color/colorPrimary"/>
    <size android:width="60dp"/>
    <size android:height="60dp"/>
</shape>

最后在Activity中处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    final TextView text = (TextView) findViewById(R.id.text);
    LetterSiderBar letter = (LetterSiderBar) findViewById(R.id.slide);
    letter.setOnSlideLetterBarTochListener(new LetterSiderBar.OnSlideLetterBarTochListener() {
        @Override
        public void onTouch(final String letter, boolean isToch) {
            if (isToch) {
                text.setVisibility(View.VISIBLE);
                text.setText(letter);
            } else {
                text.setVisibility(View.GONE);
            }
        }
    });
}

这样字母索引就完成了。

赏

谢谢你请我喝咖啡~~~

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

I'm Kevin Jern，<br>一名在校大学生，<br>自由主义、理想主义以及完美主义者<br><br>热爱科技，热爱技术<br/>目前是一名小白Android Developer<br/><br/>竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。<br>回首向来萧瑟处，归去，也无风雨也无晴。