带你了解Android Progress Bar 2

1、前言

书接上一回 5分钟带你了解Android Progress Bar

女盆友反馈说，看不到图片。因为用的是Github的图床，现在换成了阿里图床，应该是可以的。在代码缩进上也做了一些改善。谢谢各位的建议！ 依旧，如果写的不好，或者有错误之处，恳请在评论、私信、邮箱指出，万分感谢🙏

系列更新：

5分钟带你了解Android Progress Bar1

5分钟带你了解Android Progress Bar2

5分钟带你了解Android Progress Bar3

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 天，点击查看活动详情”