웹사이트 검색

Kotlin을 사용하는 Android ProgressBar


이 튜토리얼에서는 Kotlin을 사용하여 Android 애플리케이션에서 ProgressBar에 대해 논의하고 구현합니다.

ProgressBar란 무엇입니까?

ProgressBar UI 요소는 앱 화면에 진행률을 표시하는 데 사용됩니다. ProgressBar를 사용하여 앱 화면에 다운로드/업로드 진행률을 표시할 수 있습니다.

진행률 표시줄 유형

진행률 표시줄에는 두 가지 유형이 있습니다.

  1. Determinate ProgressBar - 완료된 진행률을 추적하고 표시할 수 있을 때 사용됩니다.
  2. Indeterminate ProgressBar - 멈출 때까지 무한히 진행됩니다.

ProgressDialog는 Alert Dialog 내부에 ProgressBar를 보유합니다. ProgressDialog는 이제 화면을 차단하는 동안 대화 상자에 긴 진행률을 표시하는 것이 좋지 않기 때문에 더 이상 사용되지 않습니다.

ProgressBar 속성

ProgressBar의 중요한 속성 중 일부는 다음과 같습니다.

  • android:indeterminate - ProgressBar의 유형을 나타내는 부울 값을 지정하는 데 사용
  • android:max - 진행률의 상한
  • android:min - 진행률의 하한
  • android:progress - 진행률이 증가하는 단계입니다.
  • android:minWidthminHeight - ProgressBar의 크기를 정의하는 데 사용
  • android:progressBarTint - ProgressBar의 완료된 진행률의 색조 색상
  • android:progressBarBackgroundTint - ProgressBar의 완료된 진행률의 색조 색상
  • style - ProgressBar의 스타일을 설정하는 데 사용됩니다. 기본적으로 원형입니다. Horizontal ProgressBar
  • 의 스타일을 @style/Widget.AppCompat.ProgressBar.Horizontal로 설정할 수 있습니다.\n
  • android:progressDrawable - 진행에 대한 드로어블을 설정하는 데 사용됩니다.
  • android:secondaryProgress - 보조 진행률 값을 나타냅니다. 하위 다운로드/하위 작업 진행 상황을 표시하려는 경우에 사용됩니다.

기본 색조 색상은 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