Android底部導航欄(可滑動)----TabLayout+viewPager

【TabLayout】

　　①TabLayout是選項卡，在屏幕空間有限的情況下，對不同的空間進行分組。屬於android support design，更多的用於新聞上，如果放在底部也可做底部導航欄

　　　　

　　②TabLayout的選項卡模式有兩種：fixed；scrollable;　　　　

　　tabLayout.setTabMode(TabLayout.MODE_FIXED);設置選項卡模式為fixed

　　tabSelectedTextColor：選中時，字的顏色，適用於tabItem的普通模式;

　　tabIndicatorHeight:設置指示器的高度，如果為0表示沒有指示器，適用於tabItem的普通模式;(在作為底部導航時，需隱藏指示器)

　　tabIndicatorColor：設置指示器顏色，適用於tabItem的普通模式;
　　

 　　🌂設置Tab頁的自定義View

　　　　TabLayout.getTabAt(index).setCustomView(view);　　

　　　🐖如果無需自定義View

　　　　　　

　　可重寫ViewPagerAdapter（綁定當前頁面viewPager的Adapter類）中的方法　getPageTitle

　　@Override
    public CharSequence getPageTitle(int position) { return titleList[position]; }
　　//准備titleList數據為Tab頁的標題
　　String[] titleList = new String[]{"A","B","C"};

 

　　④與ViewPager結合

　　　　TabLayout.setUpWithViewPager(viewPager);

 　

　　😭TabLayouit的Tab切換事件　　

　　onTabselectedListener事件{

　　該事件（接口）包含多個回調（callback）方法：

　　　　void onTabSelected（TabLayout.Tab tab）：

　　　　選中某一個選項；

　　　　void onTabUnSelected(TabLayout.Tab tab):

　　　　放棄選中某一個選項；

　　　　void onTabReSelected(TabLayout.Tab tab):

  　　 已選擇，再次選中這個選項
　　}

　　⑥此處作為底部導航欄

　　　　<1>、設置選項卡模式為fixed

　　　　　　tabLayout.setTabMode(TabLayout.MODE_FIXED);

 　　　　<2>、隱藏下方的指示條

　　　　　　tabLayout.setSelectedTabIndicatorHeight(0);

 　　　　<3>、重寫tabLayout的選項卡點擊事件

　　　　　　在選中時可對底部圖片進行變色或更換圖片處理，將選中的Tab視圖突出顯示。將未選中的標簽進行還原

　　注：另外此項目使用butterKnife,詳情請參考 【butterKnite的使用】

 

【效果】

　　

 

【項目結構】

　　

 

 

 【步驟】

　　①添加design依賴（build.gradle）

    implementation 'com.android.support:design:27.1.1'

 

　　②activity_main_nav.xml

<?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"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainNavActivity"
 android:orientation="vertical">
    <android.support.v4.view.ViewPager 10         android:id="@+id/viewPager"
 android:layout_width="match_parent"
 android:layout_height="0dp"
 android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout 18         android:id="@+id/tabLayout"
 android:background="@color/blackBg"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:scrollIndicators="none"
        >

    </android.support.design.widget.TabLayout>

</LinearLayout>

 

　　🌂創建底部的自定義布局main_tab_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  3     xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_weight="1"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:background="@color/blackBg">

    <ImageView 11         android:id="@+id/ivTab"
 android:layout_width="40dp"
 android:layout_height="40dp"
 android:layout_gravity="center"
 android:padding="5sp"
 android:scaleType="fitCenter"
 android:src="@mipmap/ic_launcher"
        />
    <TextView 20         android:id="@+id/tvTab"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:gravity="center"
 android:textColor="@color/writeTx"
 android:text="聊天"
 android:textSize="12sp"/>

</LinearLayout>

 

　　④新建四個Fragment待使用

　　

 

　　😭准備四個底部圖標

　　

 

　　⑥添加MainPageAdapter.java將四個fragment綁定到viewPager上　　

public class MainPageAdpater extends FragmentPagerAdapter {  2 
    List<Fragment> fragmentList = null;  4 
    public MainPageAdpater(FragmentManager fm) {  6         super(fm);  7  }  8 
    public MainPageAdpater(FragmentManager fm, List<Fragment> fragmentList) { 10         super(fm); 11         this.fragmentList = fragmentList; 12  } 13 
 @Override 15     public Fragment getItem(int position) { 16         return fragmentList.get(position); 17  } 18 
 @Override 20     public int getCount() { 21         return fragmentList.size(); 22  } 23     
}

 

　　⑦修改MainNavActivity.class

public class MainNavActivity extends AppCompatActivity {  2 
 @BindView(R.id.viewPager)  4  ViewPager viewPager;  5  @BindView(R.id.tabLayout)  6  TabLayout tabLayout;  7 
 @Override  9     protected void onCreate(Bundle savedInstanceState) { 10         super.onCreate(savedInstanceState); 11  setContentView(R.layout.activity_main_nav); 12         ButterKnife.bind(this); 13 
        //初始化底部導航
 initBottomNav(); 16  } 17     
    int[] ivTabs; 19  String[] tvTabs; 20     //底部導航
    private void initBottomNav() { 22         List<Fragment> fragmentList = new ArrayList<>(); 23         fragmentList.add(new ChatFragment()); 24         fragmentList.add(new ContactFragment()); 25         fragmentList.add(new FindFragment()); 26         fragmentList.add(new MeFragment()); 27         viewPager.setAdapter(new MainPageAdpater(getSupportFragmentManager(),fragmentList)); 28  tabLayout.setupWithViewPager(viewPager); 29  tabLayout.setTabMode(TabLayout.MODE_FIXED); 30 
        ivTabs = new int[]{R.drawable.chat,R.drawable.contact,R.drawable.find,R.drawable.me}; 32         tvTabs = new String[]{"聊天","通訊錄","發現","我的"}; 33 
        for (int i = 0; i < fragmentList.size(); i++) { 35             View view = LayoutInflater.from(this).inflate(R.layout.main_tab_item, null, false); 36             ImageView ivTab=view.findViewById(R.id.ivTab); 37             TextView tvTab=view.findViewById(R.id.tvTab); 38 
 ivTab.setImageResource(ivTabs[i]); 40  tvTab.setText(tvTabs[i]); 41             if (i==0){ 42  ivTab.setColorFilter(Color.GREEN); 43  tvTab.setTextColor(Color.GREEN); 44  } 45  tabLayout.getTabAt(i).setCustomView(view); 46  } 47         tabLayout.setSelectedTabIndicatorHeight(0); 48         tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { 49  @Override 50             public void onTabSelected(TabLayout.Tab tab) { 51                 View customView = tab.getCustomView(); 52                 ImageView iv = customView.findViewById(R.id.ivTab); 53                 TextView tv = customView.findViewById(R.id.tvTab); 54  iv.setColorFilter(Color.GREEN); 55  tv.setTextColor(Color.GREEN); 56  } 57 
 @Override 59             public void onTabUnselected(TabLayout.Tab tab) { 60                 View customView = tab.getCustomView(); 61                 ImageView iv = customView.findViewById(R.id.ivTab); 62                 TextView tv = customView.findViewById(R.id.tvTab); 63  iv.setColorFilter(Color.WHITE); 64  tv.setTextColor(Color.WHITE); 65  } 66 
 @Override 68             public void onTabReselected(TabLayout.Tab tab) { 69 
 } 71  }); 72 
 } 74 
}