Android 自定义View 字母索引条

写在开头

这是自定义View的第三篇文章,第一篇是Android drawPath实现QQ拖拽泡泡,主要实现的是题目说的东西,第二篇是Android 自定义View 跳动的水果和文字,可能看这个题目不知道说的是撒,主要讲的是Android drawTextOnPath()的相关方法,以及属性动画相关的使用。当然个人觉得动画效果还是阔以的 嘻嘻。。
这篇主要还是说说在onDraw()drawText()相关的使用,实现的效果就是如图所示!

Android 自定义View 字母索引条_第1张图片
index_静态.png
index.gif

一个View从出生到你能看到的话,肯定是会经历onMeasure()onLayout()onDraw(),这几方法的,而自定义View无外乎也要涉及到这几个相关的方法,这篇文章没有那么复杂,主要涉及的就是onDraw()方法!

开门见山-IndexBar

不管是在QQ上,还是在163的邮箱中,或者自己手机的通讯录中,右侧都会躺着一个这个玩意儿,我姑且不造官方有没有相关的东西,或者大家约定俗成的称呼这个玩意儿叫什么,反正我就叫它索引条-IndexBar了吧!

IndexBar从整体样式上(我观察的哈),分为两种,一种就是不管三七二十一,26个字母糊糊的贴上去的那种,还有一种就是根据当前的具体内容,只展示相关的首字母的!至于touch到IndexBar背景变为灰色,滑动时选中的字母呈现出选中的状态,这些都搜easy滴!!当然你可能要说还有开头是#号的,或者写着热门等等等的。。

实现思路

这个问题要一分为二来看,首先是怎么把26个字母画出来,然后才是怎么去识别触摸对应的是哪个字母!!

画出对应的字母

这个不用多说,肯定是要调用 drawText()相关的方法,drawText(@NonNull String text, float x, float y, @NonNull Paint paint),这里我们需要注意的就是这里的x和y是撒意思了!
它就是控制这个文字开始的左下定位的坐标。文字就是从这个点的开始向右上绘制出来的!Demo中onDraw方法有对应的注释了的方法,打开可以直接看相关的效果。

首先确定X轴的距离,就是(总的宽度-文字的宽度)/2,这样每个文字水平就是居中显示的了!!
然后确定Y轴的位置,就是(每个文字的总高度+文字的高度)/2,(文字是确定的左下方的坐标点,向下应该加起来!)这样每个文字在竖直方向单位高度中也是居中显示的了!!

那么问题来了,上面说的那些宽度高度等要怎么获取呢?
获取屏幕的高度,平分到26个字母,有'# '或者 ‘热门’再把相关的东西加上!这个就是 每个文字的总高度!接下来就是涉及到这几个方法:
onDraw() 这个不用说,你不draw怎么能展示出来呢?
onSizeChanged(),如果屏幕尺寸发生了变化,不如说虚拟按键隐藏或者展示之后,还有就是屏幕旋转相关的。。
setLetters(),准备好了相关的字母之后,这里就需要去再去计算新的相关参数然后通知绘制。

    @Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (letters != null) {
        for (int i = 0; i < letters.size(); i++) {
            String text = letters.get(i);
            float textWidth = mPaint.measureText(text);
            mPaint.getTextBounds(text, 0, text.length(), mRect);
            float textHeight = mRect.height();
            float x = mCellWidth * 0.5f - textWidth * 0.5f;
            float y = mCellHeight * 0.5f + textHeight * 0.5f + mCellHeight * i + beginY;
            mPaint.setColor(mIndex == i ? selecColor : normalColor);
            canvas.drawText(text, x, y, mPaint);

        }
    }
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mHeight = getMeasuredHeight()-getPaddingTop()-getPaddingBottom();
    mCellWidth = getMeasuredWidth();
    mCellHeight = mHeight * 1.0f / 26;
    if (letters != null) {
        beginY = (mHeight - mCellHeight * letters.size()) * 0.5f;
    }

}


public void setLetters(@Nullable List letters) {

    if (letters == null) {
        setVisibility(GONE);
        return;
    }
    this.letters = letters;
    mHeight = getMeasuredHeight()-getPaddingTop()-getPaddingBottom();
    mCellWidth = getMeasuredWidth();
    mCellHeight = mHeight * 1.0f / 26;
    beginY = (mHeight - mCellHeight * letters.size()) * 0.5f;
    invalidate();
}

setLetters()onSizeChanged()里面的代码基本上是重复的,只是在setLetters()里面调用了 invalidate()去通知重新绘制。

触摸的相关状态添加

首先是触摸到这个索引条,背景加深,这个肯定就是走touch事件了嘛,在ACTION_DOWN的时候修改相关状态,在ACTION_UP的时候,再次刷新相关状态咯。

这里要使用refreshDrawableState()onCreateDrawableState()这两个方法,如果你知道了,就当我在这里瞎比比吧!哈哈。。如果不清楚,可以看看我之前写的一篇自定义状态选择器。

//定义一个状态
private static final int[] STATE_FOCUSED = new int[]{android.R.attr.state_focused};
//DOWN 设为true UP 设为false
private void refreshState(boolean state) {
    if (pressed != state) {
        pressed = state;
        refreshDrawableState();
    }
}

@Override
public int[] onCreateDrawableState(int extraSpace) {
    int[] states = super.onCreateDrawableState(extraSpace + 1);
    if (pressed) {
        mergeDrawableStates(states, STATE_FOCUSED);
    }
    return states;
}

背景选择基本欧克了!

然后是选中的字母的颜色,这个其实就是更换画笔的颜色就好了!!这个就放在下面的一块内容中。

点击相关回调

用户看到的都是表象,触摸到的肯定是某一个坐标值,这个坐标应该对应这26个字母中的某一个字母的所在的坐标!比如说总高度是2600,然后每个字母Y轴所占的区域就是100,你触摸的坐标是(x,520),那这个明显就是第六个字母了嘛,获取到了对应的position,这个问题就解决完了!

       @Override
public boolean onTouchEvent(MotionEvent event) {
    float y;
    invalidate();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            Log.i("TAG", "onTouchEvent:Down ");
            getParent().requestDisallowInterceptTouchEvent(true);
            refreshState(true);
            y = event.getY();
            checkIndex(y);
            break;
        case MotionEvent.ACTION_MOVE:
            y = event.getY();
            checkIndex(y);
            break;
        case MotionEvent.ACTION_UP:
            refreshState(false);
            mIndex = -1;
            break;

        default:
            break;
    }
    return true;
}



private void checkIndex(float y) {
    int currentIndex;
    if (y < beginY+getPaddingTop()) {
        return;
    }
    currentIndex = (int) ((y - beginY-getPaddingTop()) / mCellHeight);
    if (currentIndex != mIndex) {
        if (mOnLetterChangeListener != null) {
            if (letters != null && currentIndex < letters.size()) {
                mIndex = currentIndex;
                mOnLetterChangeListener.onLetterChange(letters.get(currentIndex));
    //          Log.i(TAG, "checkIndex: "+letters.get(currentIndex));
            }
        }
       
    }
}

然后就是上面遗留的那个问题,选中字母颜色的更改就是通过这个mIndex来实现的,在draw方法中的这行代码:

mPaint.setColor(mIndex == i ? selecColor : normalColor);
            canvas.drawText(text, x, y, mPaint);

那到这里可以看到,那就是View的展现和相关逻辑的确是分开的,你看到的都是一些表面现象。

滚动到指定的位置

这个是最终的要求了,这里要区分实现机制了,如果你是使用了ListView,那么直接调用setSelection()就可以滚动到指定的位置了。
如果你是使用了RecycleView的话,那么就是使用LayoutManager的manager.scrollToPositionWithOffset(pos,0)
我在测验中发现直接使用manager.scrollToPosition()的话,的确可以滚动,但是不是出现在顶部位置!

总结

本次Indexbar的话,绘制部分主要涉及到了onDraw()方法,canvas.drawText()
细节的话,就是onSizeChanged() 和 setLetters()之后的通知重新绘制。
还有就是状态选择器,两个方法refreshDrawableState()onCreateDrawableState()
需要注意的是,有两个偏移量 beginY 和 topPadding,beginY是用居中的一个偏移量,topPadding就不用多说了!

回调部分,就是onTouch相关处理,根据getY()获取相关Y轴的值推算出对应的position,然后再回调到对应的ListView或者RecycleView

Gif所示的Demo地址:IndexDemo

自定义View的Demo相关地址自定义View

你可能感兴趣的:(Android 自定义View 字母索引条)