原文 BottomNavigationView By Mark Allison
Google 在2016年發不了Nougat 7.1開發者預覽的release版,同時還有Android Design Support Library 25。一個被名為BottomNavigationView 的新控件提供更簡潔的方式實現bottom navigation bar模式,正好是符合材料設計規范的。在這篇文章中,讓我們一探究竟。
在看代碼之前,我們不會深入探討為什么Android要使用底部導航欄,美化Android更在于“如何做”和“是否應該”,所以讓別人討論為什么吧。如果你覺得BottomNavigationView符合你的應用,這篇文章正好給出基礎用法,真的比較簡單。
值得指出Javadoc中關于BottomNavigationView包括了如何使用的代碼片段,不幸的是(在我寫的時候),demo代碼由于包名和命名空間的問題并不能跑起來。
我并不喜歡demo代碼毫無道理地使用了ConstraintLayout,不論它是不是beta版。BottomNavigationView 并不需要它,demo代碼應該能使用任何的布局。
好,我們先聲明一個布局文件包含了BottomNavigationView
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.stylingandroid.bottomnavigationview.MainActivity">
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/navigation_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation"/>
</android.support.constraint.ConstraintLayout>
唯一不標準的是app:menu屬性,官方文檔的問題在于指定了一個固定的包名,而我們使用時只要綁定http://schemas.android.com/apk/res-auto 就行了。
menu屬性置頂標準的menu資源文件,例如
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/recents"
android:icon="@drawable/ic_recents"
android:title="@string/recents" />
<item
android:id="@+id/favourites"
android:icon="@drawable/ic_favourites"
android:title="@string/favourites" />
<item
android:id="@+id/nearby"
android:icon="@drawable/ic_nearby"
android:title="@string/nearby" />
</menu>
如果你正在遷移一個基于menu資源文件的導航欄,那真是輕松愉快。
既然我們需要使用標準的menu資源文件,那么就要符合標準邏輯。然而BottomNavigationView需要添加更多的屬性例如選中狀態。我們通過繼承BottomNavigationView.OnNavigationItemSelectedListener來實現。在這個例子中,我們只改變Fragment中的文字(保持代碼簡單整潔),也許實際中做更有趣的事。
public class MainActivity extends AppCompatActivity implements BottomNavigationView.OnNavigationItemSelectedListener {
private TextFragment fragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FragmentManager fragmentManager = getSupportFragmentManager();
fragment = new TextFragment();
FragmentTransaction transaction = fragmentManager.beginTransaction();
transaction.replace(R.id.fragment_container, fragment);
transaction.commit();
BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.navigation_view);
bottomNavigationView.setOnNavigationItemSelectedListener(this);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
@StringRes int text;
switch (item.getItemId()) {
case R.id.recents:
text = R.string.recents;
break;
case R.id.favourites:
text = R.string.favourites;
break;
case R.id.nearby:
text = R.string.nearby;
break;
default:
return false;
}
switchFragmentText(text);
return true;
}
private void switchFragmentText(@StringRes int text) {
fragment.setText(text);
}
}
最后的效果圖。
有意思的事(通常是Design Support Library的特性)是主題會 根據我們在theme定義的顏色來走。不過,如果需要自定義,這里也會屬性可以設置。
想在XML里個性化主題,背景,圖標,文字顏色,官方文檔 說得比我好。
這就是全部內容。不管喜不喜歡,底部導航欄都已經是材料設計的一部分了,有Design Support Library的支持實現起來太簡單了。