CN109032596B

CN109032596B - 一种带范围的进度条的实现方法

Info

Publication number: CN109032596B
Application number: CN201810722468.XA
Authority: CN
Inventors: 孙征
Original assignee: Beijing Kuwo Technology Co Ltd
Current assignee: Beijing Kuwo Technology Co Ltd
Priority date: 2018-07-04
Filing date: 2018-07-04
Publication date: 2021-09-10
Anticipated expiration: 2038-07-04
Also published as: CN109032596A

Abstract

本发明涉及一种带范围的进度条的实现方法，包括如下步骤：定义边框控件KwRangeSeekBar，在onSizeChanged回调中获取控件KwRangeSeekBar的高度h，计算得到可用的进度范围，获取标识范围的左、右边标记的横坐标，在onTouchEvent的回调中，处理用户抬起的操作，提供对外接口setTime，在onDraw回调中，依次绘制进度条背景，绘制二级进度条，绘制滑块和带范围的标记。本发明，自定义进度条控件继承于Android系统提供的SeekBar控件，重写onDraw回调，对外提供接口，调用接口则显示带进度的进度条，否则显示正常的进度条，用户可自定义相关参数，扩展性好，兼容现有进度条，易于使用、维护。

Description

一种带范围的进度条的实现方法

技术领域

本发明涉及进度条计算及呈现技术领域，具体说是一种带范围的进度条的实现方法。

背景技术

Android输入控件是一种用于人机交互的元件，Android SDK为此提供了各种各样的输入控件，包括：

原生控件，例如：文本域(TextView)、按钮(Button)、编辑框(EditText)、单选按钮(RadioButton)、列表控件(ListView)以及显示图片控件(ImageView)等，

布局控件，例如：Linearlayout、Relativelayout、Framelayout以及不太常用的TableLayout等等。

利用这些基础的输入控件，能实现普通的布局展示，但对于特殊的应用场景，比如复杂的动画展示，或者特别的图形图像要求，利用这些基础的输入控件无法实现，因此就需要自定义控件来满足特别的需求。

在Android系统中，自定义控件，主要包括两类：

第一类，组合自定义控件，是指使用系统提供的各种界面控件，通过自定义封装成包括多个系统控件的自定义控件，代码在内部处理各子控件的交互，简化使用。

第二类，自绘制控件，是指通过继承系统提供的各种界面控件，在控件的测量、布局、绘制三个方法中，使用代码进行测量、绘制、处理交互事件的自定义控件。自绘制控件能提供比系统控件更新颖的界面、更丰富的交互方式。

进度条控件是安卓的基础控件之一，具体说是ProgressBar控件，其继承于View类。进度条在App中非常常见，例如下载进度、加载图片、打开文章、打开网页等等……都需要这么一个效果让用户知道我们的App正在读取，以构造良好的交互。如果没有这样一个效果的话，用户没法知道东西有没有下载好、图片加载了没有、文章打开了没……会让用户很不爽。基于这样的情景，为了丰富进度条的呈现效果，满足用户个性化选择的需求，拟开发新式样的进度条控件。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种带范围的进度条的实现方法，自定义进度条控件继承于Android系统提供的SeekBar控件，重写onDraw回调，对外提供接口，调用接口则显示带进度的进度条，否则显示正常的进度条，用户可自定义相关参数，扩展性好，兼容现有进度条，易于使用、维护。

为达到以上目的，本发明采取的技术方案是：

一种带范围的进度条的实现方法，其特征在于，包括如下步骤：

定义边框控件KwRangeSeekBar，继承android系统提供的SeekBar控件，

在onSizeChanged回调中获取控件KwRangeSeekBar的高度h，进度条可用的区域available，进度条总的宽度减去左右内边距，得到可用的进度范围，

获取标识范围的左边标记的横坐标mTagLeft，

mTagLeft = getX(mStartProgress)，

获取标识范围的右边标记的横坐标mTagRight，

mTagRight = getX(mEndProgress)，

其中，mStartProgress是外部传递给KwRangeSeekBar进度条的起始进度，mEndProgress是外部传递给KwRangeSeekBar进度条的结束进度，getX是根据进度获取横坐标的函数，

在onTouchEvent的回调中，处理用户抬起的操作，

提供对外接口setTime，

在onDraw回调中，绘制进度条的三种进度值，具体包括：

绘制进度条背景，

根据布尔型变量isRangeSeekbar绘制二级进度条，

绘制滑块和带范围的标记。

在上述技术方案的基础上，在边框控件KwRangeSeekBar中，定义画笔mPaint和mPaintTag的画笔Paint对象，用来绘制进度条和竖线标记；

定义mRectLeft，mRectRight，表示左边和右边圆角矩形的带颜色区域，是RectF类型的变量；

定义mStartProgress，mEndProgress，表示进度范围的起始值和最大值，类型是int。

在上述技术方案的基础上，mCenterY = h/2；表示控件KwRangeSeekBar的中间的高度，绘制进度条的时候，在这个高度上绘制。

在上述技术方案的基础上，getX函数的具体步骤为：

调用SeekBar控件的系统api getMax，获取进度条的最大进度值max，

计算出当前进度和总进度的比例sacle，scale = progress * 1.0f / max，progress是输入参数，表示当前的进度，

计算scale* available + getPaddingLeft()，返回计算结果，就根据进度值计算出了对应进度条的左边标记的横坐标值mTagLeft，available是可用的进度条的宽度，getPaddingLeft()是SeekBar控件提供的获取左边距的api，

按如上算法相应的计算出对应进度条的右边标记的横坐标值mTagRight。

在上述技术方案的基础上，处理用户抬起的操作时，调用getProgress根据当前的用户点击的横坐标，获取对应的进度值，具体步骤如下：

设touchX是点击的横坐标值，getPaddingLeft获取左边距，这样最大进度除以可用进度条的宽度，再乘以当前触摸的横坐标，就计算出了横坐标对应的进度值，

获取了新的进度值以后，调用seekTo对其进行校正，具体步骤如下：

当前进度如果小于范围的最小进度mStartProgress，就调用SeekBar的setProgress设置最小进度，如果大于范围的最大进度mEndProgress，就调用SeekBar的setProgress设置最大进度，如果上边两种情况都不属于，就调用SeekBar的setProgress设置当前进度；

如果newProgress小于最小进度或者大于最大进度，返回true，代表处理了该操作，并且刷新进度条。

在上述技术方案的基础上，对外接口setTime，提供以下可接受的参数：

setTime (int startTime， int endTime， int duration)

参数startTime是进度范围的开始时间，endTime是进度条范围的结束时间，duration是歌曲的总时长。

在上述技术方案的基础上，绘制进度条背景，具体包括：

给画笔设置颜色，mPaint.setColor(COLOR_PROGRESS_DEFAULT)；

在进度条的画布canvas，调用drawLine绘制一条直线，getPaddingLeft是进度条的内边距，mCenterY是进度条的高度的一半，getWidth() - getPaddingRight()是进度条宽度与右边距的差值，这样就绘制了一条直线，作为进度条的背景，

canvas.drawLine(getPaddingLeft()， mCenterY， getWidth() -getPaddingRight()， mCenterY， mPaint)。

在上述技术方案的基础上，根据布尔型变量isRangeSeekbar绘制二级进度条，具体包括：

根据是否是带范围的进度条变量isRangeSeekbar来分别绘制进度条，如果是带范围的，就从范围的左标记开始绘制，如果不是就从左边距开始绘制，

调用getX处理二级进度条的进度mSecondProgress，得到进度值对应的横坐标secondProgressX，

给画笔设置预设的二级进度条颜色值COLOR_SECOND_PROGRESS，

调用画布canvas的drawLine绘制线条。

在上述技术方案的基础上，绘制滑块和带范围的标记具体包括：

根据是否是带范围的进度条变量isRangeSeekbar来分别绘制滑块和带范围的标记，

调用SeekBar提供的获取当前进度的api getProgress给curProgress赋值，

调用根据进度获取横坐标函数getX(curProgress)给curX赋值，

是则：

实时绘制切换的进度，预设为黄色线条mPaint.setColor(COLOR_TAG_YELLO)，

绘制时，如果当前进度mStartProgress大于进度范围的开始值mStartProgress，小于等于mEndProgress结束值，就从进度范围的左边标记mTagLeft绘制到当前进度curX的像素值，如果当前进度值大于进度范围的最大值mEndProgress，就从进度范围的左标记绘制到右侧标记，防止超出范围；

绘制两条标记线，mHalfHeight是预设的标记线的高度值，中心mCenterY减去高度mHalfHeight到mCenterY加上mHalfHeight绘制左边的竖线标记，同理绘制右边标记，

绘制滑块：调用SeekBar提供的drawThumb绘制滑块；

不是则：

绘制滑块：调用SeekBar提供的drawThumb绘制滑块。

本发明所述的带范围的进度条的实现方法，自定义进度条控件继承于Android系统提供的SeekBar控件，重写onDraw回调，对外提供接口，调用接口则显示带进度的进度条，否则显示正常的进度条，用户可自定义相关参数，扩展性好，兼容现有进度条，易于使用、维护。

附图说明

本发明有如下附图：

图1 本发明的流程图。

具体实施方式

以下结合附图对本发明作进一步详细说明。

如图1所示，本发明所述的带范围的进度条的实现方法，包括如下步骤：

定义边框控件KwRangeSeekBar，继承android系统提供的SeekBar控件，

获取标识范围的左边标记的横坐标mTagLeft，

mTagLeft = getX(mStartProgress)，

获取标识范围的右边标记的横坐标mTagRight，

mTagRight = getX(mEndProgress)，

在onTouchEvent的回调中，处理用户抬起的操作，

提供对外接口setTime，

在onDraw回调中，绘制进度条的三种进度值，具体包括：

绘制进度条背景，

根据布尔型变量isRangeSeekbar绘制二级进度条，

绘制滑块和带范围的标记。

定义mRectLeft，mRectRight，表示左边和右边圆角矩形的黄色区域，是RectF类型的变量；

在上述技术方案的基础上，getX函数的具体步骤为：

例如，计算对应进度条的左边标记的横坐标值mTagLeft可采用如下代码：

private float getX (int progress) {

int max = getMax()；

float scale = progress * 1.0f / max；

return scale* available + getPaddingLeft()；

}。

例如，计算对应进度条的右边标记的横坐标值mTagRight可采用如下代码：

private float getX (int progress) {

int max = getMax()；

float scale = progress * 1.0f / max；

return scale* available + getPaddingRight()；

}。

例如，可采用如下代码：

int newProgress = getProgress(event.getX())；

seekTo(newProgress)；

if (newProgress < mStartProgress || newProgress >mEndProgress) {

super.onTouchEvent(event)；

invalidate()；

return true；

}

private int getProgress (float touchX) {

float x = touchX - getPaddingLeft()；

return (int) (getMax() * 1.0f / available * x)；

}

private void seekTo (int progress) {

if (progress < mStartProgress) {

super.setProgress(mStartProgress)；

} else if (progress > mEndProgress) {

super.setProgress(mEndProgress)；

} else {

super.setProgress(progress)；

}

}。

setTime (int startTime， int endTime， int duration)

使用时，外部调用该接口以后，设置布尔型变量isRangeSeekbar为true，代表当前是带范围的进度条，如果不调用该接口，isRangeSeekbar默认是false，就是正常的进度条。

在上述技术方案的基础上，绘制进度条背景，具体包括：

给画笔设置颜色，mPaint.setColor(COLOR_PROGRESS_DEFAULT)；

COLOR_PROGRESS_DEFAULT是预设的百分之10不透明度的白色，

给画笔设置预设的二级进度条颜色值COLOR_SECOND_PROGRESS，COLOR_SECOND_PROGRESS是纯白色的50%的不透明度颜色，

调用画布canvas的drawLine绘制线条。

例如，可采用如下代码：

if (isRangeSeekbar) {

float secondProgressX = getX(mSecondProgress)；

mPaint.setColor(COLOR_SECOND_PROGRESS)；

canvas.drawLine(mTagLeft， mCenterY， secondProgressX， mCenterY，mPaint)；

} else {

float secondProgressX = getX(mSecondProgress)；

mPaint.setColor(COLOR_SECOND_PROGRESS)；

canvas.drawLine(getPaddingLeft()， mCenterY， secondProgressX，mCenterY， mPaint)；

}。

调用根据进度获取横坐标函数getX(curProgress)给curX赋值，

是则：

绘制滑块：调用SeekBar提供的drawThumb绘制滑块；

不是则：

绘制滑块：调用SeekBar提供的drawThumb绘制滑块。

例如，可采用如下代码：

if (isRangeSeekbar) {

int curProgress = getProgress()；

float curX = getX(curProgress)；

// 实时绘制切换的进度，黄色线条

mPaint.setColor(COLOR_TAG_YELLO)；

if (curProgress >= mStartProgress && curProgress <=mEndProgress) {

canvas.drawLine(mTagLeft， mCenterY， curX， mCenterY， mPaint)；

} else if (curProgress > mEndProgress) {

canvas.drawLine(mTagLeft， mCenterY， mTagRight， mCenterY， mPaint)；

}

// 两条标记线

mPaintTag.setColor(COLOR_TAG_YELLO)；

canvas.drawLine(mTagLeft， mCenterY - mHalfHeight， mTagLeft， mCenterY + mHalfHeight， mPaintTag)；

mPaintTag.setColor(COLOR_SECOND_PROGRESS)；

canvas.drawLine(mTagRight， mCenterY - mHalfHeight， mTagRight， mCenterY + mHalfHeight， mPaintTag)；

// 滑块

drawThumb(canvas)；

} else {

int curProgress = getProgress()；

float curX = getX(curProgress)；

// 实时绘制切换的进度，黄色线条

mPaint.setColor(COLOR_TAG_YELLO)；

canvas.drawLine(getPaddingLeft()， mCenterY， curX， mCenterY， mPaint)；

// 滑块

drawThumb(canvas)；

}。

其中，COLOR_TAG_YELLO是预设的黄色，开发者可以根据项目需求修改该颜色值。

本发明所述控件继承于Android系统提供的Seekbar控件，滑动事件是使用seekbar的，重写OnDraw回调，自己绘制正常的进度条显示和带范围的进度条显示，对外提供一个接口，调用了如果参数符合规范，就会显示带进度的进度条，如果不调用接口就显示正常的进度条，进度条的背景和缓冲进度以及播放进度的颜色和高度，都是可以自己定义和修改的，本控件扩展性好，可以应用在音乐付费的试听里，比如允许试听30秒，显示范围即可，也支持滑动，超出范围，自动回退到最大值或者最小值。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims

1.一种带范围的进度条的实现方法，其特征在于，包括如下步骤：

定义边框控件KwRangeSeekBar，继承android系统提供的SeekBar控件，

获取标识范围的左边标记的横坐标mTagLeft，

mTagLeft = getX(mStartProgress)，

获取标识范围的右边标记的横坐标mTagRight，

mTagRight = getX(mEndProgress)，

在onTouchEvent的回调中，处理用户抬起的操作，

提供接口名称为setTime的对外接口，

在onDraw回调中，绘制进度条的三种进度值，具体包括：

绘制进度条背景，

根据布尔型变量isRangeSeekbar绘制二级进度条，

绘制滑块和带范围的标记，具体包括：

调用SeekBar提供的获取当前进度的api getProgress给curProgress赋值，所述curProgress用于存储当前进度，

调用根据进度获取横坐标函数getX(curProgress)给curX赋值，所述curX用于存储横坐标，

是则：

实时绘制切换的进度，预设画笔mPaint的颜色为黄色线条mPaint.setColor(COLOR_TAG_YELLO)，

绘制时，如果当前进度curProgress大于进度范围的开始值mStartProgress，小于等于mEndProgress结束值，就从进度范围的左边标记mTagLeft绘制到当前进度curX的像素值，如果当前进度值大于进度范围的最大值mEndProgress，就从进度范围的左标记绘制到右侧标记，防止超出范围；

绘制滑块：调用SeekBar提供的drawThumb绘制滑块；

不是则：

绘制滑块：调用SeekBar提供的drawThumb绘制滑块。

2.如权利要求1所述的带范围的进度条的实现方法，其特征在于：在边框控件KwRangeSeekBar中，定义画笔mPaint和mPaintTag的画笔Paint对象，用来绘制进度条和竖线标记；

3.如权利要求1所述的带范围的进度条的实现方法，其特征在于：mCenterY = h/2；表示控件KwRangeSeekBar的中间的高度，绘制进度条的时候，在这个高度上绘制。

4.如权利要求1所述的带范围的进度条的实现方法，其特征在于：getX函数的具体步骤为：

5.如权利要求1所述的带范围的进度条的实现方法，其特征在于：处理用户抬起的操作时，调用getProgress根据当前的用户点击的横坐标，获取对应的进度值，getProgress是SeekBar提供的获取当前进度的api，具体步骤如下：

获取了新的进度值以后，调用seekTo对其进行校正，seekTo是SeekBar提供的进度赋值的api，具体步骤如下：

如果newProgress小于最小进度或者大于最大进度，返回true，代表处理了该操作，并且刷新进度条，newProgress用于存储当前进度。

6.如权利要求1所述的带范围的进度条的实现方法，其特征在于：对外接口setTime，提供以下可接受的参数：

setTime (int startTime， int endTime， int duration)

7.如权利要求1所述的带范围的进度条的实现方法，其特征在于：绘制进度条背景，具体包括：

给画笔设置颜色，mPaint.setColor(COLOR_PROGRESS_DEFAULT)；

canvas.drawLine(getPaddingLeft()， mCenterY， getWidth() - getPaddingRight()， mCenterY， mPaint)。

8.如权利要求1所述的带范围的进度条的实现方法，其特征在于：根据布尔型变量isRangeSeekbar绘制二级进度条，具体包括：

给画笔设置预设的二级进度条颜色值COLOR_SECOND_PROGRESS，

调用画布canvas的drawLine绘制线条。