1.字母索引列表效果
image.png
2.效果分析
2.1 当用于手指触摸右侧字母列表时，手指滑动，页面中间显示显示字母大写，同时，右侧的字母列表中的当前字母同时变大，变红色。
2.2 绘制右侧字母列表
2.3 处理手指触摸事件，根据手指当前的高度除以右侧字母列表高度，计算得出当前手指所处高度的字母。
2.4 添加回调事件，手指移动时，回调显示页面中央的字母。
3.代码实现
3.1 创建自定义View
public class CMLetterSiderView extends View {
//定义26个字母
private static String[] cmLetterSiderViewLetters = {"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 Paint cmLetterNormalPaint,cmLetterChoosePaint;
private int cmLetterChooseTextSize;
private int cmLetterChooseTextColor;
private int cmLetterNormalTextSize;
private int cmLetterNormalTextColor;
private String cmLetterCurrent;
public CMLetterSiderView(Context context) {
this(context,null);
}
public CMLetterSiderView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public CMLetterSiderView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
3.2 添加自定义属性
<!--字母索引列表-->
<declare-styleable name="CMLetterSiderView">
<attr name="cmLetterSiderChooseTextColor" format="color"></attr>
<attr name="cmLetterSiderChooseTextSize" format="dimension"></attr>
<attr name="cmLetterSiderNormalTextColor" format="color"></attr>
<attr name="cmLetterSiderNormalTextSize" format="dimension"></attr>
</declare-styleable>
3.3 获取属性，添加画笔
/**
* 创建画笔
* 1.获取自定义属性
* 2.创建画笔
*/
private void initPaint(Context context, @Nullable AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CMLetterSiderView);
cmLetterNormalTextColor = typedArray.getColor(R.styleable.CMLetterSiderView_cmLetterSiderNormalTextColor,cmLetterNormalTextColor);
cmLetterNormalTextSize = (int) typedArray.getDimension(R.styleable.CMLetterSiderView_cmLetterSiderNormalTextSize,cmLetterNormalTextSize);
cmLetterChooseTextColor = typedArray.getColor(R.styleable.CMLetterSiderView_cmLetterSiderChooseTextColor, cmLetterChooseTextColor);
cmLetterChooseTextSize = (int) typedArray.getDimension(R.styleable.CMLetterSiderView_cmLetterSiderChooseTextSize,cmLetterChooseTextSize);
typedArray.recycle();
cmLetterNormalPaint = new Paint();
cmLetterNormalPaint.setAntiAlias(true);
cmLetterNormalPaint.setColor(cmLetterNormalTextColor);
cmLetterNormalPaint.setTextSize(cmLetterNormalTextSize);
cmLetterChoosePaint = new Paint();
cmLetterChoosePaint.setAntiAlias(true);
cmLetterChoosePaint.setColor(cmLetterChooseTextColor);
cmLetterChoosePaint.setTextSize(cmLetterChooseTextSize);
}
3.4 从新测量，设置字母列表的宽高
/**
* 重新测量宽高
* @param widthMeasureSpec
* @param heightMeasureSpec
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int textWidth = (int) cmLetterNormalPaint.measureText("A");// A字母的宽度
width = getPaddingLeft()+getPaddingLeft()+textWidth;
height = height + 1*cmLetterSiderViewLetters.length;
//重新设置宽高
setMeasuredDimension(width,height);
}
3.5 绘制字母列表
/**
* 重新绘制
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
//重新绘制
//获取单个字母条目的高度
int itemsHeight = (getHeight() - getPaddingBottom() - getPaddingTop())/cmLetterSiderViewLetters.length;
//for循环画出26个字母
for (int i = 0; i < cmLetterSiderViewLetters.length; i++){
float y = (getHeight() - getPaddingBottom() - getPaddingTop())/cmLetterSiderViewLetters.length;
int letterCenterY = (int) (y*i + y/2 + getPaddingTop());
Paint.FontMetrics fontMetrics = cmLetterNormalPaint.getFontMetrics();
int dy = (int) ((fontMetrics.bottom - fontMetrics.top)/2 - fontMetrics.bottom);
int baseLine = letterCenterY + dy;
if(cmLetterSiderViewLetters[i].equals(cmLetterCurrent)){
float x = getWidth()/2 - cmLetterChoosePaint.measureText(cmLetterSiderViewLetters[i])/2;
canvas.drawText(cmLetterSiderViewLetters[i],x,baseLine,cmLetterChoosePaint);
}else{
float x = getWidth()/2 - cmLetterNormalPaint.measureText(cmLetterSiderViewLetters[i])/2;
canvas.drawText(cmLetterSiderViewLetters[i],x,baseLine,cmLetterNormalPaint);
}
}
}
3.6 重写onTouchEvent()方法，处理move事件
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
//获取当前手指的位置（高度），用当前手指的高度除以单个字母的高度，得出手指当前所处于哪个字母上
float currentMoveY = event.getY();
float itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom())/cmLetterSiderViewLetters.length;
int currentPosition = (int) (currentMoveY/itemHeight);
if(0 > currentPosition){
currentPosition = 0;
}
if((cmLetterSiderViewLetters.length - 1) < currentPosition){
currentPosition = cmLetterSiderViewLetters.length - 1;
}
cmLetterCurrent = cmLetterSiderViewLetters[currentPosition];
if(mCMLetterSiderTouchListener != null){
mCMLetterSiderTouchListener.cmLetterSiderTouchListener(cmLetterCurrent,true);
}
invalidate();
break;
case MotionEvent.ACTION_UP:
if(mCMLetterSiderTouchListener != null){
mCMLetterSiderTouchListener.cmLetterSiderTouchListener(cmLetterCurrent,false);
}
break;
}
return true;
}
3.6 提供回调方法
//提供回掉方法
private CMLetterSiderTouchListener mCMLetterSiderTouchListener;
public void setOnCMLetterSiderTouchListener(CMLetterSiderTouchListener mCMLetterSiderTouchListener){
this.mCMLetterSiderTouchListener = mCMLetterSiderTouchListener;
}
public interface CMLetterSiderTouchListener{
void cmLetterSiderTouchListener(CharSequence letter,boolean isTouch);
}
4
Github
https://github.com/hualianrensheng/CMViewDemo
引用：
https://www.jianshu.com/p/1dc41a770f64
网友评论