Реалізація BottomAppBar. Частина 1: Material компоненти для Android

 

BottomAppBar — це один з нових Android Material компонентів, який був представлеий на Google I/O 2018. Це по суті розширення компонента Toolbar. Новий BottomAppBar розташовується в нижній частині вікна програми на відміну від тулбара, який знаходиться в його верхній частині. За допомогою цієї парадигми команда Material Design чекає нового користувацького досвіду (UX). BottomAppBar набагато більш доступний для користувача в порівнянні із звичайним тулбаром. Перемістити панель управління і меню в нижню частину програми, BottomAppBar пропонує кардинально новий дизайн для Android додатків.

Разом з BottomAppBar також змінилося розташування Floating Action Button (FAB) (рос. плаваюча кнопка дії). Тепер FAB можуть бути розміщені або «врізаючись» в BottomAppBar, або перекриваючи його.

У цій статті буде продемонстровано реалізація основ BottomAppBar разом з новими варіантами розміщення FAB.

 

Налаштування

 

Для початку потрібні невеликі початкові налаштування.

Докладне пояснення того, як включити Material компоненти для вашого Android проекту, ви можете знайти на цій сторінці. Крім того, в цьому туториале вам необхідно використовувати Android Studio 3.2 або вище.

Нижче наведені необхідні кроки налаштування.

1.Додайте репозиторій Google Maven у файлі build.gradle.

allprojects {
 repositories {
jcenter()
 maven {
 url "https://maven.google.com"
}
}
 }

 

2.Додайте залежність для material компонентів у файлі build.gradle. Майте на увазі, що версія регулярно оновлюється.

implementation 'com.google.android.material:material:1.0.0-alpha1'

 

3.Встановіть в якості compileSdkVersion і targetSdkVersion версію API мінімум для Android P (тобто 28 і вище).

 

4.Переконайтеся, що ваш додаток успадковує тему Theme.MaterialComponents, щоб BottomAppBar використав останній стиль. В якості альтернативи ви можете задавати стиль для BottomAppBar при оголошенні віджета в XML-файлі макета наступним чином:

style="@style/Widget.MaterialComponents.BottomAppBar"

 

Реалізація

Ви можете додати BottomAppBar в свій макет наступним чином. Також BottomAppBar повинен бути дочірнім елементом CoordinatorLayout.

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
 app:navigationIcon="@drawable/baseline_menu_white_24"/>

 

Читайте також  Росіяни поставили рекорд: 110 піратських фільмів на людину

 

Ви можете прив’язати до FAB BottomAppBar, вказавши id елемента BottomAppBar в атрибуті app:layout_anchor елемента FAB. BottomAppBar може обволікати FAB або FAB може перекривати BottomAppBar.

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
 app:layout_anchor="@id/bottom_app_bar" />

 

 

Атрибути BottomAppBar

 

У таблиці нижче показані атрибути BottomAppBar.

 

backgroundTint

Це атрибут встановлення кольору фону BottomAppBar.

fabAlignmentMode

Атрибут визначає положення FAB (або в центрі, або в кінці BottomAppBar). Нижче показано вирівнювання FAB в кінці BottomAppBar.

 

fabAttached

Атрибут призначений для прив’язки FAB до BottomAppBar і може бути true або false. Хоча по керівництву щодо матеріального дизайну не рекомендується розміщувати FAB за межами BottomAppBar, можливість такої установки є. Нижче показана ситуація, коли для атрибута fabAttached встановлено значення false.

 

fabCradleDiameter

Визначає діаметр «колиски», що містить FAB.

 

fabCradleRoundedCornerRadius

Задає радіус кута в точці зустрічі «колиски» і горизонтальної частини BottomAppBar.

 

fabCradleVerticalOffset

 

Вказує на зсув «колиски» знизу.

 

Ось весь XML-файл макета, який використовувався для наведених вище прикладів.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:text="Hello World!"
app:layout_constraintBottom_toBottomof="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
 app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Ми розібралися з основними засадами нового компонента Android Material — BottomAppBar, а також новими функціями FAB. Віджет BottomAppBar сам по собі не є складним у використанні, оскільки він розширює звичайний Toolbar, але він кардинально змінює підхід до проектування інтерфейсу програми.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *