自定义View之滚动刻度尺，2018/1/14 05

最新推荐文章于 2022-10-11 14:28:51 发布
最新推荐文章于 2022-10-11 14:28:51 发布
阅读量293 收藏
点赞数
分类专栏： Android 文章标签： 刻度尺 自定义view
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodingfarmerBin/article/details/79058114
版权

自定义刻度尺，通过Scroller实现的滚动效果，一般用于金额选择，样子为：
刻度尺
1，创建自定view，并在values文件下创建attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ScrollDividingRuleView">
        <attr name="line_height" format="dimension|reference" />
        <attr name="dividing_text_size" format="dimension|reference" />
    </declare-styleable>
</resources>

ScrollDividingRuleView为创建的自定义view 的名
line_height为刻度线的高度
dividing_text_size 刻度显示文字的大小
2，初始化获取view的属性

private void init(Context context, AttributeSet attrs) {
        for (int i = 0; i < attrs.getAttributeCount(); i++) {
            String name = attrs.getAttributeName(i);
            if ("layout_width".equals(name)) {
                String value = attrs.getAttributeValue(i);
                if (value.length() > 2) {
                    if (value.endsWith("dp")) {
                        mScaleWidth = Utils.dp2px(context, Float.valueOf(value.substring(0, value.length() - 2)));
                    } else {
                        mScaleWidth = Float.valueOf(value.substring(0, value.length() - 2));
                    }
                } else if (value.equals("-1") || value.equals("-2") || value.equals("0")) {
                    mScaleWidth = 0;
                }
            }else if ("line_height".equals(name)) {
                String value = attrs.getAttributeValue(i);
                if (value.length() > 2) {
                    if (value.endsWith("dp")) {
                        mLineHeight = Utils.dp2px(context, Float.valueOf(value.substring(0, value.length() - 2)));
                    } else {
                        mLineHeight = Float.valueOf(value.substring(0, value.length() - 2));
                    }
                } else {
                    mLineHeight = 50;
                }
            } else if ("dividing_text_size".equals(name)) {
                String value = attrs.getAttributeValue(i);
                if (value.length() > 2) {
                    if (value.endsWith("sp")) {
                        mTextSize = Utils.sp2px(context, Float.valueOf(value.substring(0, value.length() - 2)));
                    } else {
                        mTextSize = Float.valueOf(value.substring(0, value.length() - 2));
                    }
                } else {
                    mTextSize = 32;
                }
            }
        }
        // 画笔
        mPaint = new Paint();
        //总的高度，因为text的高度和设置的textSize会有误差所以加上20的高度
        mRectHeight = (int) (mLineHeight +mTextSize+mTextLineMargin+20);
        //初始设置每个刻度间距为30px
        mScaleMargin = 30;
        mTextList = new ArrayList<>();
        //计算宽度
        mScaleWidth = (mTextList.size() * 5 - 5) * mScaleMargin;
        mScroller = new Scroller(context);
        mVelocityTracker = VelocityTracker.obtain();
    }

其中VelocityTracker类是为了计算滚动速度，VelocityTracke具体介绍参见Android 官方文档VelocityTracke链接
3，重写onMeasure,onDraw方法

@Override
    protected void onDraw(Canvas canvas) {
        mPaint.setColor(Color.GRAY);
        // 抗锯齿
        mPaint.setAntiAlias(true);
        // 设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
        mPaint.setDither(true);
        // 空心
        mPaint.setStyle(Paint.Style.STROKE);
        // 文字居中
        mPaint.setTextAlign(Paint.Align.CENTER);
        onDrawScale(canvas, mPaint); //画刻度
        onDrawLine(canvas, mPaint);//画刻度中间横线
        onDrawCenter(canvas, mPaint);//画中心远点
        super.onDraw(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int height = View.MeasureSpec.makeMeasureSpec(mRectHeight, View.MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, height);
        //view宽度
        mScaleRange = getMeasuredWidth();
        //初始化开始位置
        mInitDistance = mScaleRange / 2-mInitPosition*mScaleMargin*5;
    }

    private void onDrawScale(Canvas canvas, Paint paint) {
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(2);
        paint.setTextSize(mTextSize);
        for (int i = 0, k = 0; i < mTextList.size() * 5 - 4; i++) {
            if (i % 5 == 0) { //整值
                canvas.drawLine(i * mScaleMargin + mInitDistance, mRectHeight, i * mScaleMargin + mInitDistance, mRectHeight - mLineHeight, paint);
                //整值文字
                canvas.drawText(mTextList.get(k), i * mScaleMargin + mInitDistance, mRectHeight -mLineHeight-mTextLineMargin, paint);
                k++;
            } else {
                canvas.drawLine(i * mScaleMargin + mInitDistance, mRectHeight - mLineHeight / 4, i * mScaleMargin + mInitDistance, mRectHeight - mLineHeight + mLineHeight / 4, paint);
            }
        }
    }

    private void onDrawLine(Canvas canvas, Paint paint) {
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(2);
        canvas.drawLine(mInitDistance, mRectHeight - mLineHeight / 2, mScaleWidth + mInitDistance, mRectHeight - mLineHeight / 2, paint);
    }


    private void onDrawCenter(Canvas canvas, Paint paint) {
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(6);
        for (int i = 0; i < mTextList.size() * 5 - 4; i++) {
            if (i % 5 == 0) { //整值
                canvas.drawCircle(i * mScaleMargin + mInitDistance, mRectHeight-mLineHeight/2, 4, paint);
            }
        }
    }

mInitDistance 是为了计算中间点显示初始化中间点为哪个位置
4，处理触摸事件
这里就涉及到了一些计算，当手指抬起如果为快速滑动则滑动到开始或者结尾，慢速滑动则会滚动到比较近的主刻度，如果滑动超过也会回到起点或者重点

@Override
    public boolean onTouchEvent(MotionEvent event) {
        mVelocityTracker.addMovement(event);
        int x = (int) event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (mScroller != null && !mScroller.isFinished()) {
                    mScroller.abortAnimation();
                }
                mScrollLastX = x;
                mStartX = x;
                return true;
            case MotionEvent.ACTION_MOVE:
                mVelocityTracker.computeCurrentVelocity(1000);
                int dataX = mScrollLastX - x;
                smoothScrollBy(dataX, 0);
                mScrollLastX = x;
                return true;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                int moveX = mStartX - x;
                //如果快速滑动则滚动到滑动方向结尾的位置
                if(Math.abs(mVelocityTracker.getXVelocity())>4000) {
                    if(moveX>0) {
                        mListener.onScaleScrollChanged(mTextList.size()-1);
                        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), (int) (mScaleWidth - mScaleRange / 2 + mInitDistance)-mScroller.getFinalX(), 0, 800);
                    }else{
                        mListener.onScaleScrollChanged(0);
                        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), -mScaleRange / 2 + mInitDistance-mScroller.getFinalX(), 0, 800);
                    }
                }else {
                    dealActionUp(moveX);
                }
                return true;
        }
        return super.onTouchEvent(event);
    }

    /**
     * 处理手势抬起之后的操作
     */
    private void dealActionUp(int moveX) {
        int finalX = mScroller.getFinalX();//当前位置
        //计算获取手指抬起之后要回到的位置
        if (moveX >= 0 && finalX > mScaleWidth - mScaleRange / 2 + mInitDistance) {
            finalX = (int) (mScaleWidth - mScaleRange / 2 + mInitDistance);
        } else if (moveX <= 0 && finalX <= -mScaleRange / 2 + mInitDistance) {
            finalX = -mScaleRange / 2 + mInitDistance;
        } else {
            int round = Math.abs(Math.round((float) finalX / mScaleMargin));
            if (round % 5 > 2) {
                if(finalX>0) {
                    if (finalX / mScaleMargin < round) {
                        finalX = finalX + (5 - round % 5) * mScaleMargin - finalX % mScaleMargin + mScaleMargin;
                    } else {
                        finalX = finalX + (5 - round % 5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }else{
                    if (finalX / mScaleMargin > -round) {
                        finalX = finalX + ( round % 5-5) * mScaleMargin - finalX % mScaleMargin - mScaleMargin;
                    } else {
                        finalX = finalX + (round % 5-5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }
            } else {
                if(finalX>0) {
                    if (finalX / mScaleMargin < round) {
                        finalX = finalX - (round % 5) * mScaleMargin + (mScaleMargin - finalX % mScaleMargin);
                    } else {
                        finalX = finalX - (round % 5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }else{
                    if (finalX / mScaleMargin > -round) {
                        finalX = finalX - (-round % 5) * mScaleMargin - finalX % mScaleMargin-mScaleMargin;
                    } else {
                        finalX = finalX - (-round % 5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }
            }
        }
        mListener.onScaleScrollChanged(finalX/ mScaleMargin / 5+mInitPosition);//返回滚动选中的位置
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), finalX - mScroller.getFinalX(), 0, 800);//纠正指针位置
        postInvalidate();
    }

    /**
     * 处理手势抬起之后的操作
     */
    private void dealActionUp(int moveX) {
        int finalX = mScroller.getFinalX();//当前位置
        //计算获取手指抬起之后要回到的位置
        if (moveX >= 0 && finalX > mScaleWidth - mScaleRange / 2 + mInitDistance) {
            finalX = (int) (mScaleWidth - mScaleRange / 2 + mInitDistance);
        } else if (moveX <= 0 && finalX <= -mScaleRange / 2 + mInitDistance) {
            finalX = -mScaleRange / 2 + mInitDistance;
        } else {
            int round = Math.abs(Math.round((float) finalX / mScaleMargin));
            if (round % 5 > 2) {
                if(finalX>0) {
                    if (finalX / mScaleMargin < round) {
                        finalX = finalX + (5 - round % 5) * mScaleMargin - finalX % mScaleMargin + mScaleMargin;
                    } else {
                        finalX = finalX + (5 - round % 5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }else{
                    if (finalX / mScaleMargin > -round) {
                        finalX = finalX + ( round % 5-5) * mScaleMargin - finalX % mScaleMargin - mScaleMargin;
                    } else {
                        finalX = finalX + (round % 5-5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }
            } else {
                if(finalX>0) {
                    if (finalX / mScaleMargin < round) {
                        finalX = finalX - (round % 5) * mScaleMargin + (mScaleMargin - finalX % mScaleMargin);
                    } else {
                        finalX = finalX - (round % 5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }else{
                    if (finalX / mScaleMargin > -round) {
                        finalX = finalX - (-round % 5) * mScaleMargin - finalX % mScaleMargin-mScaleMargin;
                    } else {
                        finalX = finalX - (-round % 5) * mScaleMargin - finalX % mScaleMargin;
                    }
                }
            }
        }
        mListener.onScaleScrollChanged(finalX/ mScaleMargin / 5+mInitPosition);//返回滚动选中的位置
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), finalX - mScroller.getFinalX(), 0, 800);//纠正指针位置
        postInvalidate();
    }

    private void smoothScrollBy(int dx, int dy) {
        mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy);
        postInvalidate();
    }

5，传值回调方法
使用Scroller 必须实现的方法

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), 0);
            postInvalidate();
        }
    }
 public interface OnScrollListener {
        void onScaleScrollChanged(int scale);
    }

    /**
     * 初始化数据
     * @param textList 刻度尺显示文字
     * @param initPosition 初始位置
     * @param listener 滚动监听
     */
    public void bindDataAndListener(ArrayList<String> textList,int initPosition,OnScrollListener listener){
        mInitPosition=initPosition;
        mTextList = textList;
        mScaleWidth = (mTextList.size() * 5 - 5) * mScaleMargin;
        mListener=listener;
    }

    /**
     * 设置每个刻度间距
     * @param margin 间距
     * @return 返回当前view 链式编程
     */
    public ScrollDividingRuleView setScaleMargin(int margin){
        mScaleMargin=margin;
        mRectHeight = (int) (mLineHeight +mTextSize+mTextLineMargin+20);
        return this;
    }

    /**
     * 设置文字和刻度线的间距
     */
    public ScrollDividingRuleView setTextLineMargin(int textLineMargin){
        mTextLineMargin=textLineMargin;
        mRectHeight = (int) (mLineHeight +mTextSize+mTextLineMargin+20);
        return this;
    }

最后附上github 上的地址ScrollDividingRule

Alien28
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义view---滚动的刻度尺（三）
evn512457的专栏
08-26 2188
scrollview+ 里linearlayout 使用addview方法添加小view shoushi
Android自定义View(三) Scroller与平滑滚动
mChenys的博客
01-24 4086
目录一、什么是Scroller二、认识scrollTo和scrollBy方法2.1 scrollTo、scrollBy对View内容的影响2.2.1 思考为什么移动负数距离会向坐标正方向移动?2.2 scrollTo、scrollBy对布局容器的影响三、Scroller类3.1 相关方法介绍3.2 scroller的基本使用3.3 平滑滚动的工作原理四、案例-触摸滑屏4.1 触摸滑屏技术分析4.2 速度追踪器VelocityTracker4.3 触摸滑屏的分步实现 一、什么是Scroller Scrolle
自定义view之无限滚动的刻度尺
Alien28的博客
06-03 1133
具体思路是把一个view分成三段，当总长度&amp;amp;amp;gt;=40个刻度向左滚动，滚动到2/3的时候view移动到1/3出然后刷新显示的刻度这时为第一页，一次更新页数，当向右滚动的时候滚动且不为第一页则每滚动到1/3处view移动到2/3处。之后在添加一些首页和最后一页的判断。 这一次除了无限滚动还比我上一次写的多了手指滑动速度的判断，去掉了滚动结束自动归位到对应刻度的效果，代码中除了极端情况默认...
自定义view实战(4)：安卓滚动选择控件
silencefly的博客
10-11 1491
自定义view实战(4)：通过安卓滚动选择控件学习onDraw的使用，并且了解下在XML自定义控件参数。
自定义view-----滚动的刻度尺(二)
evn512457的专栏
08-26 3839
滚动的刻度尺其实很想WheelView
Android自定义控件之刻度尺控件
01-03
今天我做的是一个自定义刻度尺控件，由于项目需求需要使用刻度尺那样滑动选择，由于对自定义控件的认识还不够深入，于是花了一周多时间才把这个控件给整出来，也是呕心沥血的经历啊，也让我对自定义控件有了自己的...
Android 自定义View实现环形带刻度的进度条
06-19
详情请查看博客:https://blog.csdn.net/qq_20785431/article/details/80740421
Android自定义View实例：深度剖析 水晶/水滴 波浪球 实现步骤详解
03-25
1：水晶（水滴），波浪球实现步骤详解 2：自定义View 最佳实现实例 3：波浪线绘制原理
Android实现自定义滑动刻度尺方法示例
01-20
自定义View实现跟随手指滚动的刻度尺，实现了类似SeekBar的滑动选中效果。项目地址，欢迎star！ UI图： 功能： 通过设置最小值跟最大值的范围，以及offset值。View将根据这些数据去计算出需要几个小刻度和几个长...
Android实现滚动刻度尺效果
01-20
个人觉得该方式太不灵活，且对美工的依赖较大，于是便想自定义一个刻度尺控件。 需求分析 绘制刻度，区分整值刻度和普通刻度 红色指针始终在刻度尺的中间，表示当前的刻度 刻度的最大值和最小值可动态设置 刻度...
ruler:微信小程序中的刻度尺功能
05-08
ruler 微信小程序中的刻度尺功能<br> 下载文件到本地 放到pages中 配置好路由 即可查看 基于scroll-view 官方文档中不让在scroll-view 使用canvas 目前没有其他解决方案 也没有大的bug 关于刻度尺中间的游标  在手机上显示是在刻度尺下面的  如果产品需要  可以使用canvas去画这个圆点有不足的地方 欢迎指正 邮箱 [email protected] 微信 lywsion :copyright:开源精神 如需要 请注明作者 谢谢
带有滚动条的自定义view
09-11
在android，自己定义的view继承系统的View的时候，是不会出现滚动条的。 所以需要自己添加滚动条
微信小程序实现带刻度尺滑块功能
08-31
主要介绍了微信小程序实现带刻度尺滑块功能，非常不错，具有参考借鉴价值，需要的朋友可以参考下
自定义View----滑动刻度尺与流式布局 实例（四）
weixin_34309543的博客
04-06 130
2019独角兽企业重金招聘Python工程师标准>>> ...
自定义view---滚动的刻度尺（一）
evn512457的专栏
08-26 2852
自定义view入门了很久了 danshi
微信小程序 scroll-view的滚动条设置
热门推荐
鎏嫣宫守护的博客
04-16 5万+
小程序的scroll-view用的比较多了，列表页一般也没管它的滚动条，最近突然发现在android与ios中横向滑动的时候表现不一样。不一样在哪呢，ios上直接就不显示啊，也是没谁了。深入想了一下，这滚动条能不能换一颜色或者换个样式。有这冲动就立马着手改。1。直接打开官方demo，仔细看了一遍官方文档，没有任何说明，这是官方文档的一贯作风。没有一个属性是去控制显示/隐藏滚动条，更别说这样式。所以...
微信小程序实现带刻度尺滑块
weixin_34007906的博客
03-23 1922
2019独角兽企业重金招聘Python工程师标准>>> ...
android 带刻度的滑动条_Android自定义控件尺子 滚动刻度尺
weixin_33365244的博客
12-23 464
自定义控件是件很有乐趣的事，慢慢的会爱上它，哈哈哈。废话不多说先上设计图 接下来我们我们要先分析一下页面中需要到哪些东西1.一条无限长的底线；2.一根在屏幕中间的红色标记线，代表当前位置；3.一个半透明的蓝色背景，改背景超过部分才会被展现；4.刻度 整数高一点刻度 非整第一点的刻度5.一个大刻度上都会标的数值6.滚动接下来进入正题，让我们开始绘制：首先我们先给控件定义它的属性，根据刚才的分析我给...
Android 自定义View 让内容跟随手指滚动
mxw3755的专栏
05-25 2430
需求： 自定义一个View，当Canvas绘制的内容超过当前屏幕，希望能够通过手指触摸屏幕的方法移动画布的内容。 实现思路： 通过View的OnTouchEvent方法可以监听当前手指的位置，可以计算出滑动的距离，当前速度。通过View的scrollTo、scrollBy方法可以直接将画图移动到目标位置。如果想要手指离开后画布根据瞬时速度继续滑行的效果，可以用Scroller的fli
安卓自定义view刻度尺
最新发布
03-27
安卓自定义view刻度尺的实现步骤如下： 1. 创建一个自定义view类，继承自View。 2. 在onDraw方法中绘制刻度尺的背景和刻度线。 3. 在onMeasure方法中设置View的尺寸，以适应不同的屏幕大小。 4. 在onTouchEvent...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值