前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TabLayout 的几种用法

TabLayout 的几种用法

原创
作者头像
Jingbin
发布2019-03-19 20:19:55
1.3K0
发布2019-03-19 20:19:55
举报
文章被收录于专栏:Android 技术栈

1.结合ViewPager使用

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

tablayout01.gif
tablayout01.gif

布局文件:

代码语言:txt
复制
        <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.ViewPage

            android:id="@+id/vp\_book"

            android:layout\_width="match\_parent"

            android:layout\_height="match\_parent">



        </android.support.v4.view.ViewPager>

对应的Activity页面:

代码语言:txt
复制
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
tablayout02.gif

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

布局文件:

代码语言:txt
复制
<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动态添加,其中的一些颜色设置等就不细说了~:

代码语言:txt
复制
       for (String bean : list) {

            MyTabLayout.Tab tab = binding.tlSearch.newTab();

            tab.setText(bean.getName());

            binding.tlSearch.addTab(tab);

        }

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

代码语言:txt
复制
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
tablayout03.gif

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

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

布局文件:

代码语言:txt
复制
            <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里控制:

代码语言:txt
复制
            // 添加自定义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();
代码语言:txt
复制
 // 哪个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/CloudReade

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.结合ViewPager使用
  • 2.点击滑动选中,类似RadioGroup的效果
  • 3.点击滑动到屏幕中央,并再次点击可取消
  • 相关代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档