[Kotlin] Use the style attribute of ProgressBar to realize the circular progress bar, and the progress uses the gradient gradient effect

Android ProgressBar provides two kinds of progress bars, horizontal and circular, by default. The horizontal progress bar ProgressBaris realized by the control, while the circular progress bar ProgressDialogis realized by the control. If you want to ProgressBarset the control as a circular progress bar, you can use ProgressBarthe style property of to achieve it.

First, add a control to the layout file ProgressBarand set its style as @style/Widget.AppCompat.ProgressBar:

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/Widget.AppCompat.ProgressBar"
    android:indeterminate="true" />

In the above code, we set ProgressBarthe style of @style/Widget.AppCompat.ProgressBarand indeterminateset the attribute to true, indicating that the indeterminate mode is used.

Then, in the styles.xml file, define a Widget.AppCompat.ProgressBarstyle named , set its parent style to Widget.AppCompat.ProgressBar.Horizontal, and android:indeterminateDrawableset its style attribute to a Drawable of a circular progress bar:

<style name="Widget.AppCompat.ProgressBar" parent="Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:indeterminateDrawable">@drawable/circular_progress_bar</item>
</style>

In the above code, we define a Widget.AppCompat.ProgressBarstyle named , set its parent style to Widget.AppCompat.ProgressBar.Horizontal, and android:indeterminateDrawableset its style property to a Drawable of a circular progress bar.

circular_progress_bar.xmlFinally, create a Drawable file named in the drawable folder , which defines the shape and color of a circular progress bar:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="360" >

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="true" >

        <size
            android:width="48dp"
            android:height="48dp" />

        <gradient
            android:centerColor="#ff0000"
            android:endColor="#00ff00"
            android:startColor="#0000ff"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

In the above code, we first use <rotate>the label to rotate the circular progress bar 360 degrees, then use the <shape>label to define a ring shape, and set its internal and external radius ratio, thickness ratio, size and other properties. Finally, use <gradient>the tag to define the color of the ring as a gradient.

After running the code, a circular progress bar will be displayed with a gradient color. Properties such as color and size can be modified circular_progress_bar.xmlin the file to change the appearance of the progress bar.

set progress

In Kotlin, the progress can be set by calling ProgressBarthe control's setProgress()method, for example:

val progressBar = findViewById<ProgressBar>(R.id.progressBar)
progressBar.progress = 50 // 设置进度为 50

In the code above, we first get an instance of a control called progressBarand ProgressBarthen call its setProgress()method to set the progress to 50.

In order to better control the animation effect of the progress bar, you can also use ObjectAnimatorthe class to realize the animation effect of the progress bar, for example:

val progressBar = findViewById<ProgressBar>(R.id.progressBar)
val animator = ObjectAnimator.ofInt(progressBar, "progress", 0, 100)
animator.duration = 1000 // 动画持续时间为 1 秒
animator.start() // 开始动画

In the above code, we first obtained an instance of the control named progressBar, ProgressBarthen created an ObjectAnimatorobject, set its target object to progressBar, set its property name to "progress", start value is 0, and end value is 100. Then, we set the duration of the animation to 1 second and call start()the method to start the animation.

Use ObjectAnimatorthe class to achieve more flexible animation effects, such as setting interpolators, animation listeners, etc. Different animation effects can be used according to specific needs.