App的主頁面布局，常見方式為**TabLayout**+**ViewPager**+**Fragment**組合。
### 一、 TabLayout
1、 TabLayout屬于design類庫，需要在build.gradle文件引入類庫：
~~~
dependencies {
implementation 'com.android.support:design:26.1.0'
}
~~~
2、 xml布局文件
~~~
<android.support.design.widget.TabLayout
android:id="@+id/tabbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
~~~
3、通過以下屬性設置Tab項的字體顏色及底部指示器樣式
~~~
///tab字體及選中字體樣式
app:tabTextColor="@color/your_unselected_text_color"
app:tabSelectedTextColor="@color/your_selected_text_color"
///指示器樣式
app:tabIndicatorColor="@android:color/white"
~~~
4、設置TabLayout的選中事件
~~~
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
~~~
### 二、ViewPager：
> * ViewPager是android-support-v4.jar包中的一個系統控件
> * ViewPager繼承自ViewGroup
> * ViewPager專門用以實現左右滑動切換View的效果
引入類庫：
~~~
dependencies {
implementation 'com.android.support:support-v4:26.1.0'
}
~~~
**ViewPager常用方法**
1. setAdapter(PagerAdapter adapter)
建立與適配器的聯系
2. FragmentPagerAdapter：PagerAdapter類
PagerAdapter類是與ViewPager配合使用的適配器類
ViewPager將調用PagerAdapter來取得所需顯示的頁，而PagerAdapter也會在數據變化時，通知ViewPager。
~~~
@Override
public Fragment getItem(int position) {
return fragment;
}
@Override
public int getCount() {
return xxx;
}
@Override
public CharSequence getPageTitle(int position) {
return title;
}
~~~
### 三、TabLayout與ViewPager綁定
當TabLayout與ViewPager綁定后，切換底部tab或左右滑動pager,確保一致性。
~~~
tabLayout.setupWithViewPager(viewPager);
~~~
