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

Posted 2023-02-25 小向往

前言：

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

分析：

其实简单的画一个测量尺子刻度控件并不会太难，其次就是被5和10整除的刻度线高度加高一些； 在被5和10整除5的位置绘制刻度的值； 绘制不同刻度段定义显示的颜色； 控件边框，这里我可能选择的方式不怎么好（网上找的一个圆角控件），本来想直接用cardview的。 控件中间的指针，这是单独写的一个View，和尺子的view组合成了ViewGroup； View的滑动，用到的知识点Scroller，View的scrollBy(); 手指离开后的惯性滑动：VelocityTracker，这个是获取滑动的速度，配合Scroller.fling()

实现效果：

ScaleView:

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

 // 画刻度
    private void onDrawScale(Canvas canvas) 
        float xScale, yScale;
        mPaint.setColor(textColor);
        int max = 0;
        if (isIntegar) 
            max = (int) (maxScale - minScale);
         else 
            max = new BigDecimal(10).multiply(new BigDecimal(maxScale - minScale)).setScale(0, BigDecimal.ROUND_HALF_UP).intValue();
        
        for (int i = 0; i <= max; i++) 
            xScale = startX + scaleWidth * i;
            //计算绘制整点数值 10 20 …… 1.0 2.0 ……
            int valueTemp = isIntegar ? (int) (minScale + i) : (int) (minScale * 10) + i;

            if (i == 0 || valueTemp % 10 == 0) 
                yScale = scaleMaxHeight;
                float value = isIntegar ? minScale + i : minScale + (float) i/10;
                if(i==0)
                    //当数据 i==0时，第一个数据不一定是整点的1.0(10) 可能是1.1(2,3,4)这样的，
                    // 这里如果是1.1-1.5则显示，1.6-1.9不显示，会与2.0挨得太进
                    valueTemp = valueTemp%10;
                    if(valueTemp == 0)
                        yScale = scaleMaxHeight;
                    else if(valueTemp == 5)
                        yScale = scaleMinHeight + 5;
                    else
                        yScale = scaleMinHeight;
                    
                    if(valueTemp >= 0 && valueTemp < 6)
                        //这里的文字y值要与其他的水平 因此传 scaleMaxHeight
                        drawScaleValue(canvas, value, xScale, scaleMaxHeight);
                    
                else
                    drawScaleValue(canvas, value, xScale, yScale);
                
             else if (valueTemp % 5 == 0) 
                yScale = scaleMinHeight + 5;
             else 
                yScale = scaleMinHeight;
            
            //上下刻度线
            if(isShowUp)
                canvas.drawLine(xScale, startY, xScale, yScale, mPaint);
            else
                canvas.drawLine(xScale, viewHigth, xScale, viewHigth - yScale, mPaint);

        

    

2、滑动处理 拖动滑动：

<pre name="code" class="java"> case MotionEvent.ACTION_DOWN:
                mScrollLastX = x;
                return true;
            case MotionEvent.ACTION_MOVE:
                mCountScale = getScrollX();
                int dataX = mScrollLastX - x;
                scrollBy(dataX, 0);
                //smoothScrollBy(dataX,0);
                mScrollLastX = x;
                invalidate();
return true;

抬起后的惯性滑动：

//使用mVelocityTracker来计算速度，
                //计算当前速度， 1代表px/毫秒, 1000代表px/秒,
                mVelocityTracker.computeCurrentVelocity(1000, mScaledMaximumFlingVelocity);
                int xVelocity = (int) mVelocityTracker.getXVelocity();
                mVelocityTracker.clear();

                if (Math.abs(xVelocity) > mScaledMinimumFlingVelocity) 
                    mScroller.fling(getScrollX(), 0, -xVelocity, 0, minLeft, maxRight, 0, 0);//根据坐标轴正方向问题，这里需要加上-号
                

3、左右边界计算 整型和浮点型数据右边边距计算有所不同； 可滑动的右边边距最大刻度值减去最小刻度值乘以刻度间隔 + 第一个刻度开始的x坐标 - 控件的一半（这里因为最小的刻度 需要滑动到中间进行选择 ） 左边边距类似计算；

if (isIntegar()) 
            maxRight = (int) ((maxScale - minScale) * scaleWidth + startX - viewWidth / 2);
         else 
            int max = new BigDecimal(10).multiply(new BigDecimal(maxScale - minScale)).setScale(0, BigDecimal.ROUND_HALF_UP).intValue();

            maxRight = (max * scaleWidth + startX - viewWidth / 2);
        
        minLeft = 0 - viewWidth / 2 + startX;

PointerView

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

组合在一起的ViewGroup

这个是直接继承的viewGroup； 1、宽高的测量：  斜边的高度（其实就是直角边 /斜边 = sin30°）

 //高度需要加上指针的高度 （height + 一个最大刻度高度 + 斜边的高度）
        height = (int) (height + scaleMaxHeight + DrawUtils.getCoordinateY(30, scaleMaxHeight));

        /**
         * 如果是wrap_content设置为我们计算的值
         * 否则：直接设置为父容器计算的值
         */
        setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth
                : width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
                : height);

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

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

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

xml中使用

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

 <!--尺子属性-->
    <declare-styleable name="ScaleScrollView">
        <attr name="ScaleValueColor" format="color" />
        <attr name="ScaleTextSize" format="dimension" />
        <attr name="ScaleWidth" format="dimension" />
        <attr name="ScaleMaxHeight" format="dimension" />
        <attr name="MaxScale" format="float" />
        <attr name="MinScale" format="float" />
        <attr name="ScaleShowUp" format="boolean" />
        <attr name="isIntegar" format="boolean" />
    </declare-styleable>

<com.totcy.scalescrollview.HorizontalScaleScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:scale="http://schemas.android.com/apk/res-auto"
        scale:ScaleTextSize= "14sp"
        scale:MinScale= "20"
        scale:MaxScale= "200"
        >
    </com.totcy.scalescrollview.HorizontalScaleScrollView>
    <com.totcy.scalescrollview.HorizontalScaleScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:scale="http://schemas.android.com/apk/res-auto"
        scale:ScaleTextSize= "14sp"
        scale:MinScale= "1.1"
        scale:MaxScale= "33.3"
        scale:isIntegar= "false"
        />

代码中使用

    //整型数据测试
        hsScale.setScrollListener(this);
        //hsScale.setMinAndMaxScale(10,500);

        //浮点型测试
        hsScale2.setScrollListener(this);
        //hsScale2.setIsIntegarl(false);
       // hsScale2.setMinAndMaxScale(1.1f,33.3f);

        //上下组合测试
        mulScale.setScrollListener(this);
        mulScale.setTopMinAndMaxScale(30,299);
        mulScale.setBottomMinAndMaxScale(30,299);
    

    @Override
    public void onScaleScroll(float scale) 
        tv_scale2.setText("进度:" + scale);
    

总结

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