八、TabLayout

一、概述

TabLayout继承关系.png

它也是design中新出的一个控件，用来实现选项卡切换的效果，以前我们常用RadioGroup+RadioButton或者TabHost等来实现，现在可以用TabLayout轻松的搞定；

二 、基本使用

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

</android.support.design.widget.CoordinatorLayout>

在Activity中的代码设置如下：

 mTabLayout = (TabLayout) findViewById(R.id.ac_tablayout);
        //最基本的使用
        mTabLayout.addTab(mTabLayout.newTab().setText("tab1"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab2"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab3"));
        mTabLayout.addTab(mTabLayout.newTab().setText("tab4"));

基本的效果图.png

进本的使用方式还有另外一种，如下布局，直接在xml中填充布局选项：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">

    <android.support.design.widget.TabLayout
        app:tabMode="fixed"
        android:id="@+id/ac_tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab1"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab2"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab3"
            android:layout_height="wrap_content" />
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:text="Tab4"
            android:layout_height="wrap_content" />

    </android.support.design.widget.TabLayout>

</android.support.design.widget.CoordinatorLayout>

一般情况下，布局的tab项是动态配置的，就不能这样使用，必须在代码中动态配置；

三、TabLayout常用的属性

• 1.app:tabIndicatorColor 设置指示器的颜色；
• 2.app:tabIndicatorHeight 设置指示器的高度；
• 3.app:tabTextColor 设置Tab文本默认的颜色，如果不设置，默认黑色；
• 4.app:tabSelectedTextColor 设置tab被选中的文本的颜色，如果不设置，默认是黑色；
• 5.app:tabTextAppearance 设置tab文本样式，一般需要为tab添加图标时使用，引用一个style布局，可以代替上面的3和4的设置，如果3、4、5同时设置，5将不起作用；
• 6.app:tabBackground 设置tab的背景色；
• 7.app:tabGravity 设置tab项的对齐方式
• 1.center 居中显示；
• 2.fill 填满显示；
• 8.app:tabMode 有两个值；
• 1.fixed 用于标题栏少于一屏幕的情况，每个tab将平分屏幕的宽度；
• 2.scrollable 用于标题栏一屏幕显示不下的情况，可以左右滚动；如果占不满一屏幕，只会占用一部分，效果不太好，具体的根据需求来设置；
• 9.app:tabContentStart 设置tab开始布局的位置距离左边的距离，此时tabMode必须为scrollable才有效果，否则无效果；
• 10.app:tabMinWidth 设置tab项的最小宽度；
• 11.app:tabMaxWidth 设置tab项的最大宽度；如果tabMaxWidth小于tabMinWidth，会以tabMaxWidth为准；
• 12.app:tabPadding 设置tab的内边距：
• 1. app:tabPaddingStart
• 2.app:tabPaddingBottom
• 3.app:tabPaddingTop
• 4.app:tabPaddingEnd
  备注：以上属性都能通过代码设置

四 、TabLayout中的代码配置tab项

TabLayout.newTab() 创建标签
TabLayout.addTab() 添加标签 ：因为TabLayout继承自HorizontalScrollView，所以可以直接添加View,内部使用addView（）；

TabLayout.removeTab() 删除标签
TabLayout.removeTabAt() 通过索引删除标签
TabLayout.removeAllTabs() 删除全部标签

五 、添加监听

TabLayout.addOnTabSelectedListener(TabLayout.OnTabSelectedListener listener) 添加监听器；
TabLayout.removeOnTabSelectedListener(abLayout.OnTabSelectedListener listener) 取消监听器；
TabLayout.clearOnTabSelectedListeners() 清除所有的监听；

六 、获取TabLayout的属性

TabLayout.getSelectedTabPosition() 获取当前选中的Tab的位置；
TabLayout.getTabAt(int index) 根据索引获取当前索引的Tab；
TabLayout.getTabCount() 获取tab的总数；
TabLayout.getTabMode() 获取tab的mode；有对应的set方法；
TabLayout.getTabTextColors() 获取对应tab的TextColor属性；有对应的set方法；
TabLayout.setupWithViewPager(ViewPager viewPager) 设置与之关联的ViewPager，随着ViewPager的滑动而滑动；
TabLayout和ViewPager常见的使用方式有两种：
1.ViewPager包裹TabLayout进行嵌套，不需要设置setupWithViewPager，如果嵌套了还设置了此方法，就会报错;
2.如果没有设置，则需要在ViewPager设置Adapter之后设置setupWithViewPager；
3.注意：只能ViewPager嵌套TabLayout,反了就会报错，因为TabLayout中只能嵌套TabItem；

七 、TabLatyou中的内部类：Tab

Tab表示TabLayout中的一个标签;具体的属性如下：

• 1. boolean isSelected() tab是否被选中；
• 2.void setSelected() 设置tab为被选中状态；
• 3.Tab setText() 设置tab的文本内容；
• 4.String getText() 得到tab的文本内容；
• 5.Tab setIcon() 为tab设置图标；
• 6.Drawable getIcon() 获取tab的图标；
• 7.Tab setCustomView(int resId or View view) 设置自定义的View，参数为资源id或View对象；
• 8.int getPosition() 获取当前的位置；

八 、TabLayout自定义Tab布局--使用setCustomView

• 1.首先自定义一个布局，item_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="40dp"
        android:src="@mipmap/ic_launcher_round"
        android:layout_gravity="center"
        android:id="@+id/item_imageview"
        android:layout_height="40dp" />
    <TextView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:id="@+id/item_textview"
        android:layout_gravity="center"
        android:text="desc"
        android:gravity="center"
        android:layout_height="wrap_content" />
</LinearLayout>

• 2.其次，在FragmentPageAdapter中重写getPageTitle方法，返回null，其实不重写也行；然后自定义一个获取View的方法，如下：

  /**
         * 使用我们自定义的布局时，这里返回null
         * @param position
         * @return
         */
        @Override
        public CharSequence getPageTitle(int position) {
            return null ;
        }

        /**
         * 定义一个方法 返回tab中要显示的内容；
         * 注意：在我们使用自定义的tab时，将getPagerTitle返回null，不设置也一样的
         * @param position
         * @return
         */
        public View getCustomTabView(int position) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.item_tablayout, null);
            ImageView image = (ImageView) view.findViewById(R.id.item_imageview);
            TextView textView = (TextView) view.findViewById(R.id.item_textview);
            textView.setText(titles.get(position));
            image.setImageResource(images[0]);
            return view ;

        }

• 3.在Activity中给每一个tab项设置自定义的View即可；在setupWithViewPager方法之后调用上述方法给每一个Tab设置自定义View；

 List<String> titles = new ArrayList<>();
        for (int i = 'A';i<'z';i++) {
            titles.add("" + (char) i);
        }
        List<Fragment> fragments = new ArrayList<>();
        for (String title : titles) {
            DemoFragment fragment = new DemoFragment().newInstance(title);
            fragments.add(fragment);
        }

        DemoFragmentAdapter adapter = new DemoFragmentAdapter(this,getSupportFragmentManager(),titles,fragments);

        mViewPager.setAdapter(adapter);
        mTabLayout.setupWithViewPager(mViewPager);

        /**
         * 给每一个Tab设置自定义布局
         */
        for (int i = 0;i<mTabLayout.getTabCount();i++) {
            TabLayout.Tab tab_item = mTabLayout.getTabAt(i);
            tab_item.setCustomView(adapter.getCustomTabView(i));
        }

github仓库

相关内容：

一、CoordinatorLayout的梳理与使用

二、Toolbar的梳理与使用

三、TextInputLayout的梳理与使用

四、FloatingActionButton的梳理与使用

五、Snackbar的梳理与使用

六、CardView的梳理与使用

七、BottomSheetDialog的梳理与使用

八、TabLayout的梳理与使用