Android 底部導航欄 (底部 Tab) 最佳實踐｜掘金技術徵文
當開始一個新項目的時候，有一個很重要的步驟就是肯定咱們的APP首頁框架，也就是用戶從桌面點擊APP 圖標，進入APP 首頁的時候展現給用戶的框架，好比微信，展現了有四個Tab，分別對應不一樣的板塊（微信、通信錄、發現、我），如今市面出了少部分的Material Design 風格的除外，大部分都是這樣的一個框架，稱之爲底部導航欄，分爲3-5個Tab不等。前段時間開始了一個新項目，在搭建這樣一個Tab 框架的時候遇到了一些坑，先後換了好幾種方式來實現。所以，本文總結了一般實現這樣一個底部導航欄的幾種方式，以及它各自一些須要注意的地方。本文以實現以下一個底部導航欄爲例：java
1 . TabLayout + Fragment
要實現這樣一個底部導航欄，你們最容易想到的固然就是TabLayout，Tab 切換嘛，TabLayout 就是專門幹這個事的，不過TabLayout 默認是帶有Indicator的，咱們是不須要的，所以須要把它去掉，看一下佈局文件：android
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/home_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</FrameLayout>
<View android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<android.support.design.widget.TabLayout
android:id="@+id/bottom_tab_layout"
android:layout_width="match_parent"
app:tabIndicatorHeight="0dp"
app:tabSelectedTextColor="@android:color/black"
app:tabTextColor="@android:color/darker_gray"
android:layout_height="50dp">
</android.support.design.widget.TabLayout>
</LinearLayout>複製代碼
整個佈局分爲三個部分，最上面是一個Framelayout 用作裝Fragment 的容器，接着有一根分割線，最下面就是咱們的TabLayout，去掉默認的Indicator直接設置app:tabIndicatorHeight屬性的值爲0就好了。 git
佈局文件寫好以後，接下來看一下Activity的代碼：github
public class BottomTabLayoutActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private Fragment []mFragmensts;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bottom_tab_layout_ac);
mFragmensts = DataGenerator.getFragments("TabLayout Tab");
initView();
}
private void initView() {
mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
//改變Tab 狀態
for(int i=0;i< mTabLayout.getTabCount();i++){
if(i == tab.getPosition()){
mTabLayout.getTabAt(i).setIcon(getResources().getDrawable(DataGenerator.mTabResPressed[i]));
}else{
mTabLayout.getTabAt(i).setIcon(getResources().getDrawable(DataGenerator.mTabRes[i]));
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
mTabLayout.addTab(mTabLayout.newTab().setIcon(getResources().getDrawable(R.drawable.tab_home_selector)).setText(DataGenerator.mTabTitle[0]));
mTabLayout.addTab(mTabLayout.newTab().setIcon(getResources().getDrawable(R.drawable.tab_discovery_selector)).setText(DataGenerator.mTabTitle[1]));
mTabLayout.addTab(mTabLayout.newTab().setIcon(getResources().getDrawable(R.drawable.tab_attention_selector)).setText(DataGenerator.mTabTitle[2]));
mTabLayout.addTab(mTabLayout.newTab().setIcon(getResources().getDrawable(R.drawable.tab_profile_selector)).setText(DataGenerator.mTabTitle[3]));
}
private void onTabItemSelected(int position){
Fragment fragment = null;
switch (position){
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;
case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
}
}複製代碼
Activity的代碼如上，很簡單，就是一個TabLayout，添加監聽器，而後向TabLayout中添加4個Tab，在addOnTabSelectedListener 中切換各個Tab對應的Fragment 。其中用到的一些數據放在了一個單獨的類中, DataGenerator,代碼以下：api
public class DataGenerator {
public static final int []mTabRes = new int[]{R.drawable.tab_home_selector,R.drawable.tab_discovery_selector,R.drawable.tab_attention_selector,R.drawable.tab_profile_selector};
public static final int []mTabResPressed = new int[]{R.drawable.ic_tab_strip_icon_feed_selected,R.drawable.ic_tab_strip_icon_category_selected,R.drawable.ic_tab_strip_icon_pgc_selected,R.drawable.ic_tab_strip_icon_profile_selected};
public static final String []mTabTitle = new String[]{"首頁","發現","關注","個人"};
public static Fragment[] getFragments(String from){
Fragment fragments[] = new Fragment[4];
fragments[0] = HomeFragment.newInstance(from);
fragments[1] = DiscoveryFragment.newInstance(from);
fragments[2] = AttentionFragment.newInstance(from);
fragments[3] = ProfileFragment.newInstance(from);
return fragments;
}
/** * 獲取Tab 顯示的內容 * @param context * @param position * @return */
public static View getTabView(Context context,int position){
View view = LayoutInflater.from(context).inflate(R.layout.home_tab_content,null);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
tabIcon.setImageResource(DataGenerator.mTabRes[position]);
TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
tabText.setText(mTabTitle[position]);
return view;
}
}複製代碼
接下來，咱們看一下效果：微信
運行以後，效果如上圖，What ? 圖標這麼小？圖標和文字之間的間距這麼寬？這固然不是咱們想要的，試着用TabLayout的屬性調整呢？TabLayout 提供了設置Tab 圖標、tab 文字顏色，選中顏色，文字大小的屬性，可是很遺憾，圖標Icon和圖標與文字之間的間距是沒辦法調整的。app
那麼就沒有辦法了嗎？在仔細查了一下TabLayout的API 後，找到了一個方法，Tab 中有一個setCustomView(View view)方法，也就是咱們不用常規的方式建立Tab，咱們能夠提供一個本身定義的View 來建立Tab，這不就好了嘛，既然能夠自定義，那麼icon的大小，icon和文字之間的間距，咱們想怎樣就怎樣拉。因而咱們自定義一個佈局：框架
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/tab_content_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
/>
<TextView
android:id="@+id/tab_content_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:textColor="@android:color/darker_gray"
/>
</LinearLayout>複製代碼
添加tab 的時候，用這個自定義的佈局,改造後的Activity中的代碼以下這樣：ide
public class BottomTabLayoutActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private Fragment []mFragmensts;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bottom_tab_layout_ac);
mFragmensts = DataGenerator.getFragments("TabLayout Tab");
initView();
}
private void initView() {
mTabLayout = (TabLayout) findViewById(R.id.bottom_tab_layout);
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
onTabItemSelected(tab.getPosition());
// Tab 選中以後，改變各個Tab的狀態
for (int i=0;i<mTabLayout.getTabCount();i++){
View view = mTabLayout.getTabAt(i).getCustomView();
ImageView icon = (ImageView) view.findViewById(R.id.tab_content_image);
TextView text = (TextView) view.findViewById(R.id.tab_content_text);
if(i == tab.getPosition()){ // 選中狀態
icon.setImageResource(DataGenerator.mTabResPressed[i]);
text.setTextColor(getResources().getColor(android.R.color.black));
}else{// 未選中狀態
icon.setImageResource(DataGenerator.mTabRes[i]);
text.setTextColor(getResources().getColor(android.R.color.darker_gray));
}
}
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
// 提供自定義的佈局添加Tab
for(int i=0;i<4;i++){
mTabLayout.addTab(mTabLayout.newTab().setCustomView(DataGenerator.getTabView(this,i)));
}
}
private void onTabItemSelected(int position){
Fragment fragment = null;
switch (position){
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;
case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
}
}複製代碼
改造完成以後，效果以下：佈局
總結：TayoutLayout 實現底部導航欄較爲簡單，只需幾步就能實現，能配合Viewpager使用。可是，就像上文說的，不能設置Icon大小和調整Icon和文字之間的間距。可是能夠經過設置自定義佈局的方式來實現咱們想要的效果。須要咱們本身來改變Tab切換的狀態。還有一點須要注意：設置OnTabChangeListener 須要在添加Tab以前，否則第一次不會回調
onTabSelected()方法，前面寫過一片文章，從源碼的角度分析這個坑，請看 TabLayout 踩坑之 onTabSelected沒有被回調的問題
2 . BottomNavigationView + Fragment
除了用上面的TabLayout來實現底部導航欄，Google 也發佈了專門用來實現底部導航的控件，那就是BottomNavigationView,BottomNavigationView符合Material 風格，有着炫酷的切換動畫，咱們來具體看一下。
佈局和前面TabLayout 實現的佈局長得差很少，把TabLayout換成 NavigationView 就行。這裏就不貼布局文件了。BottomNavigationView 的Tab是經過menu 的方式添加的，看一下menu文件：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/tab_menu_home"
android:icon="@drawable/ic_play_circle_outline_black_24dp"
android:title="首頁"
/>
<item
android:id="@+id/tab_menu_discovery"
android:icon="@drawable/ic_favorite_border_black_24dp"
android:title="發現"
/>
<item
android:id="@+id/tab_menu_attention"
android:icon="@drawable/ic_insert_photo_black_24dp"
android:title="關注"
/>
<item
android:id="@+id/tab_menu_profile"
android:icon="@drawable/ic_clear_all_black_24dp"
android:title="個人"
/>
</menu>複製代碼
Activity 代碼以下：
public class BottomNavigationViewActivity extends AppCompatActivity {
private BottomNavigationView mBottomNavigationView;
private Fragment []mFragments;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.bottom_navigation_view_ac);
mFragments = DataGenerator.getFragments("BottomNavigationView Tab");
initView();
}
private void initView() {
mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_navigation_view);
//mBottomNavigationView.getMaxItemCount()
mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
onTabItemSelected(item.getItemId());
return true;
}
});
// 因爲第一次進來沒有回調onNavigationItemSelected，所以須要手動調用一下切換狀態的方法
onTabItemSelected(R.id.tab_menu_home);
}
private void onTabItemSelected(int id){
Fragment fragment = null;
switch (id){
case R.id.tab_menu_home:
fragment = mFragments[0];
break;
case R.id.tab_menu_discovery:
fragment = mFragments[1];
break;
case R.id.tab_menu_attention:
fragment = mFragments[2];
break;
case R.id.tab_menu_profile:
fragment = mFragments[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
}
}複製代碼
代碼比TabLayout 還簡單，不用添加tab ,直接在xml 文件中設置menu屬性就行了。效果以下：
效果如上，切換的時候會有動畫，效果仍是不錯的，除此以外，每一個tab還能夠對應不一樣的背景色，有興趣的能夠去試一下。可是有一點值得吐槽，動畫好像還不能禁止，要是設計成能夠禁止動畫和使用切換動畫這兩種模式，隨意切換就行了。
總結：BottomNavigationView 實現底部導航欄符合Material風格，有炫酷的切換動畫，且動畫還不能禁止，若是App 須要這種風格的底部導航欄的，能夠用這個，實現起來比較簡單。可是須要注意：BottomNavigatonView 的tab 只能是3-5個，多了或者少了是會報錯。還有一點，第一次進入頁面的時候不會調用onNavigationItemSelected 方法（不知道是否是 哪兒沒有設置對？若是有同窗發現能夠，評論區告訴我一下），所以第一次須要手動調用 添加fragment的方法。
3 . FragmentTabHost + Fragment
FragmentTab Host 多是你們實現底部導航欄用得最多的一種方式，特別是在TabLayout 和 BottomNavigation 出來以前，是比較老牌的實現底部導航欄的方式，相比前兩個，FragmentTabHost 的實現稍微複雜一點，具體請看代碼，
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/home_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</FrameLayout>
<View android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<android.support.v4.app.FragmentTabHost
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_marginTop="3dp"
android:layout_height="50dp">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
>
</FrameLayout>
</android.support.v4.app.FragmentTabHost>
</LinearLayout>複製代碼
佈局文件須要注意的地方：1，FragmentTabHost 裏須要有一個id爲@android:id/tabcontent的佈局。2，FragmentTabHost的id 也是系統提供的id ,不能隨便起。
Activity 代碼以下：
public class FragmentTabHostActivity extends AppCompatActivity implements TabHost.OnTabChangeListener{
private Fragment []mFragments;
private FragmentTabHost mTabHost;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.fragment_tab_host_ac_layout);
mFragments = DataGenerator.getFragments("FragmentTabHost Tab");
initView();
}
private void initView(){
mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
// 關聯TabHost
mTabHost.setup(this,getSupportFragmentManager(),R.id.home_container);
//注意，監聽要設置在添加Tab以前
mTabHost.setOnTabChangedListener(this);
//添加Tab
for (int i=0;i<4;i++){
//生成TabSpec
TabHost.TabSpec tabSpec = mTabHost.newTabSpec(mTabTitle[i]).setIndicator(DataGenerator.getTabView(this,i));
// 添加Tab 到TabHost，並綁定Fragment
Bundle bundle = new Bundle();
bundle.putString("from","FragmentTabHost Tab");
mTabHost.addTab(tabSpec,mFragments[i].getClass(),bundle);
}
//去掉Tab 之間的分割線
mTabHost.getTabWidget().setDividerDrawable(null);
//
mTabHost.setCurrentTab(0);
}
@Override
public void onTabChanged(String tabId) {
updateTabState();
}
/** * 更新Tab 的狀態 */
private void updateTabState(){
TabWidget tabWidget = mTabHost.getTabWidget();
for (int i=0;i<tabWidget.getTabCount();i++){
View view = tabWidget.getChildTabViewAt(i);
ImageView tabIcon = (ImageView) view.findViewById(R.id.tab_content_image);
TextView tabText = (TextView) view.findViewById(R.id.tab_content_text);
if(i == mTabHost.getCurrentTab()){
tabIcon.setImageResource(DataGenerator.mTabResPressed[i]);
tabText.setTextColor(getResources().getColor(android.R.color.black));
}else{
tabIcon.setImageResource(mTabRes[i]);
tabText.setTextColor(getResources().getColor(android.R.color.darker_gray));
}
}
}
}複製代碼
FragmentTabHost 的實現就比前兩個稍微複雜點。首先要經過setup()方法創建FragmentTabHost 與Fragment container的關聯。而後設置Tab切換監聽，添加Tab。須要主要一點，FragmentTabHost 默認在每一個Tab之間有一跟豎直的分割先，調用下面這行代碼去掉分割線：
//去掉Tab 之間的分割線
mTabHost.getTabWidget().setDividerDrawable(null);複製代碼
在onTabChanged 回調中須要手動設置每一個Tab切換的狀態。從
TabWidget 中取出每一個子View 來設置選中和未選中的狀態（跟前面的TabLayout 經過自定義佈局添加Tab是同樣的）。
效果以下：
注意：有2點須要注意，1,經過FragmentTabHost添加的Fragment 裏面收不到經過 setArgment() 傳遞的參數，要傳遞參數，須要在添加Tab 的時候經過Bundle 來傳參，代碼以下：
// 添加Tab 到TabHost，並綁定Fragment
Bundle bundle = new Bundle();
bundle.putString("from","FragmentTabHost Tab");複製代碼
2,同前面說的TabLayout同樣，要在添加Tab以前設置OnTabChangeListener 監聽器，不然第一次收不到onTabChange回調。
總結：FragmentTabHost 實現底部導航欄比前面兩種方式稍微複雜一點，須要注意的地方有點多，否則容易踩坑，可是它的穩定性和兼容性很好，在Android 4.x 時代就大量使用了。能配合Viewpager使用。
4 . RadioGroup + RadioButton + Fragment
RadioGroup ＋RadioButtom 是作單選的，RadioGroup 裏面的View 只能選中一個。想一下咱們要作的底部導航欄，是否是就是一個單選模式呢？固然是，每次只能選中一個頁面嘛，所以用RadioGroup + RadioButton 來實現底部導航欄也是一種方式。
RadioButton 有默認的選中與非選中的樣式,默認顏色是colorAcent,效果是這樣的:
所以咱們要用RadioGroup+RadioButton 實現底部導航欄，首先，就是去掉它的默認樣式，所以，咱們來自定義一個style:
<style name="RadioGroupButtonStyle" >
<!-- 這個屬性是去掉button 默認樣式-->
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">@color/color_selector</item>
</style>複製代碼
style 裏面定義了RadioButton 的屬性，如今咱們直接給RadioButton 設置style 就行了，看先頁面的佈局文件：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="@+id/home_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
</FrameLayout>
<View android:layout_width="match_parent"
android:layout_height="0.5dp"
android:alpha="0.6"
android:background="@android:color/darker_gray"
/>
<RadioGroup
android:id="@+id/radio_group_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="@android:color/white"
>
<RadioButton
android:id="@+id/radio_button_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首頁"
android:drawableTop="@drawable/tab_home_selector"
style="@style/RadioGroupButtonStyle"
/>
<RadioButton
android:id="@+id/radio_button_discovery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="發現"
android:drawableTop="@drawable/tab_discovery_selector"
style="@style/RadioGroupButtonStyle"
/>
<RadioButton
android:id="@+id/radio_button_attention"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="關注"
android:drawableTop="@drawable/tab_attention_selector"
style="@style/RadioGroupButtonStyle"
/>
<RadioButton
android:id="@+id/radio_button_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="個人"
android:drawableTop="@drawable/tab_profile_selector"
style="@style/RadioGroupButtonStyle"
/>
</RadioGroup>
</LinearLayout>複製代碼
很簡單，添加一個RadioGroup 和 四個 RadioButton ,由於去掉了原來的樣式，所以要設置咱們每一個RadioButton 顯示的圖標。
佈局文件定義好了以後，看一下Activity 中的代碼：
public class RadioGroupTabActivity extends AppCompatActivity {
private RadioGroup mRadioGroup;
private Fragment []mFragments;
private RadioButton mRadioButtonHome;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.radiogroup_tab_layout);
mFragments = DataGenerator.getFragments("RadioGroup Tab");
initView();
}
private void initView() {
mRadioGroup = (RadioGroup) findViewById(R.id.radio_group_button);
mRadioButtonHome = (RadioButton) findViewById(R.id.radio_button_home);
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
Fragment mFragment = null;
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
switch (checkedId){
case R.id.radio_button_home:
mFragment = mFragments[0];
break;
case R.id.radio_button_discovery:
mFragment = mFragments[1];
break;
case R.id.radio_button_attention:
mFragment = mFragments[2];
break;
case R.id.radio_button_profile:
mFragment = mFragments[3];
break;
}
if(mFragments!=null){
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,mFragment).commit();
}
}
});
// 保證第一次會回調OnCheckedChangeListener
mRadioButtonHome.setChecked(true);
}
}複製代碼
Activity 的代碼就很簡單了，在onCheckedChanged 回調裏面切換Fragment 就好了。這種方式的Activity 代碼是最簡潔的，由於RadioButton 有check 和 unCheck 狀態，直接用seletor 就能換狀態的圖標和check 文字的顏色，不用手動來設置狀態。
效果以下，一步到位：
總結：RadioGroup + RadioButton 實現底部導航欄步驟有點多，須要配置style 文件，各個Tab 的 drawable selector 文件，color 文件，可是，配置完了這些以後，代碼是最簡潔的。這也是有好處的，之後要換什麼圖標啊，顏色，只須要改xml 文件就好，是不須要改代碼邏輯的，所以這樣方式來實現底部導航欄是個不錯的選擇。
5 . 自定義 CustomTabView + Fragment
除了上面的幾種方式以外，還有一種方式來實現底部導航欄，那就是咱們經過自定義View來實現，自定義View的好處是咱們能夠按照咱們想要的高度定製，缺點是：比起這些現有的控件仍是有點麻煩。下面就經過自定義一個CustomTabView 爲例子，來實現一個底部導航欄。
CustomTabView 代碼下：
public class CustomTabView extends LinearLayout implements View.OnClickListener{
private List<View> mTabViews;//保存TabView
private List<Tab> mTabs;// 保存Tab
private OnTabCheckListener mOnTabCheckListener;
public void setOnTabCheckListener(OnTabCheckListener onTabCheckListener) {
mOnTabCheckListener = onTabCheckListener;
}
public CustomTabView(Context context) {
super(context);
init();
}
public CustomTabView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomTabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public CustomTabView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init(){
setOrientation(HORIZONTAL);
setGravity(Gravity.CENTER);
mTabViews = new ArrayList<>();
mTabs = new ArrayList<>();
}
/** * 添加Tab * @param tab */
public void addTab(Tab tab){
View view = LayoutInflater.from(getContext()).inflate(R.layout.custom_tab_item_layout,null);
TextView textView = (TextView) view.findViewById(R.id.custom_tab_text);
ImageView imageView = (ImageView) view.findViewById(R.id.custom_tab_icon);
imageView.setImageResource(tab.mIconNormalResId);
textView.setText(tab.mText);
textView.setTextColor(tab.mNormalColor);
view.setTag(mTabViews.size());
view.setOnClickListener(this);
mTabViews.add(view);
mTabs.add(tab);
addView(view);
}
/** * 設置選中Tab * @param position */
public void setCurrentItem(int position){
if(position>=mTabs.size() || position<0){
position = 0;
}
mTabViews.get(position).performClick();
updateState(position);
}
/** * 更新狀態 * @param position */
private void updateState(int position){
for(int i= 0;i<mTabViews.size();i++){
View view = mTabViews.get(i);
TextView textView = (TextView) view.findViewById(R.id.custom_tab_text);
ImageView imageView = (ImageView) view.findViewById(R.id.custom_tab_icon);
if(i == position){
imageView.setImageResource(mTabs.get(i).mIconPressedResId);
textView.setTextColor(mTabs.get(i).mSelectColor);
}else{
imageView.setImageResource(mTabs.get(i).mIconNormalResId);
textView.setTextColor(mTabs.get(i).mNormalColor);
}
}
}
@Override
public void onClick(View v) {
int position = (int) v.getTag();
if(mOnTabCheckListener!=null){
mOnTabCheckListener.onTabSelected(v, position);
}
updateState(position);
}
public interface OnTabCheckListener{
public void onTabSelected(View v,int position);
}
public static class Tab{
private int mIconNormalResId;
private int mIconPressedResId;
private int mNormalColor;
private int mSelectColor;
private String mText;
public Tab setText(String text){
mText = text;
return this;
}
public Tab setNormalIcon(int res){
mIconNormalResId = res;
return this;
}
public Tab setPressedIcon(int res){
mIconPressedResId = res;
return this;
}
public Tab setColor(int color){
mNormalColor = color;
return this;
}
public Tab setCheckedColor(int color){
mSelectColor = color;
return this;
}
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
if(mTabViews!=null){
mTabViews.clear();
}
if(mTabs!=null){
mTabs.clear();
}
}
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
// 調整每一個Tab的大小
for(int i=0;i<mTabViews.size();i++){
View view = mTabViews.get(i);
int width = getResources().getDisplayMetrics().widthPixels / (mTabs.size());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(width, ViewGroup.LayoutParams.MATCH_PARENT);
view.setLayoutParams(params);
}
}
}複製代碼
仍是比較簡單，繼承LinearLayout,有一個Tab 類來保存每一個tab 的數據，好比圖標，顏色，文字等等，有註釋，就不一一解釋了。
佈局文件差很少，其餘控件換成CustomTabView 就行，看一下Activity中的代碼：
public class CustomTabActivity extends AppCompatActivity implements CustomTabView.OnTabCheckListener{
private CustomTabView mCustomTabView;
private Fragment []mFragmensts;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.custom_tab_ac_layout);
mFragmensts = DataGenerator.getFragments("CustomTabView Tab");
initView();
}
private void initView() {
mCustomTabView = (CustomTabView) findViewById(R.id.custom_tab_container);
CustomTabView.Tab tabHome = new CustomTabView.Tab().setText("首頁")
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_feed)
.setPressedIcon(R.drawable.ic_tab_strip_icon_feed_selected);
mCustomTabView.addTab(tabHome);
CustomTabView.Tab tabDis = new CustomTabView.Tab().setText("發現")
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_category)
.setPressedIcon(R.drawable.ic_tab_strip_icon_category_selected);
mCustomTabView.addTab(tabDis);
CustomTabView.Tab tabAttention = new CustomTabView.Tab().setText("管制")
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_pgc)
.setPressedIcon(R.drawable.ic_tab_strip_icon_pgc_selected);
mCustomTabView.addTab(tabAttention);
CustomTabView.Tab tabProfile = new CustomTabView.Tab().setText("個人")
.setColor(getResources().getColor(android.R.color.darker_gray))
.setCheckedColor(getResources().getColor(android.R.color.black))
.setNormalIcon(R.drawable.ic_tab_strip_icon_profile)
.setPressedIcon(R.drawable.ic_tab_strip_icon_profile_selected);
mCustomTabView.addTab(tabProfile);
//設置監聽
mCustomTabView.setOnTabCheckListener(this);
// 默認選中tab
mCustomTabView.setCurrentItem(0);
}
@Override
public void onTabSelected(View v, int position) {
Log.e("zhouwei","position:"+position);
onTabItemSelected(position);
}
private void onTabItemSelected(int position){
Fragment fragment = null;
switch (position){
case 0:
fragment = mFragmensts[0];
break;
case 1:
fragment = mFragmensts[1];
break;
case 2:
fragment = mFragmensts[2];
break;
case 3:
fragment = mFragmensts[3];
break;
}
if(fragment!=null) {
getSupportFragmentManager().beginTransaction().replace(R.id.home_container,fragment).commit();
}
}
}複製代碼
用法很簡單，直接添加Tab ,設置Tab 變換的監聽器和默認選中的Tab 就行。
效果以下：
總結：自定義Tab 相比於其餘幾種方案仍是顯得有些麻煩，可是能夠高度定製，喜歡折騰的能夠用自定義View 試試。
6 . 總結
本文總結了實現底部導航欄的5種方式，其中TabLayout 和 BottomNavigationView 是Android 5.0 之後添加的新控件，符合Material 設計規範，若是是Materail 風格的，能夠考慮用這兩種實現（TabLayout 使用更多的場景實際上是頂部帶Indicator的滑動頁卡），其餘兩種方式FragmentTabHost 和RadioGroup 也是比較老牌的方式了，在4.x 時代就大量使用,是通常底部導航欄的常規實現。最後就是自定義View來實現了，自定義View稍顯麻煩，可是可定製度高，若是有一些特殊的需求，能夠用這種方式來實現。
若是有什麼問題，歡迎一塊兒交流，也能夠在評論區留言。另外，本文的全部Demo 代碼已經上傳Github ,若是有須要的請移步Github github.com/pinguo-zhou…
相關文章
- 1. Android 底部導航欄 (底部 Tab) 最佳實踐｜掘金技術徵文
- 2. Android 底部導航欄(底部Tab)最佳實踐
- 3. Flutter 底部導航——BottomNavigationBar | 掘金技術徵文
- 4. TabLayout用法，android頂部導航欄，android底部導航欄
- 5. Android 底部導航欄BottomNavigationView
- 6. 底部導航欄：利用viewpager實現Android底部標題欄
- 7. 20、Tabs底部導航欄
- 8. Android用BottomNavigationBar實現底部導航欄
- 9. 底部導航欄效果
- 10. Android底部導航欄之BottomNavigationBar
- 更多相關文章...
- • ionic 頭部和底部 - ionic 教程
- • ionic 頭部與底部 - ionic 教程
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
- • Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Android 底部導航欄 (底部 Tab) 最佳實踐｜掘金技術徵文
- 2. Android 底部導航欄(底部Tab)最佳實踐
- 3. Flutter 底部導航——BottomNavigationBar | 掘金技術徵文
- 4. TabLayout用法，android頂部導航欄，android底部導航欄
- 5. Android 底部導航欄BottomNavigationView
- 6. 底部導航欄：利用viewpager實現Android底部標題欄
- 7. 20、Tabs底部導航欄
- 8. Android用BottomNavigationBar實現底部導航欄
- 9. 底部導航欄效果
- 10. Android底部導航欄之BottomNavigationBar