一、需求:
今日产品经理让在产品里面加了个横向选择的功能,控件样子大致要求为:
网上找了好久没找到此控件,只能自己动手写了,很适合新手练习自定义View,并贡献给大家,效果如下:
其实很多滚轮控件也只是这个简单控件 组合一下就可以了 。
有任何问题可以加QQ群询问:661614986。
二、实现思路:
这里我偷懒了,没有把上、左、右三个箭头写到控件里面,写进去也简单,不过突然感觉在外面布局,写个方法出来也是蛮帅的。所以今天我们的主角就是中间的可以横向滑动的部分,乍一看就是个recycleview,不过这里我没有想过要用recycleview来实现,不是不可以,是用recycleview的话,各种判断、计算偏移量太多了,而且需求中要求只是文本,无需加载布局,所以为了节省时间就干脆自定义一个名为HorizontalselectedView的View,宽高无需自己计算,只需在onDraw()方法里面把每个String 画出来, 然后监听滑动事件或者点击左右箭头的时候,重走onDraw()方法就可以了,难点在于onDraw的时候,每个String的坐标如何获得。
2.1、控件特征:
1、中间箭头下面的文字(被选中的文字)颜色和字体和其他的不一样
2、可以横向左右滑动,滑动过程当中,被选中的文字在变化
3、点击左右箭头的时候也可以 实现滚动,从而改变被选中的文字
4、可见区域内,显示的文字数是可以改变的
5、左右滑动的时候有回弹选择效果
根据以上特征,就能得到我们所需要的自定义属性,如下:
在构造方法里面初始化画笔和属性:
public HorizontalselectedView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
setWillNotDraw(false);//使可以走到onDraw方法
initAttrs(attrs);//初始化属性
initPaint();//初始化画笔
}
/** * 初始化属性 *@param attrs */
pri