design包 TabLayout使用

类似“网易新闻”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) {
             }
         });
     }

 

 

null