使用Kotlin编写Android的进度条
在本教程中,我们将使用Kotlin讨论并在我们的Android应用程序中实现进度条。
进度条是什么?
进度条UI元素用于在应用屏幕上显示进度。我们可以使用进度条来显示应用屏幕上的下载/上传进度。
进度条类型
有两种类型的进度条。
- 确定进度条 – 当你可以追踪和展示完成的进度时使用。
不确定进度条 – 这一个会不断地进行直到停止。
因为在对话框中显示进度较长时会阻塞屏幕,所以现在不再推荐使用ProgressDialog。一个ProgressDialog会在一个警告对话框中显示一个进度条。
进度条属性
ProgressBar的一些重要特点包括:
- android:indeterminate – used to specify the boolean value indicating the type of the ProgressBar
- android:max – The upper limit of the progress
- android:min – The lower limit of the progress
- android:progress – The steps by which the progress would be incremented.
- android:minWidth and minHeight – Used to define the dimensions of the ProgressBar
- android:progressBarTint – The tint color of the progress completed of the ProgressBar
- android:progressBarBackgroundTint – The tint color of the progress completed of the ProgressBar
- style – Used to set the style of the ProgressBar. By default it is circular. We can set the style as @style/Widget.AppCompat.ProgressBar.Horizontal for the Horizontal ProgressBar
- android:progressDrawable – Is used to set a drawable for the progress.
- android:secondaryProgress – Indicates the secondary progress value. This is used when we want to show the sub-downloads/subtasks progress.
默认的着色颜色设置为styles.xml中定义的colorAccent颜色。
进度条的XML布局
一个基本的圆形不确定 ProgressBar 的 XML 布局如下:
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:minWidth="50dp" />
在接下来的部分中,我们将使用Kotlin在我们的Android应用程序中实现各种类型的进度条。
安卓进度条Kotlin应用项目结构
![android progressbar kotlin project structure](https://cdn.silicloud.com/blog-img/blog/img/65647f77a4b2f92e6c72ddc9/16-0.png)
1. XML布局代码
活动_main.xml布局的代码如下。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:minWidth="50dp" />
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:minHeight="50dp"
android:minWidth="200dp" />
<TextView
android:id="@+id/textViewHorizontalProgress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0" />
<ProgressBar
android:id="@+id/progressBarHorizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="false"
android:max="100"
android:minHeight="50dp"
android:minWidth="200dp"
android:progress="1"
android:progressBackgroundTint="@android:color/darker_gray"
android:progressTint="@color/colorPrimary" />
<Button
android:id="@+id/btnProgressBarHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="horizontalDeterminate"
android:text="DETERMINATE HORIZONTAL PROGRESS BAR" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ProgressBar
android:id="@+id/progressBarSecondary"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:minHeight="150dp"
android:padding="8dp"
android:minWidth="150dp"
android:progressDrawable="@drawable/progress_states" />
<TextView
android:id="@+id/textViewPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#000" />
<TextView
android:id="@+id/textViewSecondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_below="@+id/progressBarSecondary"
android:textColor="@color/colorPrimaryDark" />
</RelativeLayout>
<Button
android:id="@+id/btnProgressBarSecondary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DETERMINATE SECONDARY PROGRESS BAR" />
</LinearLayout>
在最后一个进度条中,我们在水平进度条上设置了一个进度可绘制。可绘制文件为progress_states.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="oval">
<stroke
android:width="4dp"
android:color="@color/colorPrimary" />
<solid android:color="@android:color/white" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="@android:color/black" />
<solid android:color="@android:color/white" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape android:shape="oval">
<stroke
android:width="4dp"
android:color="@color/colorAccent" />
<solid android:color="#F288F8" />
</shape>
</clip>
</item>
</layer-list>
在这个图形中,我们创建了图形的不同状态。所有状态都是圆形的,并且每个图层都会显示在不同的状态下 – 空闲状态、二级进度、一级进度。
2. Kotlin主活动代码
让我们来看一下MainActivity.kt中的Kotlin类代码。
package net.androidly.androidlyprogressbar
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
var isStarted = false
var progressStatus = 0
var handler: Handler? = null
var secondaryHandler: Handler? = Handler()
var primaryProgressStatus = 0
var secondaryProgressStatus = 0
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
handler = Handler(Handler.Callback {
if (isStarted) {
progressStatus++
}
progressBarHorizontal.progress = progressStatus
textViewHorizontalProgress.text = "${progressStatus}/${progressBarHorizontal.max}"
handler?.sendEmptyMessageDelayed(0, 100)
true
})
handler?.sendEmptyMessage(0)
btnProgressBarSecondary.setOnClickListener {
primaryProgressStatus = 0
secondaryProgressStatus = 0
Thread(Runnable {
while (primaryProgressStatus < 100) {
primaryProgressStatus += 1
try {
Thread.sleep(1000)
} catch (e: InterruptedException) {
e.printStackTrace()
}
startSecondaryProgress()
secondaryProgressStatus = 0
secondaryHandler?.post {
progressBarSecondary.progress = primaryProgressStatus
textViewPrimary.text = "Complete $primaryProgressStatus% of 100"
if (primaryProgressStatus == 100) {
textViewPrimary.text = "All tasks completed"
}
}
}
}).start()
}
}
fun startSecondaryProgress() {
Thread(Runnable {
while (secondaryProgressStatus < 100) {
secondaryProgressStatus += 1
try {
Thread.sleep(10)
} catch (e: InterruptedException) {
e.printStackTrace()
}
secondaryHandler?.post {
progressBarSecondary.setSecondaryProgress(secondaryProgressStatus)
textViewSecondary.setText("Current task progress\n$secondaryProgressStatus% of 100")
if (secondaryProgressStatus == 100) {
textViewSecondary.setText("Single task complete.")
}
}
}
}).start()
}
fun horizontalDeterminate(view: View) {
isStarted = !isStarted
}
}
![android progress bar kotlin app output](https://cdn.silicloud.com/blog-img/blog/img/65647f77a4b2f92e6c72ddc9/26-0.gif)