android 自定义范围选取控件CustomRangeSeekBar

最新推荐文章于 2024-04-24 09:55:49 发布
最新推荐文章于 2024-04-24 09:55:49 发布
阅读量805 收藏
点赞数
文章标签： 移动开发
原文链接：https://juejin.im/post/5a334141f265da43062acf77
版权

最近在做一款音乐剪切小工具， 需要用到一个范围选取的控件。没有合适的系统控件只能自定义一个。

效果图：

源码：

https://github.com/zyl409214686/CustomRangeSeekBar

实现思路

  1. 构造方法中初始化paint以及自定义属性等其他参数。
  2. 重写onMeasure方法确定view大小。
  3. 重写onSizeChanged 方法初始化进度条rectF类对象。
  4. 重写onDraw方法绘画出进度以及滑块和进度文字并将需要改变的参数改为变量。
  5. 重写onTouchEvent处理检测点击滑块，以及相应的滑块的滑动和触发重绘等。

实现过程

1)初始化自定义属性以及需要的各个参数。

 public CustomRangeSeekBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.CustomRangeSeekBar, 0, 0);
        this.mAbsoluteMinValue = new Float(a.getFloat(R.styleable.CustomRangeSeekBar_absoluteMin, (float) 0.0));
        this.mAbsoluteMaxValue = new Float(a.getFloat(R.styleable.CustomRangeSeekBar_absolutemMax, (float) 100.0));
        mThumbImage = BitmapFactory.decodeResource(getResources(), a.getResourceId(R.styleable.CustomRangeSeekBar_thumbImage, R.mipmap.btn_seekbar_normal));
        mProgressBarBg = BitmapFactory.decodeResource(getResources(), a.getResourceId(R.styleable.CustomRangeSeekBar_progressBarBg, R.mipmap.seekbar_bg));
        mProgressBarSelBg = BitmapFactory.decodeResource(getResources(), a.getResourceId(R.styleable.CustomRangeSeekBar_progressBarSelBg, R.mipmap.seekbar_sel_bg));
        mBetweenAbsoluteValue = a.getFloat(R.styleable.CustomRangeSeekBar_betweenAbsoluteValue, 0);
        mProgressTextFormat = a.getInt(R.styleable.CustomRangeSeekBar_progressTextFormat, HINT_FORMAT_NUMBER);
        mWordSize = a.getDimension(R.styleable.CustomRangeSeekBar_progressTextSize, 16);
        mPaint.setTextSize(mWordSize);
        mThumbWidth = mThumbImage.getWidth();
        mThumbHalfWidth = 0.5f * mThumbWidth;
        mThumbHalfHeight = 0.5f * mThumbImage.getHeight();
        mProgressBarHeight = 0.3f * mThumbHalfHeight;
        mWidthPadding = mThumbHalfHeight;
        Paint.FontMetrics metrics = mPaint.getFontMetrics();
        mWordHeight = (int) (metrics.descent - metrics.ascent);
        setPercentMinValue(0.0);
        setPercentMaxValue(100.0);
        a.recycle();
    }
复制代码

2)重写onSizeChanged（）方法中初始化进度条以及进度条被选中状态的矩形区域。

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mProgressBarRect = new RectF(mWidthPadding, mWordHeight + 0.5f * (h - mWordHeight - mProgressBarHeight),
                w - mWidthPadding, mWordHeight + 0.5f*(h - mWordHeight + mProgressBarHeight));
        mProgressBarSelRect = new RectF(mProgressBarRect);
    }
复制代码

3)重写onMeasure方法，设置view宽高。 View高度 = 滑块高度+进度文字高度。

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MIN_WIDTH; if (MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(widthMeasureSpec)) { width = MeasureSpec.getSize(widthMeasureSpec); } int height = mThumbImage.getHeight() + mWordHeight; if (MeasureSpec.UNSPECIFIED != MeasureSpec.getMode(heightMeasureSpec)) { height = Math.min(height, MeasureSpec.getSize(heightMeasureSpec)); } setMeasuredDimension(width, height); }

4)重写onDraw() 绘制进度、被选中范围进度、两个滑块以及两个滑块对应的进度文字。

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // draw seek bar background line
        mPaint.setStyle(Style.FILL);
        canvas.drawBitmap(mProgressBarBg, null, mProgressBarRect, mPaint);
        // draw seek bar active range line
        mProgressBarSelRect.left = percentToScreen(mPercentMinValue);
        mProgressBarSelRect.right = percentToScreen(mPercentMaxValue);
        //canvas.drawBitmap(mProgressBarSelBg, mWidthPadding, 0.5f * (getHeight() - mProgressBarHeight), mPaint);
        canvas.drawBitmap(mProgressBarSelBg, null, mProgressBarSelRect, mPaint);
        // draw minimum thumb
        drawThumb(percentToScreen(mPercentMinValue), Thumb.MIN.equals(mPressedThumb), canvas);
        // draw maximum thumb
        drawThumb(percentToScreen(mPercentMaxValue), Thumb.MAX.equals(mPressedThumb), canvas);
        mPaint.setColor(Color.rgb(255, 165, 0));
//        mPaint.setTextSize(DensityUtils.dp2px(getContext(), 16));
        drawThumbMinText(percentToScreen(mPercentMinValue), getSelectedAbsoluteMinValue(), canvas);
        drawThumbMaxText(percentToScreen(mPercentMaxValue), getSelectedAbsoluteMaxValue(), canvas);
    }
复制代码

5)重写onTouchEvent ()

@Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!mIsEnable)
            return true;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPressedThumb = evalPressedThumb(event.getX());
                if (Thumb.MIN.equals(mPressedThumb)) {
                    if (mThumbListener != null)
                        mThumbListener.onClickMinThumb(getSelectedAbsoluteMaxValue(), getSelectedAbsoluteMinValue());
                }
                if (Thumb.MAX.equals(mPressedThumb)) {
                    if (mThumbListener != null)
                        mThumbListener.onClickMaxThumb();
                }
                invalidate();
                //Intercept parent TouchEvent
                if (getParent() != null) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (mPressedThumb != null) {
                    float eventX = event.getX();
                    float maxValue = percentToAbsoluteValue(mPercentMaxValue);
                    float minValue = percentToAbsoluteValue(mPercentMinValue);
                    float eventValue = percentToAbsoluteValue(screenToPercent(eventX));
                    if (Thumb.MIN.equals(mPressedThumb)) {
                        minValue = eventValue;
                        if (mBetweenAbsoluteValue>0 && maxValue - minValue <= mBetweenAbsoluteValue)
                            minValue = new Float((maxValue - mBetweenAbsoluteValue));
                        setPercentMinValue(absoluteValueToPercent(minValue));//Notice01
                        if (mThumbListener != null)
                            mThumbListener.onMinMove(getSelectedAbsoluteMaxValue(), getSelectedAbsoluteMinValue()); 
                    } else if (Thumb.MAX.equals(mPressedThumb)) {
                        maxValue = eventValue;
                        if (mBetweenAbsoluteValue>0 && maxValue - minValue <= mBetweenAbsoluteValue)
                            maxValue = new Float(minValue + mBetweenAbsoluteValue);
setPercentMaxValue(absoluteValueToPercent(maxValue));
                        if (mThumbListener != null)
                            mThumbListener.onMaxMove(getSelectedAbsoluteMaxValue(), getSelectedAbsoluteMinValue());
                    }
                }
                //Intercept parent TouchEvent
                if (getParent() != null) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }
                break;
            case MotionEvent.ACTION_UP:
                if (Thumb.MIN.equals(mPressedThumb)) {
                    if (mThumbListener != null)
                        mThumbListener.onUpMinThumb(getSelectedAbsoluteMaxValue(), getSelectedAbsoluteMinValue());
                }
                if (Thumb.MAX.equals(mPressedThumb)) {
                    if (mThumbListener != null)
                        mThumbListener.onUpMaxThumb();
                }
                //Intercept parent TouchEvent
                if (getParent() != null) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }
                break;
            case MotionEvent.ACTION_CANCEL:
                if (Thumb.MIN.equals(mPressedThumb)) {
                    if (mThumbListener != null)
                        mThumbListener.onUpMinThumb(getSelectedAbsoluteMaxValue(), getSelectedAbsoluteMinValue());
                }
                if (Thumb.MAX.equals(mPressedThumb)) {
                    if (mThumbListener != null)
                        mThumbListener.onUpMaxThumb();
                }
                mPressedThumb = null;
                //Intercept parent TouchEvent
                if (getParent() != null) {
                    getParent().requestDisallowInterceptTouchEvent(true);
                }
                break;
        }
        return true;
    }
复制代码

evalPressedThumb()方法为检测事件源是否为滑块（左or右or不在滑块上）。其他还要一些转换的方法percentToAbsoluteValue为进度条比例值转换为具体值、 percentToAbsoluteValue为进度条的比例值转换到具体值、screenToPercent为view中具体像素转换为进度中的进度条的比例值。 滑动事件处理逻辑，当检测到滑动的为min滑块（左测滑块）时，看注释Notice01 代码 setPercentMinValue(absoluteValueToPercent(minValue)); 将绝对值转换为进度条比例，然后设置进去，看此方法。

    public void setPercentMinValue(double value) {
        mPercentMinValue = Math.max(0d, Math.min(1d, Math.min(value, mPercentMaxValue)));
        invalidate();
    }
复制代码

将比例值设置进去并调用了重绘，其他逻辑都大同小异，具体可以看上面留的github源码。

注意事项

事件处理的结尾需要增加对父容器view拦截的阻止。getParent().requestDisallowInterceptTouchEvent(true);不然滑动过程事件被父容器拦截而出现滑动不顺畅的情况。 `

weixin_33775582
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android日期选择区间控件_自定义日历(四)-区间选择控件
weixin_39632212的博客
12-30 1106
一、概述很早很早以前，写过几篇关于日历的文章，不同于Qt原生的控件，这些控件都是博主使用自绘的方式进行完成，因此可定制性更强一些，感兴趣的可以参考自定义日历(一)、自定义日历(二)和自定义日历(三))。本篇文章还是继续来写我们的日历控件，仍然采用自绘的方式，带来更加炫酷的效果。看本文的标题就应该就能明白，这次实现的是一个可以区间选择的日历控件。二、效果展示效果图如下，一个简单的效果展示。日历控件与...
Android仿大众点评样式的范围选择条
06-10
Android模仿大众点评选择样式的选择条功能实现
Android RangeSeekBarView 选定范围值的控件
weixin_34127717的博客
01-31 417
自定义实现了一个选定范围值的控件，刻度尺为等分的100等分。模仿二手车app中筛选选定区间的控件。 实现效果： 首先将这个控件分成四部分，位置标记，刻度，尺子，游标。 一，测量子控件的尺度，继承onMeasure().由子空间的尺寸来确定控件的尺寸。 [java]view plaincopy @O...
【Android】可自定义样式的定值范围选择控件ShinnRangeSeekBar
06-12
博客地址：https://blog.csdn.net/weixin_43277878/article/details/91379795
推荐一款创新的Android组件：RangeSeekBar
最新发布
gitblog_00016的博客
04-24 299
推荐一款创新的Android组件：RangeSeekBar 项目地址:https://gitcode.com/Brioal/RangeSeekBar 在Android开发中，选择范围值经常是一个常见的需求，而RangeSeekBar是一个强大的开源库，专为此目的设计。它提供了一个美观、可定制化的滑块，允许用户在给定的范围内选择两个值。下面，我们将深入了解其技术特性、用途及优势。 项目简介 Rang...
android日期选择区间控件_Android日期时间选择器实现以及自定义大小
weixin_28809701的博客
01-15 738
本文主要讲两个内容：1.如何将DatePicker和TimePicker放在一个dialog里面；2.改变他们的宽度；问题1：其实现思路就是自定义一个Dialog，然后往里面同时放入DatePicker和TimePicker，直接贴代码：date_time_picker.xml：android:id="@+id/new_act_date_picker"android:layout_width="w...
Android 颜色选取控件.zip
07-17
- 可定制化：提供接口供其他模块自定义颜色选取控件的颜色范围、默认颜色等。 总之，Android颜色选取控件是提高用户体验和应用功能多样性的重要工具。通过研究并使用提供的源码，开发者不仅可以快速集成这一功能，...
Android自定义控件实现颜色选择器
01-04
ColorPickerView 是之前一个智能家居项目实战中所写的自定义控件，主要用于取得RGB 0~255范围的值，然后转换成十六进制0~FF的值，发送给网关控制RGB彩灯。参考的是网上一个朋友的源码写的，多的不说了，先看效果图 ...
Android自定义View实现颜色选取器
01-04
Android 自定义View 颜色选取器，可以实现水平、竖直选择颜色类似 SeekBar 的方式通过滑动选择颜色。 效果图 xml 属性 1.indicatorColor 指示点颜色 2.indicatorEnable 是否使用指示点 3.orientation 方向 ...
Android自定义控件深入学习 Android生成随机验证码
09-02
在Android开发中，自定义控件是提升应用用户体验和界面个性化的重要手段。本文将深入探讨如何创建一个自定义控件，特别关注如何实现一个能够生成随机验证码的功能。首先，我们来了解一下自定义控件的基本概念。 ...
Android可双向滑动的范围选择器（双向滑动可选择范围的SeekBar）实现
tangxuesong的博客
02-01 1万+
一、概述 之前公司app里面有个功能是一个可以双向滑动的范围选择器，我在网上百度过一些实现方法，感觉各有利弊吧，但是都不太适合我们的需求。所以站在巨人的肩膀上，通过自定义View实现了一个可以适用于绝大多数情况的范围选择器来供大家使用。首先，看效果图： 我对该范围选择器的属性进行了一些封装，例如我们可以自由控制我们的范围选择器是否显示刻度、刻度的长度、我们选择器上每个值的单位、最大值最小值
Android-AndroidRulerPicker-使用标尺从指定范围中选取数字的Android自定义视图
08-13
Android Ruler Picker - 使用标尺从指定范围中选取数字的Android自定义视图
Android开源时间选择控件
12-07
一款很好用的开源时间选择插件，同程网目前用的就是这个。完美支持Android各个版本。强大的时间选择功能。
RangeSeekBar---双向SeekBar
10-29
源代码路径：http://code.google.com/p/range-seek-bar/ 只有一个控件类，不是完成的工程，整理成一个demo，分享给大家。
android 时间范围选择器PickTimeDialog
lansus的博客
05-25 1万+
个人提供了自己封装的第三方时间选择器，能够自定义时间格式，以及设置时间范围。基础使用 PickTimeDialog pickDilog= new PickTimeDialog(this).setMaxTime(Calendar.getInstance()).setOnPickTimeDialogListener(this).create().cantlable().setOnKeyListe
Android 好看的自定义滚动式日期选择控件
热门推荐
菜鸟的自我修养
09-29 5万+
最近接触了日期选择的功能，那么肯定得需要一个日期选择控件，Android 系统有自带的 DatePicker 控件，但是不说这个控件有多 难看吧，现在 Android 手机版本那么多，用户弹出来的控件五花八门的也不太好，所以只好走自定义的道路了。先是在网上找了一 些demo看了看，发现不是很满足自己的需求，但是又懒得自己从头写，就找了一个还不错的demo，对代码进行了一些简化，并添 加了一些...
Android开发，超出屏幕范围的控件显示解决办法
金属服务，美好生活，天网改变世界，华帝量子科技。
04-11 1万+
安卓开发，滚动条制作
android开发时为日期控件设置选择范围，再次点击时显示上次选择日期
qq_35821446的博客
09-06 2921
下面做的是：28天 //计算28天前的日期 public static final long _MAX_TIME = 28 * 24 * 60 * 60 * 1000L; int inComingYear; int inComingMonth; int inComingDay;             Calendar calendarIn = Calendar.getInst
android 屏幕坐标色彩,Android自定义View实现颜色选取器
05-31
要实现一个自定义的颜色选取器，可以采用以下步骤： 1. 创建一个自定义的View，继承自View类。 2. 在View的onDraw()方法中绘制一个矩形，用于显示当前选中的颜色。 3. 在View的onTouchEvent()方法中监听用户的触摸...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值