自定义控件 ——可拖动测量尺子

原创作者地址：http://blog.csdn.net/tl792814781/article/details/52388577

前言：

最近做的一个项目，有个界面是 输入框输入数值的，后来产品觉得键盘输入麻烦，就换成了这样子，这是前几天Ui小伙子设计的界面：

分析：

其实简单的画一个测量尺子刻度控件并不会太难，其次就是被5和10整除的刻度线高度加高一些；

在被5和10整除5的位置绘制刻度的值；

绘制不同刻度段定义显示的颜色；

控件边框，这里我可能选择的方式不怎么好（网上找的一个圆角控件），本来想直接用cardview的。

控件中间的指针，这是单独写的一个View，和尺子的view组合成了ViewGroup；

View的滑动，用到的知识点Scroller，View的scrollBy();

手指离开后的惯性滑动：VelocityTracker，这个是获取滑动的速度，配合Scroller.fling()

实现效果：

ScaleView:

1、绘制刻度

刻度可以向上或者向下绘制属性“ isShowUp”控制，刻度的数据可以使整型和浮点型 isIntegar,默认是整型数据

[java] view plain copy

1. // 画刻度  
2.    private void onDrawScale(Canvas canvas) {  
3.        float xScale, yScale;  
4.        mPaint.setColor(textColor);  
5.        int max = 0;  
6.        if (isIntegar) {  
7.            max = (int) (maxScale - minScale);  
8.        } else {  
9.            max = new BigDecimal(10).multiply(new BigDecimal(maxScale - minScale)).setScale(0, BigDecimal.ROUND_HALF_UP).intValue();  
10.        }  
11.        for (int i = 0; i <= max; i++) {  
12.            xScale = startX + scaleWidth * i;  
13.            //计算绘制整点数值 10 20 …… 1.0 2.0 ……  
14.            int valueTemp = isIntegar ? (int) (minScale + i) : (int) (minScale * 10) + i;  
15.   
16.            if (i == 0 || valueTemp % 10 == 0) {  
17.                yScale = scaleMaxHeight;  
18.                float value = isIntegar ? minScale + i : minScale + (float) i/10;  
19.                if(i==0){  
20.                    //当数据 i==0时，第一个数据不一定是整点的1.0(10) 可能是1.1(2,3,4)这样的，  
21.                    // 这里如果是1.1-1.5则显示，1.6-1.9不显示，会与2.0挨得太进  
22.                    valueTemp = valueTemp%10;  
23.                    if(valueTemp == 0)  
24.                        yScale = scaleMaxHeight;  
25.                    else if(valueTemp == 5){  
26.                        yScale = scaleMinHeight + 5;  
27.                    }else{  
28.                        yScale = scaleMinHeight;  
29.                    }  
30.                    if(valueTemp >= 0 && valueTemp < 6){  
31.                        //这里的文字y值要与其他的水平 因此传 scaleMaxHeight  
32.                        drawScaleValue(canvas, value, xScale, scaleMaxHeight);  
33.                    }  
34.                }else{  
35.                    drawScaleValue(canvas, value, xScale, yScale);  
36.                }  
37.            } else if (valueTemp % 5 == 0) {  
38.                yScale = scaleMinHeight + 5;  
39.            } else {  
40.                yScale = scaleMinHeight;  
41.            }  
42.            //上下刻度线  
43.            if(isShowUp)  
44.                canvas.drawLine(xScale, startY, xScale, yScale, mPaint);  
45.            else  
46.                canvas.drawLine(xScale, viewHigth, xScale, viewHigth - yScale, mPaint);  
47.   
48.        }  
49.   
50.    }  

2、滑动处理

拖动滑动：

[java] view plain copy

1. <pre name="code" class="java"> case MotionEvent.ACTION_DOWN:  
2.                 mScrollLastX = x;  
3.                 return true;  
4.             case MotionEvent.ACTION_MOVE:  
5.                 mCountScale = getScrollX();  
6.                 int dataX = mScrollLastX - x;  
7.                 scrollBy(dataX, 0);  
8.                 //smoothScrollBy(dataX,0);  
9.                 mScrollLastX = x;  
10.                 invalidate();  
11. return true;  

抬起后的惯性滑动：

[java] view plain copy

1. //使用mVelocityTracker来计算速度，  
2.                 //计算当前速度， 1代表px/毫秒, 1000代表px/秒,  
3.                 mVelocityTracker.computeCurrentVelocity(1000, mScaledMaximumFlingVelocity);  
4.                 int xVelocity = (int) mVelocityTracker.getXVelocity();  
5.                 mVelocityTracker.clear();  
6.   
7.                 if (Math.abs(xVelocity) > mScaledMinimumFlingVelocity) {  
8.                     mScroller.fling(getScrollX(), 0, -xVelocity, 0, minLeft, maxRight, 0, 0);//根据坐标轴正方向问题，这里需要加上-号  
9.                 }  

3、左右边界计算

整型和浮点型数据右边边距计算有所不同；

可滑动的右边边距最大刻度值减去最小刻度值乘以刻度间隔 + 第一个刻度开始的x坐标 - 控件的一半（这里因为最小的刻度 需要滑动到中间进行选择 ）

左边边距类似计算；

[java] view plain copy

1. if (isIntegar()) {  
2.             maxRight = (int) ((maxScale - minScale) * scaleWidth + startX - viewWidth / 2);  
3.         } else {  
4.             int max = new BigDecimal(10).multiply(new BigDecimal(maxScale - minScale)).setScale(0, BigDecimal.ROUND_HALF_UP).intValue();  
5.   
6.             maxRight = (max * scaleWidth + startX - viewWidth / 2);  
7.         }  
8.         minLeft = 0 - viewWidth / 2 + startX;  

PointerView

中间的这个指针view简单介绍下，无非就是几根线和两个小圆点，isShowUp属性可以设置上下指向，默认向下的。

组合在一起的ViewGroup

这个是直接继承的viewGroup；

1、宽高的测量：  斜边的高度（其实就是直角边 /斜边 = sin30°）

[java] view plain copy

1. //高度需要加上指针的高度 （height + 一个最大刻度高度 + 斜边的高度）  
2.        height = (int) (height + scaleMaxHeight + DrawUtils.getCoordinateY(30, scaleMaxHeight));  
3.   
4.        /** 
5.         * 如果是wrap_content设置为我们计算的值 
6.         * 否则：直接设置为父容器计算的值 
7.         */  
8.        setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth  
9.                : width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight  
10.                : height);  

2、子布局的位置摆放（指针在尺子的上面）

[java] view plain copy

1. @Override  
2.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
3.         //这里的话第一个childview是尺子 因此只需要设置宽度全屏 高度自适应(尺子)  
4.         int count = getChildCount();  
5.         int marginTop = (int) (scaleMaxHeight + DrawUtils.getCoordinateY(30, scaleMaxHeight));  
6.         for (int i = 0; i < count; i++) {  
7.             View childView = getChildAt(i);  
8.             if (i == 0) { //  
9.                 childView.layout(0, marginTop, childView.getMeasuredWidth(), childView.getMeasuredHeight() + marginTop);  
10.             }else if(i == 1){//指针  
11.                 int childWidth = childView.getMeasuredWidth();  
12.                 int childHeight = childView.getMeasuredHeight();  
13.                 childView.layout(getWidth()/2 - childWidth/2,cardViewPandding,getWidth()/2 + childWidth/2,childHeight + cardViewPandding);  
14.             }  
15.         }  
16.     }  

为了满足UI上的需要，最后拓展了一个上下选择的组合，详情见源码；

xml中使用

单独使用的时候所有属性都可以使用：

[java] view plain copy

1. <!--尺子属性-->  
2.    <declare-styleable name="ScaleScrollView">  
3.        <attr name="ScaleValueColor" format="color" />  
4.        <attr name="ScaleTextSize" format="dimension" />  
5.        <attr name="ScaleWidth" format="dimension" />  
6.        <attr name="ScaleMaxHeight" format="dimension" />  
7.        <attr name="MaxScale" format="float" />  
8.        <attr name="MinScale" format="float" />  
9.        <attr name="ScaleShowUp" format="boolean" />  
10.        <attr name="isIntegar" format="boolean" />  
11.    </declare-styleable>  

[html] view plain copy

1. <com.totcy.scalescrollview.HorizontalScaleScrollView  
2.         android:layout_width="match_parent"  
3.         android:layout_height="wrap_content"  
4.         xmlns:scale="http://schemas.android.com/apk/res-auto"  
5.         scale:ScaleTextSize= "14sp"  
6.         scale:MinScale= "20"  
7.         scale:MaxScale= "200"  
8.         >  
9.     </com.totcy.scalescrollview.HorizontalScaleScrollView>  
10.     <com.totcy.scalescrollview.HorizontalScaleScrollView  
11.         android:layout_width="match_parent"  
12.         android:layout_height="wrap_content"  
13.         xmlns:scale="http://schemas.android.com/apk/res-auto"  
14.         scale:ScaleTextSize= "14sp"  
15.         scale:MinScale= "1.1"  
16.         scale:MaxScale= "33.3"  
17.         scale:isIntegar= "false"  
18.         />  

代码中使用

[java] view plain copy

1. //整型数据测试  
2.     hsScale.setScrollListener(this);  
3.     //hsScale.setMinAndMaxScale(10,500);  
4.   
5.     //浮点型测试  
6.     hsScale2.setScrollListener(this);  
7.     //hsScale2.setIsIntegarl(false);  
8.    // hsScale2.setMinAndMaxScale(1.1f,33.3f);  
9.   
10.     //上下组合测试  
11.     mulScale.setScrollListener(this);  
12.     mulScale.setTopMinAndMaxScale(30,299);  
13.     mulScale.setBottomMinAndMaxScale(30,299);  
14. }  
15.   
16. @Override  
17. public void onScaleScroll(float scale) {  
18.     tv_scale2.setText("进度:" + scale);  
19. }  

总结

文中介绍的不是很全面，这个控件很多地方也写的不够好，对于自定义ViewGroup和View的滑动还在继续学习充能中，有需要的童鞋可以下载源码看看，里面有更好的实现方式也可以评论。THX ^-^!!!

源码下载->>>戳