Статьи по Android

Панель навигации на Android с использованием библиотеки Bottom Bar

Сегодня мы поговорим о том, как создать навигационную панель в 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *