Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条

前言

在开发中，经常会遇到SeekBar组件的开发，一个高效的自定义SeekBar显得尤为重要，笔者刚好也在项目中大量使用带有数字的拖拽进度条，在深思熟虑后，打算从继承源码形式上，把数字绘制在拖拽进度条上，让拖拽的时候时刻去更新数字。这种实现方式不到100行代码，代码极其精简，功能极其好用，另外，这种方案可以用于各种组件绘制在进度条上方，这块的实现就看需求的具体效果

本例子中高仿抖音的进度拖拽效果，实现效果如下

实现思路

继承SeekBar，自定义属性
在onDraw方法增加数字的绘制和数字阴影的绘制

实现分析

1、快速使用

在xml直接使用，其监听进度变化同SeekBar组件

<com.baseui.seekbar.NumberSeekBarandroid:layout_width="match_parent"android:layout_height="54dp"android:max="100"android:paddingStart="24dp"android:paddingEnd="24dp"android:progressDrawable="@drawable/progress_seek_bar_beauty"android:thumb="@drawable/icon_beauty_seek_bar_thumb"app:textColor="@color/white"app:textMarginBottom="2dp"app:textShadowColor="#80000000"app:textShadowOffsetX="0dp"app:textShadowOffsetY="0dp"app:textShadowRadius="2dp"app:textSize="12sp"app:withText="true"app:withTextShadow="true"tools:progress="50"/>

2、自定义属性

在attr中增加自定义的属性

<resources><declare-styleable name="InheritedSeekBar"><attr name="withText" format="boolean" /><attr name="textSize" format="dimension" /><attr name="textColor" format="color" /><attr name="textMarginBottom" format="dimension" /><attr name="withTextShadow" format="boolean" /><attr name="textShadowColor" format="color" /><attr name="textShadowOffsetX" format="dimension" /><attr name="textShadowOffsetY" format="dimension" /><attr name="textShadowRadius" format="dimension" /></declare-styleable>
</resources>

withText：是否带有进度值
textSize：进度值的大小
textColor：进度值的颜色
textMarginBottom：进度值底边距
withTextShadow：是否带有进度值的阴影
textShadowColor：进度值阴影的颜色
textShadowOffsetX：进度值阴影的x坐标偏移
textShadowOffsetY：进度值阴影的y坐标偏移
textShadowRadius：进度值阴影的圆角

3、获取属性

通过attributeSet获取自定义属性，同时获取进度的属性和进度阴影的属性

class NumberSeekBar @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatSeekBar(context, attrs, defStyleAttr) {private val textPaint = Paint()private var withText: Boolean = falseprivate var textSize: Float = 0fprivate var textColor: Int = Color.BLACKprivate var textMarginBottom: Int = 0private var withTextShadow = falseprivate var textShadowColor = Color.BLACKprivate var textShadowRadius = 0private var textShadowOffsetX = 0private var textShadowOffsetY = 0init {init(context, attrs)}private fun init(context: Context, attributeSet: AttributeSet?) {val a: TypedArray = context.obtainStyledAttributes(attributeSet, R.styleable.InheritedSeekBar)// 获取进度的属性withText = a.getBoolean(R.styleable.InheritedSeekBar_withText, false)if (withText) {textSize = a.getDimensionPixelSize(R.styleable.InheritedSeekBar_textSize,TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,12f,context.resources.displayMetrics).toInt()).toFloat()textColor = a.getColor(R.styleable.InheritedSeekBar_textColor, textColor)textMarginBottom = a.getDimensionPixelSize(R.styleable.InheritedSeekBar_textMarginBottom, 0)}// 获取进度阴影的属性withTextShadow = a.getBoolean(R.styleable.InheritedSeekBar_withTextShadow, false)if (withTextShadow) {textShadowColor = a.getColor(R.styleable.InheritedSeekBar_textShadowColor, textShadowColor)textShadowRadius = a.getDimensionPixelSize(R.styleable.InheritedSeekBar_textShadowRadius, 0)textShadowOffsetX = a.getDimensionPixelOffset(R.styleable.InheritedSeekBar_textShadowOffsetX, 0)textShadowOffsetY = a.getDimensionPixelOffset(R.styleable.InheritedSeekBar_textShadowOffsetY, 0)}a.recycle()// 对画笔设置值和阴影if (withText) {textPaint.textSize = textSizetextPaint.color = textColortextPaint.textAlign = Paint.Align.CENTER}if (withTextShadow) {textPaint.setShadowLayer(textShadowRadius.toFloat(), textShadowOffsetX.toFloat(),textShadowOffsetY.toFloat(), textShadowColor)}}
}

4、绘制数字和阴影

通过复写onDraw方法，经过计算偏移量后，在进度拖拽的上方绘制数字

override fun onDraw(canvas: Canvas) {super.onDraw(canvas)if (withText) {drawText(canvas)}
}private fun drawText(canvas: Canvas) {val saveCount = canvas.save()val thumbTopY = thumb.bounds.top// 计算拖拽组件的中点val thumbCenterX = paddingStart + progress.toFloat() / max * (width - paddingStart - paddingEnd)canvas.drawText(progress.toString(), thumbCenterX, thumbTopY.toFloat() - textMarginBottom, textPaint)canvas.restoreToCount(saveCount)
}

5、进度条颜色

对于进度条颜色是layer-list，可以设置进度的背景和进度颜色值，而进度拖拽组件，其实就是个圆形的Icon图片而已

android:progressDrawable="@drawable/progress_seek_bar"
android:thumb="@drawable/icon_beauty_seek_bar_thumb"

在progress_seek_bar设置进度成黄色，背景成少许透明的灰黑色

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:id="@android:id/background"android:gravity="center_vertical"><shape><solid android:color="#29ffffff" /><corners android:radius="3dp" /><size android:height="3dp" /></shape></item><itemandroid:id="@android:id/secondaryProgress"android:gravity="center_vertical"><clip><shape><solid android:color="#29ffffff" /><corners android:radius="3dp" /><size android:height="3dp" /></shape></clip></item><itemandroid:id="@android:id/progress"android:gravity="center_vertical"><clip><shape><solid android:color="#ffffe000" /><corners android:radius="3dp" /><size android:height="3dp" /></shape></clip></item>
</layer-list>

Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条相关推荐

Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条
前言在开发中常常会遇到PK条制作,如果在PK条中是纯色的情况下,比较好办,如下: 我们通常会设置其权重进行更新两个PK条的进度,实现起来也简单 //更新PkBar宽度比例 private void ...
Android音乐播放器开发(5)—播放界面（播放、暂停、上一首、下一首，顺序播放、随机播放、拖拽进度条…）
1. 说明源码已同步到Gitee仓库,Github仓库,觉得还不错的话帮忙点个"star"吧,非常感谢. Android播放器专栏其它文章: 服务端:Android音乐播放器开发 ...
php怎样获取视频播放的进度条,小程序如何实现视频或音频自定义可拖拽进度条...
本篇文章给大家带来的内容是关于小程序如何实现视频或音频自定义可拖拽进度条,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 小程序原生组件的音频播放时并没有进度条的显示,而此次项目中,鉴 ...
Android基础控件——ViewFlipper的使用，仿淘宝头条垂直滚动广告条
ViewFlipper的使用,仿淘宝头条垂直滚动广告条学习,学习,学以致用 ViewFlipper是安卓自带的控件,很多人可能很少知道这个控件,这个控件很简单,也很好理解,能不能用上实战就看你们的本 ...
Android:基础控件按键文本框输入框制作登录页面
基础控件之Button,TextView,EditText,ImageView Button:按键 TextView:文本框 EditText:输入框 ImageView:图片那我们新建一个工程研究 ...
Android基础控件（一）
前言本文博客主要作为笔记使用,主要说明常用方法,常用手段,偏向于实战. 本文使用的开发工具为Android studio 3.5X版本 Android项目的结构在Android中在Android ...
Android基础控件——TabLayout的使用、仿爱奇艺导航条
TabLayout的使用.仿爱奇艺导航条学习,学习,学以致用,让基础控件贴近实战效果 TabLayout是Google新推出的Material Design的控件之一,TabLayout的使用必须结 ...
Android基础控件——ProgressBar自定义的介绍、动画效果实现、附加三个漂亮的进度条
ProgressBar自定义的介绍.动画效果实现.附加三个漂亮的进度条 shape属性介绍: corners 圆角 gradient 渐变 padding 内容离边界距离 size 大小 ...
android的三个基础控件,Android基础控件——ProgressBar自定义的介绍、动画效果实现、附加三个漂亮的进度条...
xml文件: android:centerColor="#00ff00" android:endColor="#0000ff" android:startCol ...

Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条

前言

实现思路

实现分析

Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条相关推荐

最新文章

热门文章