Нижняя панель навигации
BottomNavigationView представляет собой новый компонент пользовательского интерфейса в стиле Material Design. Этот виджет был создан для замены верхнего меню приложения, чтобы пользователям не пришлось тянуться пальцем через все 5.5″ дисплея для нажатия одной кнопки. Это обеспечивает более простую навигацию и может освежить дизайн вашего приложенияПример работы с BottomNavigationView в Android
Виджет BottomNavigationView — это наследник FrameLayout с внутренними контейнерами ViewGroup для элементов меню. Это достаточно легковесный и просто в использовании виджет в стилях материального дизайна.
Переходим к работе. Создайте новый проект в Android Studio или добавьте виджет
BottomNavigationView из библиотеки поддержки (Design Support library) в существующий проект.
Сама библиотека поддержки должна быть добавлена в зависимостях файла gradle.build на уровне проекта:
// 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:
<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.
Комментариев нет:
Отправить комментарий