Впровадження BottomAppBar III: поведінка для Android

Один з нових компонентів Android для матеріальних матеріалів, який представлений в Google I / O 2018, - BottomAppBar. Перемістивши меню управління та дію навігаційного вікна в нижній частині екрана програми, BottomAppBar приносить новий вигляд додаткам Android.

У перших двох частинах нашої серії BottomAppBar ми представили BottomAppBar і обговорили його атрибути. Крім того, ми пояснили, як керувати навігаційним управлінням і меню дій за допомогою BottomAppBar. Якщо ви ще не прочитали їх, ви можете знайти перші дві частини цієї серії нижче.

Одне напевне - це те, що компоненти не є статичними в додатку. Вони можуть рухати, перетворювати або викликати дію, тобто мають поведінку. Матеріал дизайну має на меті сформувати рамку і для цієї поведінки. У цій статті ми обговоримо деталі щодо реалізації пропозицій щодо поведінки для BottomAppBar, які представлені на сторінці Матеріальні рекомендації BottomAppBar.

Макет BottomAppBar для вторинних екранів

Поведінка

Макет

Перша інструкція щодо поведінки - на макеті BottomAppBar. Ось що пропонується:

Щоб підтримати наміри різних розділів програми, макет і дії нижньої панелі додатка можна змінити відповідно до кожного екрану.
Наприклад, екрани можуть відображати більше або менше дій відповідно до того, що найкраще відповідає вмісту екрана.
Настанова про поведінку макета для BottomAppBar

Виходячи з цього керівництва, пропонується використовувати макет BottomAppBar, що демонструє кілька дій у меню дій з централізованим FAB на первинних екранах. У вторинних екранах, які спрацьовують на первинних екранах, макет BottomAppBar повинен складатися з кінця FAB та деяких додаткових пунктів меню дій. Переходи макетів цих двох випадків повинні бути оброблені належним чином. Подарунок зліва - демонстрація цих рекомендацій.

Давайте подивимось, як ми реалізували цю поведінку. У розділі res / menu є два xml-файли для меню дій на кожному екрані.

Коли запускається дія переходу екрана, наприклад, в нашому випадку натискається кнопка TOGGLE SCREEN, макет BottomAppBar, що включає меню дій, і FAB повинні змінитися. Ось основний код поведінки макета BottomAppBar, що йде від основного екрана до вторинного.

// Сховати піктограму ящика навігації
bottom_app_bar.navigationIcon = null
// Перемістіть FAB від центру BottomAppBar до кінця
bottom_app_bar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
// Замініть меню дій
bottom_app_bar.replaceMenu (bouomappbar_menu_secondary)
// Змінити значок FAB
fab? .setImageDravable (базовий_рядний_білий_24)

Якщо ви хочете зробити переходи за допомогою анімації, потрібен додатковий код. Ви можете ознайомитись із вихідним кодом, пов’язаним у кінці цієї публікації.

Прокрутка

Прокрутка - важливий тригер поведінки для таких компонентів, як BottomAppBar. На сторінці рекомендацій щодо дизайну матеріалів запропонована поведінка для цього випадку вказана як:

Після прокрутки нижня панель додатка може з’являтися або зникати:
Прокручування вниз приховує нижню панель додатків. Якщо FAB присутній, він відключається від панелі та залишається на екрані.
Прокручування вгору виявляє нижню панель додатків і приєднується до FAB, якщо така є.

Нижче показана демонстрація разом із реалізацією поведінки BottomAppBar для приховування прокрутки.

BottomAppBar приховує поведінку прокрутки

Щоб увімкнути цю поведінку, BottomAppBar та FAB повинні бути прямими дітьми CoordinatorLayout у файлі макета. Потім вмикаємо hidOnScroll і встановлюємо прапори прокрутки для BottomAppBar наступним чином.

Цього буде достатньо для приховування поведінки прокрутки для BottomAppBar.

Підняття

Кожен компонент у світі матеріального дизайну має висоту, аналогічну нашому фізичному. У BottomAppBar висота 8dp, де вміст має 0dp, а FAB має 12dp висоти у стані спокою. Дві компоненти, про які ми згадаємо в цій статті, це нижня навігаційна ящик і закусочна, мають 16dp та 6dp відповідно.

Зазвичай снек-бар - це компонент для сповіщення користувача, що вискакує внизу екрана. Однак якщо на екрані є BottomAppBar або нижня панель навігації, поведінка Snackbar має змінитися. У цих випадках Snackbar має бути показаний над нижніми компонентами, наприклад, BottomAppBar. Ось демонстрація та відповідний код для реалізації.

Закусочна з BottomAppBar

Як ми вже згадували, навігаційний ящик має 16dp, що означає - власними словами керівництва -

"Меню, що генерується нижньою панеллю додатків (наприклад, нижня навігаційна скринька або меню переповнення), відкриваються як нижній аркуш на більш високій висоті, ніж смуга. "

Нижче представлена ​​наша нижня версія навігаційного ящика.

Поведінка в нижній частині навігаційного ящика

Нижній навігаційний ящик сам по собі є модальним нижнім аркушем і дотримується тих самих правил реалізації.

Деталі реалізації такої поведінки є такими. Файл меню XML для перегляду навігації, який буде включено до ящика, повинен бути створений у розділі res / menu.

Файл макета для нижнього фрагмента навігаційного ящика слід створити.

Цей файл компонування містить перегляд навігації та інші компоненти, що утворюють макет навігаційного ящика. Щоб надути цей макет, нам потрібен клас фрагментів, що розширює BottomSheetDialogFragment, як зазначено нижче.

При натисканні на значок управління навігаційної скриньки слід створити екземпляр цього фрагмента і показати, як вказано в наведеному нижче коді.

Після натискання піктограми управління шухлядою навігації меню нижнього навігаційного ящика відкривається у вигляді модального нижнього аркуша.

На цьому ми закінчуємо нашу серію статей BottomAppBar. Ви можете знайти вихідний код цієї статті на Github. Сміливо коментуйте та задайте питання.