Kotlin을 사용하는 Android ProgressBar
이 튜토리얼에서는 Kotlin을 사용하여 Android 애플리케이션에서 ProgressBar에 대해 논의하고 구현합니다.
ProgressBar란 무엇입니까?
ProgressBar UI 요소는 앱 화면에 진행률을 표시하는 데 사용됩니다. ProgressBar를 사용하여 앱 화면에 다운로드/업로드 진행률을 표시할 수 있습니다.
진행률 표시줄 유형
진행률 표시줄에는 두 가지 유형이 있습니다.
- Determinate ProgressBar - 완료된 진행률을 추적하고 표시할 수 있을 때 사용됩니다.
- Indeterminate ProgressBar - 멈출 때까지 무한히 진행됩니다.
ProgressDialog는 Alert Dialog 내부에 ProgressBar를 보유합니다. ProgressDialog는 이제 화면을 차단하는 동안 대화 상자에 긴 진행률을 표시하는 것이 좋지 않기 때문에 더 이상 사용되지 않습니다.
ProgressBar 속성
ProgressBar의 중요한 속성 중 일부는 다음과 같습니다.
android:indeterminate
- ProgressBar의 유형을 나타내는 부울 값을 지정하는 데 사용android:max
- 진행률의 상한android:min
- 진행률의 하한android:progress
- 진행률이 증가하는 단계입니다.android:minWidth
및minHeight
- ProgressBar의 크기를 정의하는 데 사용android:progressBarTint
- ProgressBar의 완료된 진행률의 색조 색상android:progressBarBackgroundTint
- ProgressBar의 완료된 진행률의 색조 색상style
- ProgressBar의 스타일을 설정하는 데 사용됩니다. 기본적으로 원형입니다. Horizontal ProgressBar 의 스타일을 android:progressDrawable
- 진행에 대한 드로어블을 설정하는 데 사용됩니다.android:secondaryProgress
- 보조 진행률 값을 나타냅니다. 하위 다운로드/하위 작업 진행 상황을 표시하려는 경우에 사용됩니다.
@style/Widget.AppCompat.ProgressBar.Horizontal
로 설정할 수 있습니다.\n기본 색조 색상은 styles.xml
에 정의된 colorAccent
로 설정됩니다.
ProgressBar XML 레이아웃
기본 원형 불확정 ProgressBar XML 레이아웃은 다음과 같습니다.
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:minWidth="50dp" />
다음 섹션에서는 Kotlin을 사용하여 Android 앱에서 다양한 유형의 ProgressBar를 구현합니다.
Android ProgressBar Kotlin 앱 프로젝트 구조
1. XML 레이아웃 코드
activity_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>
마지막 진행률 표시줄에서 가로 ProgressBar에 진행률 드로어블을 설정했습니다. drawable.xml 파일은 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
}
}
다음 링크에서 프로젝트를 다운로드할 수 있습니다. AndroidlyProgressBar