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