iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 26
0
Mobile Development

Android Studio 菜鳥筆記本系列 第 26

Android Studio 菜鳥筆記本-Day 26-介紹BottomNavigationView

  • 分享至 

  • xImage
  •  

BottomNavigationView是底部導覽的控件,就像line下方的四個選項,今天我會分享BottomNavigationView的使用方法。

Gradle Scripts

先Sync now此模組

    implementation 'com.google.android.material:material:1.3.0-alpha01'

再來右鍵res新增menu資料夾
https://ithelp.ithome.com.tw/upload/images/20201006/20129408LTLsqeBDdI.png
在menu資料夾裡新增menu.xml
https://ithelp.ithome.com.tw/upload/images/20201006/20129408WDC4UqlJiU.png
設定menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/setting"
        android:icon="@drawable/ic_baseline_settings_24"
        android:title="設定"/>
    <item android:id="@+id/comment"
        android:icon="@drawable/ic_baseline_comment_24"
        android:title="意見"/>
    <item android:id="@+id/account"
        android:icon="@drawable/ic_baseline_account_circle_24"
        android:title="個人資訊"/>
</menu>

在activity_main.xml新增BottomNavigationView,並將設定好的menu帶入BottomNavigationView

<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"
    tools:context=".MainActivity">

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="#A9FFFFFF"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/menu"/>
</androidx.constraintlayout.widget.ConstraintLayout>

成果圖
https://ithelp.ithome.com.tw/upload/images/20201006/20129408PpjNVILVAw.jpg
明天會分享BottomNavigationView切換畫面


上一篇
Android Studio 菜鳥筆記本-Day 25-介紹Fragment
下一篇
Android Studio 菜鳥筆記本-Day 27-BottomNavigationView的應用
系列文
Android Studio 菜鳥筆記本30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言