TabLayout的基础使用

TabLayout

作用：用于显示可切换的标签效果，替代PagerTabStrip的效果，且效果比PagerTabStrip要好看（用于实现类似于ActionBar的Tab导航效果，TabLayout的效果要优良与Tab导航模式）

原因：当前的TabLayout可以任意指定标签的位置，如页面上方或者下方

基本使用

• 在Project Structure的Denpendencies标签中选择+按钮添加Library：com.android.support:design:23.1.0

(导入design包，design包的全名：com.android.support:design:23.1.0)

• 在布局文件中添加要显示的TabLayout控件

注意：在设置标签名称时必须设置TabLayout的全路径

• 在代码中获取TabLayout控件对象
• 通过以下方式添加标签：

tabLayout.addTab(tabLayout.newTab().setText("Tab"+i));

同时Tab对象也可通过setIcon，setCustomView等方式设置标签中显示的图标或者自定义View视图

TabLayout常用的设置方法： //设置选中标签下方导航条的颜色 //        tl.setSelectedTabIndicatorColor(Color.GREEN);         //设置选中标签下方导航条的高度 //        tl.setSelectedTabIndicatorHeight(30);         /*         * 设置标签的字体颜色         * 1.非选中标签的字体颜色         * 2. 选中标签的字体颜色         * */ //        tl.setTabTextColors(Color.BLUE,Color.GREEN);         /*         * 设置Tab的模式         * 可选：         * MODE_FIXED   宽度始终是tl控件指定的宽度，如果标签过多，那么就无限挤压控件         * MODE_SCROLLABLE  每个标签都保持自身宽度，一旦标签过多，给标题栏提供支持横向滑动的功能         * */ //        tl.setTabMode(TabLayout.MODE_SCROLLABLE);         //设置Tab标签的对其方式         //注意：此条属性必须配合MODE_FIXED进行使用         /*         * 可选择的参数值：         * GRAVITY_FILL   让每个标签平分TabLayout的全部宽度         * GRAVITY_CENTER   让每个标签显示自身宽度，然后所有标签居中显示         * */         tl.setTabGravity(TabLayout.GRAVITY_FILL);

常用属性：

• app:tabIndicatorColor tab的指示符颜色
• app:tabSelectedTextColor 选择tab的文本颜色
• app:tabTextColor 普通tab字体颜色
• app:tabMode 模式，可选fixed和scrollable fixed是指固定个数， scrollable是可以横行滚动的（逼格高）
• app:tabGravity 对齐方式，可选fill和center

 注意：此两种属性值只有在tabMode设置为fixed的情况下有效

监听事件：setOnTabSelectedListener

TabLayout的监听事件：   tl.setOnTabSelectedListener(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的适配器子类中添加重写的getPageTitle方法，通过修改返回值设置对应position的标签上显示的标题文字
• 通过tablayout对象调用setUpWithPager方法将tabLayout与viewpager绑定起来

         注意：此方法必须在viewpager设置了适配器之后才能调用

TabLayout与Fragment结合使用的方式：   通过以上方式初始化Tablayout的显示 通过设置setonTabSelectedlistener获取标签被选中的时刻 在标签被选中的onTabSelected方法中，获取被选中的标签对应Tag属性值 根据tag属性的值设置Fragment的显示内容   public void onTabSelected(TabLayout.Tab tab) {     //获取当前被选中的tab标签的tag属性     int tag = Integer.parseInt(tab.getTag().toString());     /*     *     * */     Fragment frag = manager.findFragmentByTag(""+tag);     if (frag == null) {         //代表没有被添加到屏幕上         manager.beginTransaction().add(R.id.frameLayout,fragments.get(tag),tag+"").commit();     }     FragmentTransaction ft = manager.beginTransaction();     for (int i=0;i<fragments.size();i++) {         if (i == tag) {             ft.show(fragments.get(i));         } else {             ft.hide(fragments.get(i));         }     }     ft.commit(); }

TabLayout与ViewPager结合使用的方式：   获取TabLayout对象，设置一个数据或集合用于存储所有标签上显示标题名称 初始化ViewPager的显示并设置适配器 在ViewPager适配器的子类中重写getPageTitle方法，通过返回值控制每个标签上显示的题目   @Override public CharSequence getPageTitle(int position) {     return titles[position]; }     通过TagLayout对象调用setUpWithPager（viewpager）方法将TabLayout与ViewPager绑定起来   //将Viewpager和TabLayout绑定起来， //注意：此方法必须在viewpager setAdapter之后调用 tl.setupWithViewPager(pager);