碼農日常大小事

安。

今天要來聊聊BottomNavigationView這玩意兒

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

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

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

好～開始！

0.目標

1. 了解使用BottomNavigationView的方法
2. 能操作BottomNavigationView的按鈕事件
3. 能在Androidx環境下操作此元件

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

不過我在專案中使用的就是就是拿來當一般按紐使用

那今天的介紹就到這，希望大家會喜歡～