今天要來聊聊BottomNavigationView這玩意兒

據網路上講這是流行的UI介面XD...反正既然流行就學一把吧！反正沒有壞處

那廢話就不要講了，先上功能以及Github吧！

Github : https://github.com/thumbb13555/BottomNavigationViewExample

好～開始！

1.導入jar包

在使用元件之前，必須導入Google Design的library

包的連結在此-> https://mvnrepository.com/artifact/com.google.android.material/material/1.1.0-alpha10

點進去後，複製這一串(´･з･)

然後把那一串的jar去掉

最後在Android studio內的build.gradle內的dependencies內加入以下

implementation 'com.google.android.material:material:1.1.0-alpha10'
最後按下Sync Now,就完成導入囉！(｀▽´)
在這裡特別注意
我的導入包是Androidx的包
如果是用舊版supportV7的話
請導入這個包喔！
implementation 'com.android.support:design:27.1.0'
2.建立介面
在開始拉介面到主畫面之前，首先要來設置Menu介面
也就是"內容"的部分
首先在res資料夾下(上面的)新增menu的資料夾
完成後會在res資料夾下看到一個menu的資料夾～
再來點選右鍵，新增一個Menu的resource
取名字，點下OK，便成功建立
再來進到Menu設置介面，加入item(BottomView最多只支援五個哦)(・∀・)
xml Code:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:title="相機"
        android:id="@+id/nav1"
        android:icon="@drawable/ic_camera_alt_black_24dp"
    <item android:title="下載"
        android:icon="@drawable/ic_file_download_black_24dp"
        android:id="@+id/nav2"
    <item android:title="音樂"
        android:id="@+id/nav3"
        android:icon="@drawable/ic_audiotrack_black_24dp"
    <item android:title="設定"
        android:id="@+id/nav4"
        android:icon="@drawable/ic_settings_black_24dp"
</menu>
接著回到activity_main.xml
將介面設置在你喜歡的地方(通常是底下)
在這邊建議Layout用ConstraintLayout比較好處理
然後加入以下程式
<com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/navigation"
        android:background="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation"
        app:itemHorizontalTranslationEnabled="false"
        app:labelVisibilityMode="labeled"
灰色部分可加可不加(　´_ゝ`)
這時候畫面應該長這樣
然後～執行按下去～
就可以出現基本畫面囉(｀･ω･´)+
3.加入點擊事件
程式超級簡單沒有幾行
我想就直接上程式比較好理解ʕ⊙ᴥ⊙ʔ
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TextView tvHello = findViewById(R.id.textHello);
        BottomNavigationView bottomNavigationView
                = (BottomNavigationView) findViewById(R.id.navigation);
        bottomNavigationView.getMenu().setGroupCheckable(0, false, false);
        bottomNavigationView.getMenu().getItem(1).setEnabled(false);
        bottomNavigationView.setOnNavigationItemSelectedListener((item) -> {
            switch (item.getItemId()) {
                case R.id.nav1:
                        tvHello.setText("點選相機");
                    break;
                case R.id.nav2:
                    tvHello.setText("點選下載");
                    break;
                case R.id.nav3:
                    tvHello.setText("點選音樂");
                    break;
                case R.id.nav4:
                    tvHello.setText("點選設定");
                    break;
            return true;
    }//onCreate
在宣告完連結後，首先藍色的部分是要取消他元件自帶的動畫
紅色部分則是使左邊數來第二個元件呈現不可點擊狀態
粗體字部份則是關於點擊事件的部分
這邊我使用的是匿名函數，而原貌長這樣
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                return false;
設置點擊的方法則是以MenuItem找到其ID,再用switch-case處理個按鈕點擊事件
如此一來在點擊內加入需要的功能，程式就完成囉(｀･ω･´)+
這週的介紹比較短，也比較簡單；是因為這週我跑去看李宗盛的高雄場演唱會了XDD
但姑且這週還是盡可能地擠出時間，為工作中所學到的東西放一篇記錄
此外關於今天介紹的元件，多數還搭配ViewPager服用XD
不過我在專案中使用的就是就是拿來當一般按紐使用
那今天的介紹就到這，希望大家會喜歡～