Android 自定义View 字母索引条
Android自定义View实践篇，之前介绍了一篇view+动画实践篇, 本文让你把各种老师撸在一起！
写在开头
这是自定义View的第三篇文章，主要讲的是Android drawTextOnPath()的相关方法，以及属性动画相关的使用。当然个人觉得动画效果还是阔以的 嘻嘻。。
这篇主要还是说说在onDraw()中 drawText()相关的使用，实现的效果就是如图所示!
一个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(),如果屏幕尺寸发生了变化，不如说虚拟按键隐藏或者展示之后，还有就是屏幕旋转相关的。。
@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<String> 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(),准备好了相关的字母之后，这里就需要去再去计算新的相关参数然后通知绘制。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。
源码下载：
GItHub:https://github.com/lovejjfg/IndexBar
作者：lovejjfg 链接：http://www.jianshu.com/p/d0d3ae674de8
相关推荐
技术 - 思维 - 感悟
END