专栏首页Android 技术栈TabLayout 的几种用法
原创

TabLayout 的几种用法

1.结合ViewPager使用

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

tablayout01.gif

布局文件:

        <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页面:

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不同在于它有下划线可以滑动,更动感...,如果产品经理要求这样实现,就可以派上用场了。

布局文件:

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

       for (String bean : list) {

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

            tab.setText(bean.getName());

            binding.tlSearch.addTab(tab);

        }

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

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代码量更少。

布局文件:

            <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里控制:

            // 添加自定义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();
 // 哪个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里。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Git commit 规范

    git提交估计也快上万次了,每次不知道怎么写好,今天在网上找到一套规范然后加上常用的一些,总结出来一套 Git commit 规范,没有强制的规定,主要是翻阅以...

    Jingbin
  • 《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

    一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目。项目采取的是Retrofit + R...

    Jingbin
  • Android 水波纹效果的探究

    水波纹效果从Android5.0就已经出来了,基本的使用相信大家都知道了,这里多谈一些相对深层次的使用:

    Jingbin
  • Git commit 规范

    git提交估计也快上万次了,每次不知道怎么写好,今天在网上找到一套规范然后加上常用的一些,总结出来一套 Git commit 规范,没有强制的规定,主要是翻阅以...

    Jingbin
  • Android开发笔记(一百四十七)标签布局TabLayout

    标签布局TabLayout是MaterialDesign库中的一个新控件,常与工具栏Toolbar搭配使用。大家平时常用的Ap...

    用户4464237
  • Material Design整理(八)——TabLayout

    一般我们的app主界面都是界面下方或者上方有指示器,结合ViewPager或者Fragment来实现。而指示器可以是RadioGroup或者是其他简单的View...

    蜻蜓队长
  • AndroidX TabLayout使用、扩展及解析All In One

    TabLayout仍旧是移动端比较常用的一个控件,这里分析一下TabLayout,分别从下面几个方面进行解析:

    jerrypxiao
  • 常见Button使用详解

    Button(按钮)是Android开发中使用非常频繁的组件,主要是在UI界面上生成一个按钮,该按钮可以供用户单击,当用户单击按钮时,按钮会触发一个onC...

    分享达人秀
  • 创建自定义控件

    Dream城堡
  • 日期选择器DatePicker和时间选择器TimePicker

    在实际开发中,经常会遇见一些时间选择器、日期选择器、数字选择器等需求,那么从本期开始来学习Android中常用选择器,今天学习的是DatePicker和...

    分享达人秀

扫码关注云+社区

领取腾讯云代金券