Android 滑动选择身高体重控件——RulerView
本文已授权微信公众号：鸿洋（hongyangAndroid）在微信公众号平台原创首发
前言
隔一段时间工作不忙的时候就想温习一下view相关的知识，比起学习其他东西，感觉做控件不会显的枯燥，日复一日做着重复的工作，维护着项目，总想在里面添加一些新的东西，比如新的界面开始用kotlin，用的第三方不是很满意的控件，想想不是很难就自己来做，闲来无聊就看看python入门，最近项目多了一个需要滑动选择身高和运动时间的控件，在github上没找到合适的，正好抛物线大神发起了一个自定义view的仿写活动，一举两得，就有了该控件。
封面图
封面.png
效果图
RulerViewGif.gif
2017/11/29 新添功能
gif2
使用
computeScrollTo(float)
2017/12/22 新添功能
image.png
增加了
scaleLimit属性用来设置相邻2个刻度之间的数量属性
支持设置的属性
<attr name="scaleLimit" format="integer" /> <!--相邻2个刻度之间的数量-->
<attr name="rulerHeight" format="dimension" /> <!--尺子的高度-->
<attr name="rulerToResultgap" format="dimension" /> <!--尺子距离结果的高度-->
<attr name="scaleGap" format="dimension" /> <!--刻度间距-->
<attr name="scaleCount" format="integer" /> <!--刻度数-->
<attr name="firstScale" format="float" /> <!--默认选中的刻度-->
<attr name="maxScale" format="integer" /> <!--最大刻度-->
<attr name="minScale" format="integer" /> <!--最小刻度-->
<attr name="bgColor" format="color" /> <!--背景色-->
<attr name="smallScaleColor" format="color" /> <!--小刻度的颜色-->
<attr name="midScaleColor" format="color" /> <!--中刻度的颜色-->
<attr name="largeScaleColor" format="color" /> <!--大刻度的颜色-->
<attr name="scaleNumColor" format="color" /> <!--刻度数的颜色-->
<attr name="resultNumColor" format="color" /> <!--结果字体的颜色-->
<attr name="unit" format="string" /> <!--单位-->
<attr name="unitColor" format="color" /> <!--单位颜色-->
<attr name="smallScaleStroke" format="dimension" /> <!--小刻度的宽度-->
<attr name="midScaleStroke" format="dimension" /> <!--中刻度的宽度-->
<attr name="largeScaleStroke" format="dimension" /> <!--大刻度的宽度-->
<attr name="resultNumTextSize" format="dimension" /> <!--结果字体大小-->
<attr name="scaleNumTextSize" format="dimension" /> <!--刻度字体大小-->
<attr name="unitTextSize" format="dimension" /> <!--单位字体大小-->
<attr name="showScaleResult" format="boolean" /> <!--是否显示结果值-->
<attr name="isBgRoundRect" format="boolean" /> <!--背景是否圆角-->
使用
compile ‘com.github.superSp:RulerView:v1.4’
实现思路
- 初始化画笔，以及其他需要的参数
- 重写
onMeasuer()确定尺子的大小 - 重写
onDraw()绘画出静态尺子，并且将一些滑动时需要改变的参数设置为变量，绘制时只绘制当前屏幕可见区域，滑动尺子时，只刷新当前屏幕模拟滑动并不是真正的滑动 - 重写
onTouchEvent()处理滑动，增加滑动速率监听VelocityTracker以及惯性滑动以及抬起手指时指针落在刻度上面需要的属性动画ValueAnimator
实现过程
测量
控件的高度=尺子的高度+结果值的高度+尺子距离结果值的高度
控件的宽度=屏幕宽度或者固定宽度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int heightModule = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
switch (heightModule) {
case MeasureSpec.AT_MOST:
height = rulerHeight + (showScaleResult ? resultNumRect.height() : 0) + rulerToResultgap * 2 + getPaddingTop() + getPaddingBottom();
break;
case MeasureSpec.UNSPECIFIED:
case MeasureSpec.EXACTLY:
height = heightSize + getPaddingTop() + getPaddingBottom();
break;
}
width = widthSize + getPaddingLeft() + getPaddingRight();
setMeasuredDimension(width, height);
}
绘制静态尺子
- 绘制背景
drawRect()
private void drawBg(Canvas canvas) {
bgRect.set(0, 0, width, height);
if (isBgRoundRect) {
canvas.drawRoundRect(bgRect, 20, 20, bgPaint); //20->椭圆的用于圆形角x-radius
} else {
canvas.drawRect(bgRect, bgPaint);
}
}
- 绘制尺子
这一步是绘制控件中最为复杂的一步，需要考虑初始如何默认选中初始刻度，手指抬起时候尺子需要滑动到的位置，计算当前所处刻度等等。
绘制滑动类型的view时，当初的想法是一次性绘制出全部内容，之后使用
canvas.clipRect()裁剪掉不可见区域，但是如果内容区域比较大，例如需要绘制1000个内容，则没滑动一次for循环需要执行1000次，而且刻度越大时候循环越多，占用内存更大，会造成卡顿，因此换了另外一种思路，只绘制当前屏幕可见区域内容，这样无论刻度有多大，暂用的内存都很小，滑动时，通过不断刷新来模拟滑动，做到以假乱真的效果。。。
private void drawScaleAndNum(Canvas canvas) {
canvas.translate(0, (showScaleResult ? resultNumRect.height() : 0) + rulerToResultgap);//移动画布到结果值的下面
int num1;//确定刻度位置
float num2;
if (firstScale != -1) { //第一次进来的时候计算出默认刻度对应的假设滑动的距离moveX
moveX = getWhichScalMovex(firstScale); //如果设置了默认滑动位置，计算出需要滑动的距离
lastMoveX = moveX;
firstScale = -1; //将结果置为-1，下次不再计算初始位置
}
num1 = -(int) (moveX / scaleGap); //滑动刻度的整数部分
num2 = (moveX % scaleGap); //滑动刻度的小数部分
canvas.save(); //保存当前画布
rulerRight = 0; //准备开始绘制当前屏幕,从最左面开始
if (isUp) { //这部分代码主要是计算手指抬起时，惯性滑动结束时，刻度需要停留的位置
num2 = ((moveX - width / 2 % scaleGap) % scaleGap); //计算滑动位置距离整点刻度的小数部分距离
if (num2 <= 0) {
num2 = scaleGap - Math.abs(num2);
}
leftScroll = (int) Math.abs(num2); //当前滑动位置距离左边整点刻度的距离
rightScroll = (int) (scaleGap - Math.abs(num2)); //当前滑动位置距离右边整点刻度的距离
float moveX2 = num2 <= scaleGap / 2 ? moveX - leftScroll : moveX + rightScroll; //最终计算出当前位置到整点刻度位置需要滑动的距离
if (valueAnimator != null && !valueAnimator.isRunning()) { //手指抬起，并且当前没有惯性滑动在进行，创建一个惯性滑动
valueAnimator = ValueAnimator.ofFloat(moveX, moveX2);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
moveX = (float) animation.getAnimatedValue(); //不断滑动去更新新的位置
lastMoveX = moveX;
invalidate();
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() { //增加一个监听，用来返回给使用者滑动结束后的最终结果刻度值
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
//这里是滑动结束时候回调给使用者的结果值
if (onChooseResulterListener != null) {
onChooseResulterListener.onEndResult(resultText);
}
}
});
valueAnimator.setDuration(300);
valueAnimator.start();
isUp = false;
}
num1 = (int) -(moveX / scaleGap); //重新计算当前滑动位置的整数以及小数位置
num2 = (moveX % scaleGap);
}
canvas.translate(num2, 0); //不加该偏移的话，滑动时刻度不会落在0~1之间只会落在整数上面,其实这个都能设置一种模式了，毕竟初衷就是指针不会落在小数上面
//这里是滑动时候不断回调给使用者的结果值
resultText = String.valueOf(new WeakReference<>(new BigDecimal((width / 2 - moveX) / (scaleGap * scaleCount))).get().setScale(1, BigDecimal.ROUND_HALF_UP).floatValue() + minScale);
if (onChooseResulterListener != null) {
onChooseResulterListener.onScrollResult(resultText); //接口不断回调给使用者结果值
}
//绘制当前屏幕可见刻度,不需要裁剪屏幕,while循环只会执行·屏幕宽度/刻度宽度·次,大部分的绘制都是if(curDis<width)这样子内存暂用相对来说会比较高。。
while (rulerRight < width) {
if (num1 % scaleCount == 0) { //绘制整点刻度以及文字
if ((moveX >= 0 && rulerRight < moveX - scaleGap) || width / 2 - rulerRight <= getWhichScalMovex(maxScale + 1) - moveX) {
//当滑动出范围的话，不绘制，去除左右边界
} else {
//绘制刻度，绘制刻度数字
canvas.drawLine(0, 0, 0, midScaleHeight, midScalePaint);
scaleNumPaint.getTextBounds(num1 / scaleGap + minScale + "", 0, (num1 / scaleGap + minScale + "").length(), scaleNumRect);
canvas.drawText(num1 / scaleCount + minScale + "", -scaleNumRect.width() / 2, lagScaleHeight +
(rulerHeight - lagScaleHeight) / 2 + scaleNumRect.height(), scaleNumPaint);
}
} else { //绘制小数刻度
if ((moveX >= 0 && rulerRight < moveX) || width / 2 - rulerRight < getWhichScalMovex(maxScale) - moveX) {
//当滑动出范围的话，不绘制，去除左右边界
} else {
//绘制小数刻度
canvas.drawLine(0, 0, 0, smallScaleHeight, smallScalePaint);
}
}
++num1; //刻度加1
rulerRight += scaleGap; //绘制屏幕的距离在原有基础上+1个刻度间距
canvas.translate(scaleGap, 0); //移动画布到下一个刻度
}
canvas.restore();
//绘制屏幕中间用来选中刻度的最大刻度
canvas.drawLine(width / 2, 0, width / 2, lagScaleHeight, lagScalePaint);
}
绘制结果
//绘制上面的结果 结果值+单位
private void drawResultText(Canvas canvas, String resultText) {
if (!showScaleResult) { //判断用户是否设置需要显示当前刻度值，如果否则取消绘制
return;
}
canvas.translate(0, -resultNumRect.height() - rulerToResultgap / 2); //移动画布到正确的位置来绘制结果值
resultNumPaint.getTextBounds(resultText, 0, resultText.length(), resultNumRect);
canvas.drawText(resultText, width / 2 - resultNumRect.width() / 2, resultNumRect.height(), //绘制当前刻度结果值
resultNumPaint);
resultNumRight = width / 2 + resultNumRect.width() / 2 + 10;
canvas.drawText(unit, resultNumRight, kgRect.height() + 2, kgPaint); //在当前刻度结果值的又面10px的位置绘制单位
}
处理滑动
主要是记录moveX，以及添加velocityTracker速度监听器，以及处理惯性滑动
@Override
public boolean onTouchEvent(MotionEvent event) {
currentX = event.getX();
isUp = false;
velocityTracker.computeCurrentVelocity(500);
velocityTracker.addMovement(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//按下时如果属性动画还没执行完,就终止,记录下当前按下点的位置
if (valueAnimator != null && valueAnimator.isRunning()) {
valueAnimator.end();
valueAnimator.cancel();
}
downX = event.getX();
break;
case MotionEvent.ACTION_MOVE:
//滑动时候,通过假设的滑动距离,做超出左边界以及右边界的限制。
moveX = currentX - downX + lastMoveX;
if (moveX >= width / 2) {
moveX = width / 2;
} else if (moveX <= getWhichScalMovex(maxScale)) {
moveX = getWhichScalMovex(maxScale);
}
break;
case MotionEvent.ACTION_UP:
//手指抬起时候制造惯性滑动
lastMoveX = moveX;
xVelocity = (int) velocityTracker.getXVelocity();
autoVelocityScroll(xVelocity);
velocityTracker.clear();
break;
}
invalidate();
return true;
}
处理惯性滑动的代码
这里就是调节了，根据得到的速率调节出比较舒服的滑动。。。
private void autoVelocityScroll(int xVelocity) {
//惯性滑动的代码,速率和滑动距离,以及滑动时间需要控制的很好,应该网上已经有关于这方面的算法了吧。。这里是经过N次测试调节出来的惯性滑动
if (Math.abs(xVelocity) < 50) {
isUp = true;
return;
}
if (valueAnimator.isRunning()) {
return;
}
valueAnimator = ValueAnimator.ofInt(0, xVelocity / 20).setDuration(Math.abs(xVelocity / 10));
valueAnimator.setInterpolator(new DecelerateInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
moveX += (int) animation.getAnimatedValue();
if (moveX >= width / 2) {
moveX = width / 2;
} else if (moveX <= getWhichScalMovex(maxScale)) {
moveX = getWhichScalMovex(maxScale);
}
lastMoveX = moveX;
invalidate();
}
});
valueAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
isUp = true;
invalidate();
}
});
valueAnimator.start();
}
供外部使用的获取结果值的接口
public interface OnChooseResulterListener {
void onEndResult(String result); //结束滑动时候返回的结果
void onScrollResult(String result); //滑动时不断产生的结果
}
最后再贴一下使用以及地址
compile ‘com.github.superSp:RulerView:v1.4’
扫一扫
2115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
