Нижняя панель навигации BottomNavigationView
представляет собой новый компонент пользовательского интерфейса в стиле Material Design. Этот виджет был создан для замены верхнего меню приложения, чтобы пользователям не пришлось тянуться пальцем через все 5.5″ дисплея для нажатия одной кнопки. Это обеспечивает более простую навигацию и может освежить дизайн вашего приложения
Пример работы с BottomNavigationView в Android
Виджет BottomNavigationView — это наследник FrameLayout с внутренними контейнерами ViewGroup для элементов меню. Это достаточно легковесный и просто в использовании виджет в стилях материального дизайна.
Переходим к работе. Создайте новый проект в Android Studio или добавьте виджет BottomNavigationView
из библиотеки поддержки (Design Support library) в существующий проект.
Сама библиотека поддержки должна быть добавлена в зависимостях файла gradle.build на уровне проекта:
1 2 3 4 5 |
// gradle.build ... compile 'com.android.support:appcompat-v7:26.0.0-alpha1' compile 'com.android.support:design:26.0.0-alpha1' ... |
Обратите внимание, что версия библиотеки у вас в проект может быть другая.
В этом примере я покажу простое приложение с нижней панелью навигации BottomNavigationView
с тремя пунктами меню и фрагментами.
Посмотрим на макет activity_main.xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.javadevblog.bottomnavigationviewapp.MainActivity"> <FrameLayout android:id="@+id/fl_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <android.support.design.widget.BottomNavigationView android:id="@+id/navigation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:background="@android:color/darker_gray" app:menu="@menu/navigation" /> </LinearLayout> |
Из листинга выше видно, что FrameLayout (место для фрагментов) занимает все пространство, вытесняя BottomNavigationView вниз экрана. Это довольно частая практика и позволяет обойтись без ненужных дополнительных вложеностей в макете.
Само меню выглядит так:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/navigation_home" android:icon="@drawable/ic_home_black_24dp" android:title="@string/title_home" /> <item android:id="@+id/navigation_dashboard" android:icon="@drawable/ic_dashboard_black_24dp" android:title="@string/title_dashboard" /> <item android:id="@+id/navigation_notifications" android:icon="@drawable/ic_notifications_black_24dp" android:title="@string/title_notifications" /> </menu> |
Где android:icon
— векторная иконка действия на пункте меню. Эти иконки, а также весь проект вы найдете по ссылке в конце статьи.
Теперь создадим 3 идентичных фрагмента. В статье ниже приводится лишь 1 фрагмент и его макет — остальные 2 будут точно такие же.
Листинг класса HomeFragment:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
package com.javadevblog.bottomnavigationviewapp; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class HomeFragment extends Fragment { public HomeFragment() { } public static HomeFragment newInstance() { return new HomeFragment(); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_home, container, false); } } |
Ничего лишнего: обязательный конструктор и метод создание нового экземпляра фрагмента.
Содержимое макета fragment_home.xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fl_home" tools:context="com.javadevblog.bottomnavigationviewapp.HomeFragment"> <TextView android:id="@+id/tv_home" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" android:text="@string/title_home" android:textAppearance="?android:attr/textAppearanceLarge" /> </FrameLayout> |
Просто показываем виджет TextView
с текстом «Home». Для других фрагментов этот текст будет «Dashboard» и «Notifications».
Содержимое класса MainActivity:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
package com.javadevblog.bottomnavigationviewapp; import android.os.Bundle; import android.support.annotation.NonNull; import android.support.design.widget.BottomNavigationView; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentTransaction; import android.support.v7.app.AppCompatActivity; import android.view.MenuItem; public class MainActivity extends AppCompatActivity { private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener = new BottomNavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switch (item.getItemId()) { case R.id.navigation_home: loadFragment(HomeFragment.newInstance()); return true; case R.id.navigation_dashboard: loadFragment(DashboardFragment.newInstance()); return true; case R.id.navigation_notifications: loadFragment(NotificationsFragment.newInstance()); return true; } return false; } }; private void loadFragment(Fragment fragment) { FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); ft.replace(R.id.fl_content, fragment); ft.commit(); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation); navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener); } } |
Добавили обработчик нажатия на пункты нижнего меню и написали простой метод loadFragment()
, который на вход принимает Fragment.
Теперь запустим приложение и посмотрим результат:
Как видите, фрагменты переключаются по нажатию на пункты нижнего меню виджета BottomNavigationView
. Это довольно простой и удобный способ придать своему приложению новизны и оставаться в тренде разработки под Android.
Ссылка на проект в Android Studio.
Подписывайтесь на обновления сайта, а также следите на новостями в соц. сетях!