JingBin's Home

TabLayout的几种用法

发表于 | 更新于 | 分类于 | 阅读次数
  • 1.结合ViewPager使用
  • 2.点击滑动选中，类似RadioGroup的效果
  • 3.点击滑动到屏幕中央，并再次点击可取消

1.结合ViewPager使用

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

tablayout01.gif

布局文件：

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

对应的Activity页面：

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

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

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

tablayout02.gif

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

布局文件：

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

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

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

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

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

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

tablayout03.gif

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

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

布局文件：

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

Activity里控制：

1
2
3
4
5
6
7
8
9
10
11
12
// 添加自定义Tab
for (int i = 0; i < result.size(); i++) {
    TabLayout.Tab tab = bindingView.tlTag.newTab();
    bindingView.tlTag.addTab(tab.setCustomView(getTabView(result.get(i).getName())));
}
// 默认 手动设置 position=0的Tab不选中
if (bindingView.tlTag.getTabAt(0) != null
        && bindingView.tlTag.getTabAt(0).getCustomView() != null) {
    bindingView.tlTag.getTabAt(0).getCustomView().setSelected(false);
}
// 添加监听
addTagListener();

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

相关代码

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

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

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