Поиск по сайту:

Android ProgressBar с использованием Kotlin

В этом руководстве мы обсудим и реализуем ProgressBar в нашем приложении для Android с использованием Kotlin.

Что такое ProgressBar?

Элемент пользовательского интерфейса ProgressBar используется для отображения прогресса на экране приложения. Мы можем использовать ProgressBar, чтобы показать ход загрузки/выгрузки на экране приложения.

Типы индикаторов выполнения

Есть два типа Progress Bar.

  1. Определить ProgressBar — используется, когда вы можете отслеживать и отображать выполненный прогресс.
  2. Неопределенный ProgressBar — этот индикатор работает бесконечно, пока не остановится.

ProgressDialog будет содержать 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. По умолчанию он круглый. Мы можем установить стиль как @style/Widget.AppCompat.ProgressBar.Horizontal для Horizontal ProgressBar
  • android:progressDrawable — используется для установки графического элемента для прогресса.
  • android:secondaryProgress — указывает вторичное значение хода выполнения. Это используется, когда мы хотим показать прогресс подзагрузок/подзадач.

Цвета оттенка по умолчанию устанавливаются в colorAccent, определенные в styles.xml.

XML-макет ProgressBar

Базовый круговой неопределенный XML-макет ProgressBar выглядит следующим образом:

<ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="50dp"
        android:minWidth="50dp" />

В следующем разделе мы реализуем различные типы ProgressBars в нашем приложении для Android с помощью Kotlin.

Структура проекта Android ProgressBar Kotlin App

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>

В этом drawable мы создали различные состояния drawable. Все они имеют круглую форму, и каждый слой будет отображаться для разных состояний — простоя, вторичного прогресса, основного прогресса.

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