Android基础--自定义ProgressBar

本篇自定义ProgressBar包含以下内容：

圆形ProgressBar修改样式；
自定义圆形ProgressBar；
水平ProgressBar修改样式；
自定义可拖动ProgressBar；
自定义垂直ProgressBar；

ProgressBar概念

ProgressBar为进度条控件，有Indeterminate不确定模式和Determinate确定模式两种：①不确定模式通常使用圆形循环动画来表示类似“正在加载”的过程，进度无法确定，具有不确定性；②确定模式是通过将已发生的进度与总量的百分比显示在进度条上，比如下载或上传文件的数量等。

ProgressBar属性

属性	含义
style	修改ProgressBar样式
animationResolution	动画帧之间的超时（以毫秒为单位）
indeterminate	允许启用不确定模式
indeterminateTint	修改进度条颜色
indeterminateBehavior	定义进度达到最大值时不确定模式应如何表现
indeterminateDrawable	用于不确定模式的Drawable
indeterminateDuration	不确定动画的持续时间
indeterminateOnly	仅限于不确定模式（状态保持进度模式将不起作用）
interpolator	设置不确定动画的加速度曲线
max	定义最大值
min	定义最小值
mirrorForRtl	定义在RTL模式下是否需要镜像关联的可绘制对象
progress	定义默认进度值，介于0到最大值之间
progressDrawable	可绘制用于进度模式
secondaryProgress	定义二级进度值，介于0和最大值之间

1. ProgressBar自定义样式

Indeterminate不确定模式

Indeterminate不确定模式默认样式是一个有缺口的圆环循环转动，如下图左侧所示，只能通过indeterminateTint修改下进度条颜色，下面将自定义写一个类似太阳花的不确定模式ProgressBar。

1.png

简单drawable一下

(1) 首先找一张加载图片；

loading10.png

(2) drawable中设置图片的旋转动画<drawable/indeterminate_style.xml>；

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loading"
    android:fromDegrees="0.0"
    android:pivotX="50.0%"
    android:pivotY="50.0%"
    android:toDegrees="360.0" />

(3) 修改ProgressBar的样式；

    <ProgressBar
        android:id="@+id/bar2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminateTint="#3d3d3d"
        android:indeterminateDrawable="@drawable/indeterminate_style" />

需要注意的是，这种效果图片是会旋转起来的，太阳花上进度格的位置不是固定的。

2. 自定义 “正在加载” 弹窗

自定义ProgressBar弹窗的效果图如下：

3.png

首先做好准备工作；

Indeterminate模式 “正在加载” 的动画 <drawable/loading_style.xml>

自定义加载的圆形图片有10个进度条，这里将动画定为10个动画帧，这样看起来比较连贯；

<?xml version="1.0" encoding="utf-8"?>
<animation-list
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <!-- 定义动画帧 -->
    <item
        android:drawable="@drawable/loading1"
        <!-- 该动画帧的持续时间 -->
        android:duration="100" />
    <item
        android:drawable="@drawable/loading2"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading3"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading4"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading5"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading6"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading7"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading8"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading9"
        android:duration="100" />
    <item
        android:drawable="@drawable/loading10"
        android:duration="100" />
</animation-list>

“正在加载” 的背景 <progress_bg.xml>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 背景颜色 -->
    <solid android:color="#ff404040" />
    <!-- 背景圆角 -->
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" />
</shape>

自定义 “正在加载” 弹窗

弹窗中显示的自定义item <custom_progress_bar.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/progress_bg"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="30dp">

    <View
        android:id="@+id/loading_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/loading_style" />

    <TextView
        android:id="@+id/loading_tips"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:text="正在加载"
        android:textColor="#FFFFFF" />

</LinearLayout>

弹窗的样式 <values/styles.xml>

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 定义ProgressDialog样式 -->
    <style parent="@android:style/Theme.Dialog" name="ProgressDialog">
        <!-- 窗口的边框样式 -->
        <item name="android:windowFrame">@null</item>
        <!-- 是否为浮动窗口 -->
        <item name="android:windowIsFloating">true</item>
        <!-- 窗口内容覆盖的样式 -->
        <item name="android:windowContentOverlay">@null</item>
        <!-- 窗口动画样式，这里使用对话框的默认动画样式 -->
        <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
        <!-- 窗口与软键盘的交互模式，这里设置在软键盘弹出时调整窗口位置 -->
        <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
        <!-- 窗口的背景颜色 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <!-- 窗口是否显示标题栏，这里不显示标题栏 -->
        <item name="android:windowNoTitle">true</item>
    </style>

</resources>

自定义 “正在加载” 弹窗 <LoadingDialog.kt>

class LoadingDialog(context : Context, themeResId : Int) : Dialog(context , themeResId) {

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // 当弹窗获得焦点时，开始 ”正在加载“ 动画
        if( loading_image != null ){
            val spinner = loading_image.background as AnimationDrawable
            spinner.start()
        }
    }

}

“正在加载” 弹窗的使用 <MainActivity.kt>

在MainActivity的布局中添加一个按钮，id为load_btn，然后在初始化View中给load_btn按钮添加点击事件，点击按钮触发 “正在加载” 弹窗；

class MainActivity : AppCompatActivity() {

    private lateinit var loadingDialog : LoadingDialog

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initView()
    }

    private fun initView(){

        load_btn.setOnClickListener {

            // 创建对话框
            loadingDialog = LoadingDialog(this, R.style.ProgressDialog)
            loadingDialog.setContentView(R.layout.custom_progress_bar)
            loadingDialog.loading_tips.text = "加载中..."

            // 设置对话框属性
            // 将对话框设置为不可撤销，用户无法通过点击对话框外部或按返回键来取消对话框
            loadingDialog.setCancelable(false)
            loadingDialog.setOnCancelListener(null)
            // 将对话框的位置设置为屏幕中心
            loadingDialog.window!!.attributes.gravity = Gravity.CENTER
            // 获取对话框窗口的属性对象
            val lp = loadingDialog.window!!.attributes
            // 设置对话框背景的透明度为0.2，即20%不透明
            lp.dimAmount = 0.2f
            // 将修改后的属性对象应用到对话框窗口上
            loadingDialog.window!!.attributes = lp
            loadingDialog.show()
            
        }

    }
}

3. 水平ProgressBar修改样式

Determinate确定模式

Determinate确定模式可以用横向的进度条来显示进度，进度条的进度需要通过设置来实现，使用时需要将ProgressBar的style属性修改为水平进度条；

  style="?android:attr/progressBarStyleHorizontal" 
  or
  style="@android:style/Widget.Material.ProgressBar.Horizontal"

使用第2种方法的话，在style上按滚轮键可以跳转到Widget.Material.ProgressBar.Horizontal的样式设置代码部分：

    <style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
        <item name="progressDrawable">@drawable/progress_horizontal_material</item>
        <item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal_material</item>
        <item name="minHeight">16dip</item>
        <item name="maxHeight">16dip</item>
    </style>

水平进度条的样式在progressDrawable中进行自定义绘制，可以把系统中progress_horizontal_material.xml内容复制出来进行修改；

自定义绘制水平进度条ProgressBar <horizontal_style.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:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle">
            <!-- 设置水平进度条的高度、圆角、颜色 -->
            <size android:height="10dp" />
            <corners android:radius="5dp" />
            <solid android:color="#AAA" />
        </shape>
    </item>
    <!-- 缓冲进度条的背景色 -->
    <item android:id="@android:id/secondaryProgress"
        android:gravity="center_vertical|fill_horizontal">
        <!-- 属性android:scaleWidth="100%"一定要加上，否则设置进度无效 -->
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle">
                <size android:height="10dp" />
                <corners android:radius="5dp" />
                <solid android:color="@color/purple_200" />
            </shape>
        </scale>
    </item>
    <!-- 进度条的背景色 -->
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <shape android:shape="rectangle">
                <size android:height="10dp" />
                <corners android:radius="5dp" />
                <solid android:color="@color/purple_500"/>
            </shape>
        </scale>
    </item>
</layer-list>

添加ProgressBar控件 <activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/minus_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="minus"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:id="@+id/add_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="add"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@android:style/Widget.Material.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:min="0"
        android:progress="28"
        android:secondaryProgress="60"
        android:progressDrawable="@drawable/horizontal_style"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="50dp"/>


</androidx.constraintlayout.widget.ConstraintLayout>

ProgressBar的使用 <MainActivity.kt>

class MainActivity : AppCompatActivity() {

    private var progressNum : Int = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initView()
    }

    private fun initView(){
        progressNum = progress_bar.progress

        minus_btn.setOnClickListener {
            if (progressNum >= 10){
                progressNum -= 10
                progress_bar.progress = progressNum
            }else{
                progress_bar.progress = 0
            }
        }

        add_btn.setOnClickListener {
            if (progressNum <= 90){
                progressNum += 10
                progress_bar.progress = progressNum
            }else{
                progress_bar.progress = 100
            }
        }
    }
}

效果图如下，可以通过点击按钮来设置水平进度条的进度；实际应用过程中根据进度的百分比来设置ProgressBar的progress的值即可。

2.png

4. 自定义可拖动ProgressBar

上面简单的修改了ProgressBar的样式，且通过按钮来改变进度条Progress的值，接下来自定义一个可拖动的ProgressBar，原理很简单，只需要继承Progressbar控件，为其添加触摸事件onTouchEvent，通过公式将移动触摸的坐标转换成progress值设置给ProgressBar即可；

自定义ProgressBar <CustomProgressBar.kt>

class CustomProgressBar(context : Context, attrs : AttributeSet) : ProgressBar(context, attrs) {

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        when (event?.action) {
            MotionEvent.ACTION_DOWN -> {
                Log.i("CustomProgressBar : ", "ACTION_DOWN")
            }

            MotionEvent.ACTION_MOVE -> {
                var i = 0
                // 水平 从左往右拖动
                i = (max * event.x / width).toInt()

                progress = i
                Log.i("Progress", progress.toString() + "")
                onSizeChanged(width, height, 0, 0)
            }

            MotionEvent.ACTION_UP -> {
                Log.i("CustomProgressBar : ", "ACTION_UP")
            }
        }
        return true
    }
}

可拖动CustomProgressBar的使用 <activity_progress_bar.xml>

可拖动自定义ProgressBar写好之后只需要将CustomProgressBar控件添加到布局文件中就可以拖动改变进度条大小了；

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProgressBarActivity">

    <com.example.bardemo.CustomProgressBar
        android:id="@+id/custom_progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="88"
        android:layout_margin="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

5. 自定义垂直ProgressBar

自定义垂直从下往上拖动的ProgressBar有两个地方需要修改：

(1) 在drawable中修改progress的样式，将clip的clipOrientation属性设置为vertical，且重心设置在底部；
(2) 自定义可拖动ProgressBar的progress值的获取需要由水平改为垂直方向的；

垂直ProgressBar的样式设置 <vertical_style.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">
        <shape android:shape="rectangle">
            <corners android:radius="13dp" />
            <solid android:color="#3c3c3c" />
        </shape>
    </item>

    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <inset
            android:insetTop="10dp"
            android:insetRight="10dp"
            android:insetBottom="10dp"
            android:insetLeft="10dp">
            <clip
                android:clipOrientation="vertical"
                android:gravity="bottom">
                <shape>
                    <gradient android:startColor="@color/teal_200"
                        android:endColor="@color/purple_200"
                        android:angle="90"/>
                    <corners android:radius="10dp"/>
                </shape>
            </clip>
        </inset>
    </item>

</layer-list>

ProgressBar的水平或垂直方向，以及进度条progress的中心都是在clip中通过修改属性设置；

这里进度条的颜色没有用solid设置，而是使用gradient来设置的，gradient是shape中用来设置渐变色的属性，可以通过添加start、center、end的颜色，以及通过angle改变渐变角度来自定义修改进度条样式；

自定义垂直ProgressBar <CustomVerticalProgressBar.kt>

class CustomVerticalProgressBar(context : Context, attrs : AttributeSet) : ProgressBar(context, attrs) {

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        when (event?.action) {
            MotionEvent.ACTION_DOWN -> {
                Log.i("CustomProgressBar : ", "ACTION_DOWN")
            }

            MotionEvent.ACTION_MOVE -> {
                var i = 0
                // 水平 由左往右
                // i = (max * event.x / width).toInt()

                // 水平 由右往左
                // i = max - (max * event.x / width).toInt()

                // 垂直 由上往下
                // i = (max * event.y / height).toInt()

                // 垂直 由下往上
                i = max - (max * event.y / height).toInt()

                progress = i
                Log.i("Progress", progress.toString() + "")
                onSizeChanged(width, height, 0, 0)
            }

            MotionEvent.ACTION_UP -> {
                Log.i("CustomProgressBar : ", "ACTION_UP")
            }
        }
        return true
    }
}

可拖动ProgressBar进度条的拖动方向需要根据进度条的水平垂直方向，以及重心位置进行修改：

水平由左往右：i = (max * event.x / width).toInt()

水平由右往左：i = max - (max * event.x / width).toInt()

垂直由上往下：i = (max * event.y / height).toInt()

垂直由下往上：i = max - (max * event.y / height).toInt()

自定义垂直ProgressBar的使用 <activity_progress_bar.xml>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ProgressBarActivity">

    <com.example.bardemo.CustomVerticalProgressBar
        android:id="@+id/custom_progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="50dp"
        android:layout_height="300dp"
        android:progressDrawable="@drawable/vertical_style"
        android:progress="96"
        android:layout_margin="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>