Реализация BottomAppBar. Часть 1: Material компоненты для Android – Devcolibri – Android для начинающих

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

Реализация 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. Добавьте зависимость для support компонентов в файле build.gradle. Имейте в виду, что версия регулярно обновляется.

Есть два варианта использования компонента: с использованием пакета
AndroidX
и с использованием Support библиотеки.

В двух словах AndroidX – support библиотеки + новые компоненты, вынесенные в отдельный open source проект. Подробнее прочитать про AndroidX вы можете здесь.

Вы можете использовать AndroidX, когда вы начинаете проект с нуля и все библиотеки, которые вы подключаете, используют AndroidX. На практике – большинство библиотек не используют AndroidX, поэтому приходится использовать Support библиотеку.

Подключение с использованием AndroidX:

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

Подключение с использованием Support библиотеки:

implementation 'com.android.support:design:28.0.0'

3. Установите в качестве compileSdkVersion и targetSdkVersion версию API минимум для Android P (т.е. 28 и выше).

compileSdkVersion и targetSdkVersion

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

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

Реализация

Реализация показана с использованием AndroidX. Для использования Support вам просто необходимо изменять имя пакета компонентов с com.google.android.material на android.support.design. У FloatingActionButton пакет немного отличается и выглядит так для Support библиотеки: android.support.design.widget.FloatingActionButton.

Вы можете добавить 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:navigationIcon="@drawable/baseline_menu_white_24"/>

BottomAppBar

Вы можете привязать 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 обволакивает FAB

Атрибуты BottomAppBar

В таблице ниже показаны атрибуты BottomAppBar.

Атрибуты BottomAppBar

backgroundTint

Это атрибут установки цвета фона BottomAppBar.

fabAlignmentMode

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

fabAlignmentMode: end

fabAttached

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

fabAlignmentMode: end, 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: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>

Вот как выглядит итоговый код с использованием Support библиотеки:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"/>

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.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"/>


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_view"
            app:layout_anchor="@id/bottom_app_bar"/>

    </android.support.design.widget.CoordinatorLayout>

</android.support.constraint.ConstraintLayout>

Графические иконки удалены или изменены, т.к. в Support библиотеке нет необходимых ресурсов. При желании вы можете скачать их с сайта material.io и добавить в проект.

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

Вторая и третья части этой серии про BottomAppBar будут посвящены работе с меню и навигацией и реализацией различных поведений BottomAppBar в соответствии с принципами Material Design.

→ Реализация BottomAppBar. Часть 2: Меню и элемент управления Navigation Drawer
→ Реализация BottomAppBar. Часть 3: Поведения для Android

Перевод статьи «Implementing BottomAppBar I: Material Components for Android»

ПОХОЖИЕ ПУБЛИКАЦИИ

    None Found

19973
23/08/2018

14 комментариев к статье "Реализация BottomAppBar. Часть 1: Material компоненты для Android"

Добавить комментарий

Сайт использует cookie-файлы для того, чтобы вам было удобнее им пользоваться. Для продолжения работы с сайтом, вам необходимо принять использование cookie-файлов.

Я ознакомлен(а)