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);
~~~
