带你了解Android Progress Bar 2

572 阅读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" />

两个 ,一个原生用法、一个自定义用法

image-20230207172220022

然后速速看下属性,也是很简单很干脆

<!-- 显示的最大数量 -->
<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 天,点击查看活动详情