安。
今天要來聊聊BottomNavigationView這玩意兒
據網路上講這是流行的UI介面XD...反正既然流行就學一把吧!反正沒有壞處
那廢話就不要講了,先上功能以及Github吧!
Github: https://github.com/thumbb13555/BottomNavigationViewExample
好~開始!
0.目標
- 了解使用BottomNavigationView的方法
- 能操作BottomNavigationView的按鈕事件
- 能在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
不過我在專案中使用的就是就是拿來當一般按紐使用
那今天的介紹就到這,希望大家會喜歡~
留言列表