Реалізація 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>
Файл меню для 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
