Реалізація BottomAppBar. Частина 2: Меню і елемент управління Navigation Drawer

 

У попередній статті ми обговорили основи BottomAppBar, який не так давно представили на Google I/O 2018 як частина Material компонентів для Android. Ми розглянули спосіб реалізації BottomAppBar і вивчили його атрибути. Також BottomAppBar може відображати елементи меню і елемент управління Navigation Drawer, які раніше ми використовували в тулбарі.

 

 

Тепер елементи меню і елемент управління Navigation Drawer повинні бути частиною BottomAppBar. А зараз давайте подивимося, як використовувати меню і Navigation Drawer за допомогою BottomAppBar.

 

Меню BottomAppBar

 

Спочатку необхідно створити .xml файл в каталозі res/menu для елементів меню, які повинні бути показані в BottomAppBar. Ось мій файл bottomappbar_menu.xml:

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/app_bar_fav"
android:icon="@drawable/baseline_favorite_white_24"
android:title="@string/action_favorite"
app:showAsAction="ifRoom"/>

<item
android:id="@+id/app_bar_search"
android:icon="@drawable/baseline_search_white_24"
android:title="@string/action_search"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/app_bar_settings"
android:title="@string/action_settings"
app:showAsAction="never"/>
</menu>

 

У MainActivity, в якій ви викликаєте setSupportActionBar(bottom_app_bar), додайте наступний код в метод:

 

override fun onCreateOptionsMenu(menu: Menu): Boolean {
 val inflater = menuInflater
 inflater.inflate(R. menu.bottomappbar_menu, menu)
 return true
}

 

Тепер елементи меню повинні відображатися в BottomAppBar.

 

Обробка кліків елементами меню

 

Для обробки кліків елементами меню необхідно додати наступний код в MainActivity:

 

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
 when (item!!.itemId) {
 R. id.app_bar_fav -> toast("Fav menu item is clicked!")
 R. id.app_bar_search -> toast("Search menu item is clicked!")
 R. id.app_bar_settings -> toast("Settings item is clicked!")
}

 return true
}

 

Тепер меню у BottomAppBar налаштоване і повинно функціонувати правильно:

 

 

Елемент управління Navigation Drawer в BottomAppBar

 

Зазвичай Navigation Drawer реалізується за допомогою NavigationView, розташованого в лівій частині програми. З BottomAppBar поведінка Navigation Drawer змінилося. Тепер Navigation Drawer являє собою модальне вікно в нижній частині додатка.

 

 

Спершу необхідно створити саме модальне вікно:

 

fragment_bottomsheet.xml

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.google.android.material.navigation.NavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="@menu/bottom_nav_drawer_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

Читайте також  Як використовувати "Tobii Eye Tracker 4C" для спілкування з дитиною, яка не може говорити і рухатися (СМА, ДЦП, БАС)

Файл меню для Navigation Drawer також повинен бути розташований в res/menu.

 

bottom_nav_drawer_menu.xml

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
 <group android:checkableBehavior="none">
<item
android:id="@+id/nav1"
android:icon="@drawable/baseline_exposure_plus_1_black_24"
 android:title="@string/nav_item1" />
<item
android:id="@+id/nav2"
android:icon="@drawable/baseline_replay_10_black_24"
 android:title="@string/nav_item2" />
<item
android:id="@+id/nav3"
android:icon="@drawable/baseline_forward_10_black_24"
 android:title="@string/nav_item3" />
</group>
</menu>

 

Потім потрібно створити клас, що розширює BottomSheetDialogFragment, який і буде створювати модальне вікно:

 

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.google.android.material.bottomsheet.BottomSheetDialogFragment

class BottomNavigationDrawerFragment: BottomSheetDialogFragment() {

 override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
 return inflater.inflate(R. layout.fragment_bottomsheet, container, false)
}
}

 

Наступні рядки коду потрібно додати в метод onOptionsItemSelected, який використовується для обробки кліків елементами меню. При кліку по значку навігації буде створюватися екземпляр об’єкта BottomNavigationDrawerFragment і відображатися Navigation View.

 

android.R.id.home -> {
 val bottomNavDrawerFragment = BottomNavigationDrawerFragment()
 bottomNavDrawerFragment.show(supportFragmentManager, bottomNavDrawerFragment.tag)
}

 

Ось код макета MainActivity:

 

activity_main.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">

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

 

А для кліків по елементам у вікні Navigation Drawer ви можете використовувати наступний код всередині класу BottomNavigationDrawerFragment:

 

navigation_view.setNavigationItemSelectedListener { menuItem ->
 // Bottom Navigation Drawer menu item clicks
 when (menuItem!!.itemId) {
 R. id.nav1 -> context!!.toast(getString(R. string.nav1_clicked))
 R. id.nav2 -> context!!.toast(getString(R. string.nav2_clicked))
 R. id.nav3 -> context!!.toast(getString(R. string.nav3_clicked))
}
true
}

 

 

Повний вихідний код цієї статті можна знайти на Github. Для тих, кого зацікавила ця тема, читайте попередню частину цієї статті.

 

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

Степан Лютий

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

You may also like...

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

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