安卓开发 简单实现自定义横向滚动选择View : HorizontalselectedView

一、需求：

今日产品经理让在产品里面加了个横向选择的功能，控件样子大致要求为:



网上找了好久没找到此控件，只能自己动手写了，很适合新手练习自定义View，并贡献给大家，效果如下：



其实很多滚轮控件也只是这个简单控件 组合一下就可以了 。

有任何问题可以加QQ群询问：661614986。

二、实现思路：

这里我偷懒了，没有把上、左、右三个箭头写到控件里面，写进去也简单，不过突然感觉在外面布局，写个方法出来也是蛮帅的。所以今天我们的主角就是中间的可以横向滑动的部分，乍一看就是个recycleview,不过这里我没有想过要用recycleview来实现，不是不可以，是用recycleview的话，各种判断、计算偏移量太多了，而且需求中要求只是文本，无需加载布局，所以为了节省时间就干脆自定义一个名为HorizontalselectedView的View，宽高无需自己计算，只需在onDraw（）方法里面把每个String 画出来， 然后监听滑动事件或者点击左右箭头的时候，重走onDraw()方法就可以了，难点在于onDraw的时候，每个String的坐标如何获得。

2.1、控件特征：

1、中间箭头下面的文字（被选中的文字）颜色和字体和其他的不一样

2、可以横向左右滑动，滑动过程当中，被选中的文字在变化

3、点击左右箭头的时候也可以 实现滚动，从而改变被选中的文字

4、可见区域内，显示的文字数是可以改变的

5、左右滑动的时候有回弹选择效果

根据以上特征，就能得到我们所需要的自定义属性，如下：

<declare-styleable name="HorizontalselectedView">
<!--可见数目-->
<attr name="HorizontalselectedViewSeesize" format="integer"></attr>
<!--被选择文字的大小和颜色-->
<attr name="HorizontalselectedViewSelectedTextSize" format="float"></attr>
<attr name="HorizontalselectedViewSelectedTextColor" format="color|reference"></attr>

<!--未被被选择文字的大小和颜色-->
<attr name="HorizontalselectedViewTextSize" format="float"></attr>
<attr name="HorizontalselectedViewTextColor" format="color|reference"></attr>

</declare-styleable>

在构造方法里面初始化画笔和属性：

public HorizontalselectedView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
setWillNotDraw(false);//使可以走到onDraw方法
initAttrs(attrs);//初始化属性
initPaint();//初始化画笔
}

/**
* 初始化属性
* @param attrs
*/
private void initAttrs(AttributeSet attrs) {
TintTypedArray tta = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.HorizontalselectedView);
//两种字体颜色和字体大小
seeSize = tta.getInteger(R.styleable.HorizontalselectedView_HorizontalselectedViewSeesize, 5);
selectedTextSize = tta.getFloat(R.styleable.HorizontalselectedView_HorizontalselectedViewSelectedTextSize, 50);
selectedColor = tta.getColor(R.styleable.HorizontalselectedView_HorizontalselectedViewSelectedTextColor, context.getResources().getColor(android.R.color.black));
textSize = tta.getFloat(R.styleable.HorizontalselectedView_HorizontalselectedViewTextSize, 40);
textColor = tta.getColor(R.styleable.HorizontalselectedView_HorizontalselectedViewTextColor, context.getResources().getColor(android.R.color.darker_gray));
}

/**
* 初始化画笔
*/
private void initPaint() {
textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);//普通文本画笔
textPaint.setTextSize(textSize);
textPaint.setColor(textColor);
selectedPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);//被选中文本画笔
selectedPaint.setColor(selectedColor);
selectedPaint.setTextSize(selectedTextSize);
}

2.2、重写onDraw（）方法：

所有的文字里面，被选中的文字是特殊的，他的大小和颜色不一样，所有我们先把他给画出来，关键点在于要测量文本的宽高，代码如下：

selectedPaint.getTextBounds(s, 0, s.length(), rect);
//从矩形区域中读出文本内容的宽高
int centerTextWidth = rect.width();
int centerTextHeight = rect.height();

canvas.drawText(strings.get(n), getWidth() / 2 - centerTextWidth / 2 ,                 getHeight() / 2 + centerTextHeight / 2, selectedPaint);//绘制被选中文字，注意点是y坐标,是以文字底部为中心

下面要做的是就是要遍历集合，把其他的文字给画出来，刚才也提到了，坐标是难点，我们看张图来理一理：



其实最巧妙的是得到图中所标注的一个单元的长度anInt，可见区域的长度除以可见个数就得到了 ， 还有就是这个n,给到数据源的时候，我是让数据源集合的长度除以2的，这个可以理解的。然后遍历集合的时候 就可以根据下面得到x的坐标：x=width/2+anInt*(i-n)-textWidth/2，这里面的textWidth我们默认他一样长了，但实际情况中，可能会出现三位数，四位数，三个字，四个字，所以在代码中，我是获得被选中文字左右两面长度的平均值得到的。

if (n > 0 && n < strings.size() - 1) {//获得中间被选中文字左右两边文本宽的平均值
textPaint.getTextBounds(strings.get(n - 1), 0, strings.get(n - 1).length(), rect);
int width1 = rect.width();
textPaint.getTextBounds(strings.get(n + 1), 0, strings.get(n + 1).length(), rect);
int width2 = rect.width();
textWidth = (width1 + width2) / 2;
}

接下来就可以在onDraw()方法里面遍历了：

for (int i = 0; i < strings.size(); i++) {//遍历strings，把每个地方都绘制出来，
if (n > 0 && n < strings.size() - 1) {
textPaint.getTextBounds(strings.get(n - 1), 0, strings.get(n - 1).length(), rect);
int width1 = rect.width();
textPaint.getTextBounds(strings.get(n + 1), 0, strings.get(n + 1).length(), rect);
int width2 = rect.width();
textWidth = (width1 + width2) / 2;
}

if (i == 0) {//得到高，高度是一样的，所以无所谓
textPaint.getTextBounds(strings.get(0), 0, strings.get(0).length(), rect);
textHeight = rect.height();
}

if (i != n)
canvas.drawText(strings.get(i), (i - n) * anInt + getWidth() / 2 - textWidth / 2 + anOffset, getHeight() / 2 + textHeight / 2, textPaint);//画出未被选中的每组文字

}

这样所得到的效果是把strings平铺在了控件上，其实已经有点样子了，下面就是进行滑动监听了。

迷糊了我们休息一下：

2.3、触屏监听事件：

触屏监听，自然而然就是要复写onTouchEvent 方法了 ， 这里的触屏事件还是比较简单的，先贴上代码：

@Override
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();//获得点下去的x坐标
break;
case MotionEvent.ACTION_MOVE://复杂的是移动时的判断
float scrollX = event.getX();

if (scrollX > downX) {
//向右滑动，当滑动距离大于每个单元的长度时，则改变被选中的文字。
if (scrollX - downX >= anInt) {
if (n > 0) {

n = n - 1;
downX = scrollX;
}
}
} else {

//向左滑动，当滑动距离大于每个单元的长度时，则改变被选中的文字。
if (downX - scrollX >= anInt) {

if (n < strings.size() - 1) {

n = n + 1;
downX = scrollX;
}
}
}

invalidate();
break;

case MotionEvent.ACTION_UP:
//抬起手指时，重绘

invalidate();

break;
default:
break;
}
return super.onTouchEvent(event);
}

奇怪的是，在这里面打log,只有down事件触发，move和up事件触发不了，这就要加上一行代码：

setClickable(true);//使可点击

讲解：

down的时候记录下downX坐标值，然后move时根据scrollX 和downX的大小判断向左还是向右，

从而当scrollX -downX的绝对值刚好等于anInt的时候，n相应的加1 或者减一 ， 再进行重绘，继而把此时的scrollX 赋值给doownX;

这个时候就实现了 左右滑动的时候，整个文本向右或者向左 一个单元一个单元的移动，这显然不是我们要的效果 ， 我们要的是 ， 滑动的过程当中 ， 文本就跟着手势在动，所以这里面肯定需要个偏移量offSet;

offset = scrollX - downX;

当移动一个单元长度的时候再把offset归零就可以了；所以最终每个文本的x坐标为：

canvas.drawText(strings.get(i), (i - n) * anInt + getWidth() / 2 - textWidth / 2 + anOffset, getHeight() / 2 + textHeight / 2, textPaint);

那up的时候我们就要把offSet归零，然后经行重绘，就产生了回弹效果

这样就基本实现需求了，需要注意的是有几个地方需要加上n的大小判断的，不能让他小于0了，或者大于集合长度了，防止越界，源码已上传至github，点击可查看。

2.4、对外提供的一些方法：

/**
* 设置个数据源
* @param strings 数据源String集合
*/
public void setData(List<String> strings)

/**
* 改变中间可见文字的数目
* @param seeSizes 可见数
*/
public void setSeeSize(int seeSizes)

/**
* 向左移动一个单元
*/
public void setAnLeftOffset()

/**
* 向右移动一个单元
*/
public void setAnRightOffset()

/**
* 获得被选中的文本
*
* @return 被选中的文本
*/
public String getSelectedString()

三、经验总结：

本篇文章为适合初级程序员学习的典型自定义View，可能很多人看到效果都觉得一头雾水，不知用了什么高大上的东西实现的，其实一步步理下来，就是先展示，再让他动起来，最多就是难在计算坐标而已，木户的地方我们一定要善于画图去总结，发现里面的规律，最后祝各位工作顺利，幸福美满！

只贴出了部分代码，源码已上传至github，点击可查看，欢饮star,fork ,有问题或者建议欢饮提出，大家共同进步，不喜勿喷，谢谢！