• 0
  • Contact Me: alexbashy9001@gmail.com

Progress indicators (PI)

PI – виджет из концепции MaterialDesign, который позволяет отобразить индикатор загрузки в то время, когда Вы загружаете какие-либо данные для пользователя.

Это чаще всего используется при загрузки приложения или получения каких-либо данных в сети.

На самом деле Ваше приложение должно работать реактивно и по-хорошему у Вас почти нигде не должен встречаться этот виджет.

Давайте познакомимся с ним.

Для того, что бы его использовать Вы должны использовать версию библиотеки Material Design не ниже – 1.3.0-alpha04

После подключения нужной версии Material Design – мы должны разместить шаблон виджета в xml файле Activity. Виджет PI бывает двух видов – в формате полоски и вращающегося круга.

Для создания виджета в виде полоски мы размещаем вот такой xml код:

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indicatorColor="@color/colorPrimary"
app:trackColor="@color/cardview_light_background"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="@id/visibleLinear"
android:indeterminate="true"/>

Для создания виджета в виде вращающегося круга мы размещаем вот такой xml код:

<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/circule"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/linear"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:indicatorColor="@color/colorPrimary"
app:trackColor="@color/cardview_light_background"
android:layout_marginTop="20dp"
android:indeterminate="true"/>

Давайте разберем несколько очень интересных атрибутов.

Для установки цвета всего индикатора загрузки мы применяем:

app:trackColor="@color/cardview_light_background"

Для установки цвета участка индикатора загрузки, который символизирует долю загруженных данных мы применяем:

app:indicatorColor="@color/colorPrimary"

А вот этот атрибут устанавливается если Вы хотите, что бы Ваш индикатор перемещался постоянно

android:indeterminate="true"

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

PI имеет три метода – show, hide, visibility

Метод show – запускает загрузчик

Метод hide – останавливает загрузчик

Метод visibility – скрывает или отображает загрузчик. Visibility имеет три значения – Visible(отображать), Invisible(не отображать, с регистрацией места под себя – то есть получается пустая область), Gone(не отображать, без регистрацией места под себя – то есть получается, что как будто его и нет)

Давайте над нашими PI разместим три кнопки. Вот их код в xml шаблоне Activity:

<Button
android:id="@+id/showLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/showLinear"
app:icon="@drawable/location"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

<Button
android:id="@+id/hideCircule"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toBottomOf="@id/showLinear"
android:text="@string/hideCircule"
app:icon="@drawable/location"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

<Button
android:id="@+id/visibleLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toBottomOf="@id/hideCircule"
android:text="@string/visibleLinear"
app:icon="@drawable/location"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

Первая кнопка будет запускать через метод show() линейный индикатор.

Вторая кнопка будет останавливать через метод hide() вращающийся индикатор.

Третья кнопка будет отображать через метод visible со значением VISIBLE линейный индикатор.

Мы переходим в класс нашего Activity и в методе обработки тапа по нашим кнопкам прописываем функционал.

При тапе по первой кнопке – запускаем линейный индикатор

При тапе по второй кнопке – останавливаем вращающийся индикатор

При тапе по третьей кнопке – отображаем линейный индикатор

override fun onClick(view: View) {

when(view.id) {
R.id.showLinear -> binding?.linear?.show()
R.id.hideCircule -> binding?.circule?.hide()
R.id.visibleLinear -> binding?.linear?.visibility = View.VISIBLE

}
}

В методе onCreate мы по умолчанию устанавливаем линейный индикатор в состоянии остановленный, а вращающийся в состояние активный

binding?.linear?.hide()
binding?.circule?.show()

Теперь наши индикаторы начнут функционировать

PI – как и любой виджет из концепции Material Design имеет не только дополнительные атрибуты для настройки внешнего вида, но и шаблонные стили. С ними Вы можете ознакомиться вот на этой странице

Код из этого урока

activity_progress.xml – xml шаблон Activity

<?xml version="1.0" encoding="utf-8"?>

<layout
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">

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
tools:context=".Progress">

<Button
android:id="@+id/showLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toTopOf="parent"
android:text="@string/showLinear"
app:icon="@drawable/location"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

<Button
android:id="@+id/hideCircule"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toBottomOf="@id/showLinear"
android:text="@string/hideCircule"
app:icon="@drawable/location"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>

<Button
android:id="@+id/visibleLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintTop_toBottomOf="@id/hideCircule"
android:text="@string/visibleLinear"
app:icon="@drawable/location"
android:background="@color/colorPrimary"
style="@style/Widget.MaterialComponents.Button.Icon"/>


<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indicatorColor="@color/colorPrimary"
app:trackColor="@color/cardview_light_background"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="@id/visibleLinear"
android:indeterminate="true"/>

<!-- Circular progress indicator -->
<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/circule"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/linear"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:indicatorColor="@color/colorPrimary"
app:trackColor="@color/cardview_light_background"
android:layout_marginTop="20dp"
android:indeterminate="true"/>



</androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Progress.kt – класс Activity

class Progress : AppCompatActivity(),View.OnClickListener {

private var binding:ActivityProgressBinding? = null


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

binding = DataBindingUtil.setContentView(this, R.layout.activity_progress)

binding?.linear?.hide()
binding?.circule?.show()

binding?.showLinear?.setOnClickListener(this)
binding?.hideCircule?.setOnClickListener(this)
binding?.visibleLinear?.setOnClickListener(this)

}

override fun onClick(view: View) {

when(view.id) {
R.id.showLinear -> binding?.linear?.show()
R.id.hideCircule -> binding?.circule?.hide()
R.id.visibleLinear -> binding?.linear?.visibility = View.VISIBLE

}
}

}

ДОМАШНЕЕ ЗАДАНИЕ

Создайте два индикатора загрузки – линейный и вращающийся. Примените для них методы – show, hide, visibility. Результат в формате видео пришлите на Whats App – +79612777611

Leave a Reply

Your email address will not be published. Required fields are marked *