Сегодня мы поговорим о том, как создать навигационную панель в Android с помощью библиотеки Bottom Bar. Навигационные панели Android или Bottom Bar – это дополнительное меню над навигационной панелью Android, которое используется для быстрой навигации пользователя по наиболее используемым страницам или разделам приложения, как показано на изображении ниже.
В этом руководстве мы будем использовать библиотеку Bottom Bar, которая имитирует шаблон нижней навигации Material Design от Google.
Содержание
Создание навигационной панели на Android
Gradle настроит ваш проект и разрешит зависимости. Как только это будет сделано, вам нужно перейти к следующим шагам:
- Перейдите в меню Файл >> Новый >> Новый проект и введите имя вашего приложения.
- Введите домен вашей компании, который мы будем использовать только для идентификации вашего приложения.
- Выберите местоположение проекта и SDK, а на следующем экране выберите Empty Activity, так как мы будем добавлять большую часть кода вручную. Затем нажмите кнопку Далее.
- Выберите название деятельности. Убедитесь, что флажок Файл макета установлен, иначе нам придется генерировать его самостоятельно. Нажмите Готово. Мы использовали MainActivity в качестве имени активности, поскольку это будет наш экран по умолчанию. Это то, что пользователь увидит в первый раз, когда откроет приложение.
Теперь откройте build.gradle вашего проекта и добавьте следующую зависимость.
build.gradle
compile 'com.roughike:bottom-bar:2.0'
Code language: JavaScript (javascript)
Добавление нижней панели в макет приложения
Откройте файл activity_main.xml и добавьте следующий код. У нас есть два текстовых представления, одно для отображения имени и другое для отображения Email вошедшего пользователя.
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="https://schemas.android.com/apk/res-auto">
<FrameLayout
android:id="@+id/contentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="300dp"
android:textStyle="bold"
android:gravity="center_horizontal"/>
</FrameLayout>
<com.roughike.bottombar.BottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
app:bb_tabXmlResource="@xml/navigation_bar_menu"
app:bb_behavior="underNavbar"/>
</RelativeLayout>
Code language: HTML, XML (xml)
Создание вкладок, отрисовываемых объектов и стилей для нижней панели
navigation_bar_menu.xml
<tabs>
<tab
id="@+id/tab_calls"
icon="@drawable/ic_calls"
title="Calls"
activeColor="@color/colorAccent"
/>
<tab
id="@+id/tab_groups"
icon="@drawable/ic_groups"
title="Groups"
activeColor="@color/colorAccent" />
<tab
id="@+id/tab_chats"
icon="@drawable/ic_chats"
title="Chats"
activeColor="@color/colorAccent"/>
</tabs>
Code language: HTML, XML (xml)
Для трех пунктов меню мы использовали следующие графические элементы.
- Создайте новый XML-файл под названием navigation_bar_menu.xml и добавьте в него код выше.
- Загрузите исходный код этого приложения Android Navigation Bar Menu и добавьте drawables из исходного кода в свои папки drawables.
- Определите дочерний стиль основной темы вашего приложения.
res/values-v21/styles.xml
<style name="AppTheme.TransNav" parent="AppTheme">
<item name="android:navigationBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
Code language: HTML, XML (xml)
Чтобы избежать ошибок в версиях до Lollipop, создайте заглушку той же темы.
res/values/styles.xml
<style name="AppTheme.TransNav" parent="AppTheme" />
Code language: HTML, XML (xml)
Примените тему в AndroidManifest.xml.
AndroidManifest.xml
<activity android:name=".MainActivity" android:theme="@style/AppTheme.TransNav" />
Code language: HTML, XML (xml)
Добавление функционала в MainActivity
private TextView textView;
private BottomBar bottomBar;
Code language: PHP (php)
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView)findViewById(R.id.textView);
bottomBar = (BottomBar) findViewById(R.id.bottomBar);
bottomBar.setOnTabSelectListener(new OnTabSelectListener() {
@Override
public void onTabSelected(@IdRes int tabId) {
if (tabId == R.id.tab_calls) {
// The tab with id R.id.tab_calls was selected,
// change your content accordingly.
textView.setText("Звонки");
} else if (tabId == R.id.tab_groups) {
// The tab with id R.id.tab_groups was selected,
// change your content accordingly.
textView.setText("Группы");
} else if (tabId == R.id.tab_chats) {
// The tab with id R.id.tab_chats was selected,
// change your content accordingly.
textView.setText("Чаты");
}
}
});
}
Code language: PHP (php)
Теперь запустите приложение и нажмите выбор пунктов в навигации Android или на нижней панели. Это отразит выбранный пункт меню в TextView.