类似“网易新闻”UI设计就很好，顶部是导航，下面是各个页面。如图
这种效果使用design包中的TabLayout可以轻松的实现。
一、分析TabLayout 常见 UI
上图效果可以用如下代码实现：
//设置背景色
mTabLayout.setBackgroundColor(Color.LTGRAY);
//设置填满TabLayout,或者居中
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置tabLayout是可以滑动的,或者固定大小
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置选中的Tab指示器为蓝色
mTabLayout.setSelectedTabIndicatorColor(Color.RED);
//设置正常字体颜色和被选中字体颜色
mTabLayout.setTabTextColors(Color.WHITE,Color.RED);
//添加Tab条目
mTabLayout.addTab(mTabLayout.newTab().setText("头条"));
mTabLayout.addTab(mTabLayout.newTab().setText("热点"));
mTabLayout.addTab(mTabLayout.newTab().setText("娱乐"));
mTabLayout.addTab(mTabLayout.newTab().setText("体育"));
mTabLayout.addTab(mTabLayout.newTab().setText("奥运"));
二、分析Tab
Tab中的set方法都会返回Tab本身，也就是说这是链式调用。修改代码效果，如下所示：
代码如下所示：
//设置背景色
mTabLayout.setBackgroundColor(Color.LTGRAY);
//设置填满TabLayout,或者居中
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//设置tabLayout是可以滑动的,或者固定大小
mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
//设置选中的Tab指示器为蓝色
mTabLayout.setSelectedTabIndicatorColor(Color.RED);
//设置正常字体颜色和被选中字体颜色
mTabLayout.setTabTextColors(Color.WHITE,Color.RED);
//添加Tab条目
//添加图标
mTabLayout.addTab(mTabLayout.newTab().setText("头条").setIcon(R.drawable.th_languages));
//添加自定义View作为Tab
ImageView redian = new ImageView(this);
redian.setImageResource(R.drawable.th_lastfm);
mTabLayout.addTab(mTabLayout.newTab().setText("热点").setCustomView(redian));
ImageView yule = new ImageView(this);
yule.setImageResource(R.drawable.th_lexitron);
mTabLayout.addTab(mTabLayout.newTab().setCustomView(yule));
mTabLayout.addTab(mTabLayout.newTab().setText("体育"));
mTabLayout.addTab(mTabLayout.newTab().setText("奥运"));
三、TabLayout的回调
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//选中的Tab
Log.d("MainActivity", "onTabSelected position:" + tab.getPosition() + "\t text:" + tab.getText());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//取消选中的Tab，即上一个选中的Tab
Log.d("MainActivity", "onTabUnselected position:" + tab.getPosition() + "\t text:" + tab.getText());
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
//再次选择某个选项卡，即选择当前选中的Tab会调用；而不是选中之前选过的Tab
Log.d("MainActivity", "onTabReselected position:" + tab.getPosition() + "\t text:" + tab.getText());
}
});注意：1-当前是“头条”，重复点击会调用onTabReselected回调。
2-点击“热点”,所以上一个是“头条”，当前是“热点”。
3-再点击“头条”，不会调用onTabReselected回调。
四、和Viewpager结合使用
TabLayout中提供了一个Viewpager页面切换的监听器，如下源码。
/**
* A {@link ViewPager.OnPageChangeListener} class which contains the
* necessary calls back to the provided {@link TabLayout} so that the tab position is
* kept in sync.
*
* <p>This class stores the provided TabLayout weakly, meaning that you can use
* {@link ViewPager#addOnPageChangeListener(ViewPager.OnPageChangeListener)
* addOnPageChangeListener(OnPageChangeListener)} without removing the listener and
* not cause a leak.
*/
public static class TabLayoutOnPageChangeListener implements ViewPager.OnPageChangeListener {
private final WeakReference<TabLayout> mTabLayoutRef;
private int mPreviousScrollState;
private int mScrollState;
public TabLayoutOnPageChangeListener(TabLayout tabLayout) {
mTabLayoutRef = new WeakReference<>(tabLayout);
}
@Override
public void onPageScrollStateChanged(int state) {
mPreviousScrollState = mScrollState;
mScrollState = state;
}
@Override
public void onPageScrolled(int position, float positionOffset,
int positionOffsetPixels) {
final TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null) {
// Only update the text selection if we're not settling, or we are settling after
// being dragged
final boolean updateText = mScrollState != SCROLL_STATE_SETTLING ||
mPreviousScrollState == SCROLL_STATE_DRAGGING;
// Update the indicator if we're not settling after being idle. This is caused
// from a setCurrentItem() call and will be handled by an animation from
// onPageSelected() instead.
final boolean updateIndicator = !(mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
}
}
@Override
public void onPageSelected(int position) {
final TabLayout tabLayout = mTabLayoutRef.get();
if (tabLayout != null && tabLayout.getSelectedTabPosition() != position) {
// Select the tab, only updating the indicator if we're not being dragged/settled
// (since onPageScrolled will handle that).
final boolean updateIndicator = mScrollState == SCROLL_STATE_IDLE
|| (mScrollState == SCROLL_STATE_SETTLING
&& mPreviousScrollState == SCROLL_STATE_IDLE);
tabLayout.selectTab(tabLayout.getTabAt(position), updateIndicator);
}
}
private void reset() {
mPreviousScrollState = mScrollState = SCROLL_STATE_IDLE;
}
}
所以，在使用过程中很简单：
tabLayout.addTab(tabLayout.newTab().setText("全部订单"));
tabLayout.addTab(tabLayout.newTab().setText("待发货"));
tabLayout.addTab(tabLayout.newTab().setText("配送/自提"));
tabLayout.addTab(tabLayout.newTab().setText("配送/自提"));
tabLayout.addTab(tabLayout.newTab().setText("已完成"));
PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(adapter);
//使用TabLayout提供的监听
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//设置ViewPager联动
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
});
}