TabLayout 的几种用法

1.结合ViewPager使用

这是最常见的用法了，实现也比较简单。

布局文件：

1        <android.support.design.widget.TabLayout
2            android:id="@+id/tab_book"
3            android:layout_width="match_parent"
4            android:layout_height="38dp"
5            app:tabBackground="@drawable/ripple_tab_bg"
6            app:tabIndicatorColor="@color/colorTheme"
7            app:tabSelectedTextColor="@color/colorTheme"
8            app:tabTextColor="@color/colorTabText" />
9
10        <android.support.v4.view.ViewPager
11            android:id="@+id/vp_book"
12            android:layout_width="match_parent"
13            android:layout_height="match_parent">
14
15        </android.support.v4.view.ViewPager>

对应的Activity页面：

1public class WanFragment extends BaseFragment<NoViewModel,FragmentBookBinding> {
2
3    private ArrayList<String> mTitleList = new ArrayList<>(3);
4    private ArrayList<Fragment> mFragments = new ArrayList<>(3);
5
6    @Override
7    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
8        super.onActivityCreated(savedInstanceState);
9
10        showLoading();
11        initFragmentList();
12        MyFragmentPagerAdapter myAdapter = new MyFragmentPagerAdapter(getChildFragmentManager(), mFragments, mTitleList);
13        bindingView.vpBook.setAdapter(myAdapter);
14        // 左右预加载页面的个数
15        bindingView.vpBook.setOffscreenPageLimit(2);
16        myAdapter.notifyDataSetChanged();
17        bindingView.tabBook.setTabMode(TabLayout.MODE_FIXED);
18        bindingView.tabBook.setupWithViewPager(bindingView.vpBook);
19        showContentView();
20    }
21
22    @Override
23    public int setContent() {
24        return R.layout.fragment_book;
25    }
26
27    private void initFragmentList() {
28        mTitleList.clear();
29        mTitleList.add("玩安卓");
30        mTitleList.add("知识体系");
31        mTitleList.add("导航数据");
32        mFragments.add(BannerFragment.newInstance());
33        mFragments.add(TreeFragment.newInstance());
34        mFragments.add(NaviFragment.newInstance());
35    }
36}

设置后就可以达到切换滑动的效果。

2.点击滑动选中，类似RadioGroup的效果

不过它与RadioGroup不同在于它有下划线可以滑动，更动感...，如果产品经理要求这样实现，就可以派上用场了。

布局文件：

1<android.support.design.widget.TabLayout
2            android:id="@+id/tl_search"
3            android:layout_width="match_parent"
4            android:layout_height="30dp"
5            android:background="@color/colorTheme"
6            app:tabGravity="center"
7            app:tabIndicatorColor="@color/colorWhite"
8            app:tabMode="fixed"
9            app:tabSelectedTextColor="@color/colorWhite"
10            app:tabTextAppearance="@style/MyTabLayoutTextAppearance"
11            app:tabTextColor="@color/colorWhiteHalf">
12
13            <android.support.design.widget.TabItem
14                android:layout_width="wrap_content"
15                android:layout_height="wrap_content"
16                android:text="玩安卓"
17                android:textColor="@color/colorWhite"
18                android:textSize="12sp" />
19
20            <android.support.design.widget.TabItem
21                android:layout_width="wrap_content"
22                android:layout_height="wrap_content"
23                android:text="干货 | 安卓"
24                android:textColor="@color/colorWhite"
25                android:textSize="12sp" />
26
27            <android.support.design.widget.TabItem
28                android:layout_width="wrap_content"
29                android:layout_height="wrap_content"
30                android:text="干货 | 全部"
31                android:textColor="@color/colorWhite"
32                android:textSize="12sp" />
33
34            <android.support.design.widget.TabItem
35                android:layout_width="wrap_content"
36                android:layout_height="wrap_content"
37                android:text="网页"
38                android:textColor="@color/colorWhite"
39                android:textSize="12sp" />
40        </android.support.design.widget.TabLayout>

当然也可以在Activit动态添加，其中的一些颜色设置等就不细说了~：

1       for (String bean : list) {
2            MyTabLayout.Tab tab = binding.tlSearch.newTab();
3            tab.setText(bean.getName());
4            binding.tlSearch.addTab(tab);
5        }

然后再监听点击的时候做处理：

1binding.tlSearch.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
2    @Override
3    public void onTabSelected(TabLayout.Tab tab) {
4        // 选中 逻辑操作 (再次点击不会触发)
5    }
6
7    @Override
8    public void onTabUnselected(TabLayout.Tab tab) {
9
10    }
11
12    @Override
13    public void onTabReselected(TabLayout.Tab tab) {
14
15    }
16});

3.点击滑动到屏幕中央，并再次点击可取消

这样的效果很实用，很多App都会有这样的效果，以前我都是用HorizontalScrollView来实现的，设置点击的item滑动到屏幕中央。

后来想想TabLayout继承自HorizontalScrollView，选中也会自动滚动并居中，于是就选用了它来实现，相对于直接使用HorizontalScrollView代码量更少。

布局文件：

1            <android.support.design.widget.TabLayout
2                android:id="@+id/tl_tag"
3                android:layout_width="match_parent"
4                android:layout_height="40dp"
5                app:tabIndicatorHeight="0dp"
6                app:tabMode="scrollable"
7                app:tabSelectedTextColor="@color/color_theme" />

Activity里控制：

1            // 添加自定义Tab
2            for (int i = 0; i < result.size(); i++) {
3                TabLayout.Tab tab = bindingView.tlTag.newTab();
4                bindingView.tlTag.addTab(tab.setCustomView(getTabView(result.get(i).getName())));
5            }
6            // 默认 手动设置 position=0的Tab不选中
7            if (bindingView.tlTag.getTabAt(0) != null
8                    && bindingView.tlTag.getTabAt(0).getCustomView() != null) {
9                bindingView.tlTag.getTabAt(0).getCustomView().setSelected(false);
10            }
11            // 添加监听
12            addTagListener();
13
14
15
16 // 哪个tag被选择过
17private int tagSelectPosition = 0;
18// 是否被选中
19private boolean tagSelect = false;
20
21// 主要处理取消选中的状态
22private void addTagListener() {
23    bindingView.tlTag.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
24        @Override
25        public void onTabSelected(TabLayout.Tab tab) {
26            // // 切换到此tab，则设置已选中position和选中的状态
27            tagSelectPosition = tab.getPosition();
28            tagSelect = true;
29            // do something..
30        }
31
32        @Override
33        public void onTabUnselected(TabLayout.Tab tab) {
34        }
35
36        @Override
37        public void onTabReselected(TabLayout.Tab tab) {
38            // // Tab再次被点击会走这里
39            // 之前手动 [取消] 的tab角标 初始值为0
40            if (tagSelectPosition == tab.getPosition()) {
41                if (tagSelect) {
42                    // tab之前被选中，则手动取消
43                    if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
44                            && bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
45                        tagSelectPosition = tab.getPosition();
46                        tagSelect = false;
47                        bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView().setSelected(false);
48                        // do something..
49                    }
50
51                } else {
52                    // tab之前被取消，则手动将其选中
53                    if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
54                            && bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
55                        tagSelectPosition = tab.getPosition();
56                        tagSelect = true;
57                         // do something..
58                    }
59                }
60            } else {
61                // 一般不会触发，以防万一
62                if (bindingView.tlTag.getTabAt(tab.getPosition()) != null
63                        && bindingView.tlTag.getTabAt(tab.getPosition()).getCustomView() != null) {
64                    tagSelectPosition = tab.getPosition();
65                    tagSelect = true;
66                     // do something..
67                }
68            }
69        }
70    });
71}

相关代码

第一部分：WanFragment.java 第二部分：SearchActivity.java

完整Demo项目：https://github.com/youlookwhat/CloudReader

第三部分因为是公司项目，暂时只有上面的代码片段，已包含所有的相关代码，如果有问题请留言，我会重新整理在Demo里。