1、前言
书接上一回 5分钟带你了解Android Progress Bar
女盆友反馈说,看不到图片。因为用的是Github的图床,现在换成了阿里图床,应该是可以的。在代码缩进上也做了一些改善。谢谢各位的建议! 依旧,如果写的不好,或者有错误之处,恳请在评论、私信、邮箱指出,万分感谢🙏
系列更新:
2、RatingBar
顾名思义,这玩意很简单,和Seekbar一样继承自AbsSeekBar,所以玩法一样咯。直接上代码
<RatingBar
android:id="@+id/rb_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="1.5"
android:stepSize="0.5" />
<RatingBar
android:id="@+id/rb_02"
style="@style/RatingBar_Beautiful"
android:numStars="5"
android:rating="2"
android:stepSize="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
两个 ,一个原生用法、一个自定义用法
然后速速看下属性,也是很简单很干脆
<!-- 显示的最大数量 -->
<attr name="numStars" format="integer" />
<!-- 默认的数量 -->
<attr name="rating" format="float" />
<!-- 每次增加的值(是的可以是小数) -->
<attr name="stepSize" format="float" />
<!-- 用户可不可以操作 -->
<attr name="isIndicator" format="boolean" />
就这么多了,顺带提一嘴怎么自定义吧(因为还是ProgressBar的老一套了)
abc_ratingbar_beautiful.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background" android:drawable="@mipmap/icon_rating_02" />
<item android:id="@android:id/secondaryProgress" android:drawable="@mipmap/icon_rating_02" />
<item android:id="@android:id/progress" android:drawable="@mipmap/icon_rating_01" />
</layer-list>
styles.xml
<style name="RatingBar_Beautiful" parent="@android:style/Widget.RatingBar">
<item name="android:progressDrawable">@drawable/abc_ratingbar_beautiful</item>
<item name="android:minHeight">24dp</item>
</style>
不要忘了监听事件~
rb01.onRatingBarChangeListener = OnRatingBarChangeListener { ratingBar, rating, fromUser ->
//监听
}
因为这玩意场景太少了,复杂的需求又不好实现,所以就这么多咯
咩啦,咩啦
3、更好看的ProgressBar
显然,Google提供的进度条对你来说,不够用!你怎么知道产品可爱小脑袋瓜里面会有什么呢。所以我们要学会,扩展(我苦思冥想了一些应用场景)
一般有3种方法
(1)继承ProgressBar
自定义部分绘制,不过主体还是交给ProgressBar自己操作,比如直接绘制一个进度文本在中央,如下
class ZProgressBar @JvmOverloads constructor(
context: Context, attrs: AttributeSet? = null
) : ProgressBar(context, attrs) {
private val mTextPaint: Paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
color = Color.WHITE
textAlign = Paint.Align.CENTER
textSize = 35F
}
private val mTextRect: Rect = Rect()
@Synchronized
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val text = "$progress%"
mTextPaint.getTextBounds(text, 0, text.length, mTextRect)
val textTopY = height.plus(mTextRect.height()).div(2f)
canvas.drawText(text, width.div(2f), textTopY, mTextPaint)
}
}
<com.nf.module_test.seekbar.custom.ZProgressBar
android:id="@+id/zb_01"
style="@style/ProgressBar_Beautiful"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:max="100"
android:progress="50"
android:secondaryProgress="70"
android:layout_width="match_parent"/>
(2)布局方式
在同级下,加入更多的控件,在更新进度时,同时更新其他控件(SeekBar可以通过监听方法来更新)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/sb_beautiful3"
style="@style/ProgressBar_Beautiful"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:max="100"
android:progress="50"
android:secondaryProgress="70" />
<TextView
android:id="@+id/tv_center_progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="50%"
android:textColor="#ffffff"
android:textSize="15sp" />
</RelativeLayout>
同时更新
pb03.setProgress(total - it, true)
tvCenterProgress.text = "${total - it}%"
(3)自定义ProgressBar
完全自定义一个ProgressBar,彻底摆脱限制
等下,等下,好像加了第三点篇幅会太多,那就结束这一篇,单独起一篇吧
没啦,没啦 0、0
如果写的不好,或者有错误之处,恳请在评论、私信、邮箱指出,万分感谢🙏 “开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天,点击查看活动详情”