TabLayout使用指南

TabLayout是开发中经常使用到的控件,经常与ViewPager一起配合使用,一组tab,可以点击、可以滚动。这不,我们的app中也是用到了这个控件,之前对这个控件只停留在最基本的用法,因此开发时也去查了些资料,趁着周末,就系统地再学习一下。

基本操作

使用之前,首先需要在gradle文件中加入design库,

implementation 'com.android.support:design:28.0.0'

首先看一下最默认的行为与效果。 代码如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp">

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

</android.support.constraint.ConstraintLayout>
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab 3").setIcon(R.mipmap.ic_launcher));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Toast.makeText(MainActivity.this,tab.getText(),Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Toast.makeText(MainActivity.this,tab.getText(),Toast.LENGTH_SHORT).show();
            }
        });

setOnTabSelectedListener是一个过时方法,官方建议使用addOnTabSelectedListener代替,其中监听器接口是一样的,分别表示tab选中、未选中,再次选中状态。其中再次选中状态可以用于实现在选中tab的前提下,再点击时,滚动到最顶部的效果,比如很多资讯类app就是这么实现的。

效果图如下:

默认效果可以看到指示器红色,三个tab平分布局,有icon的显示在文字上方。 如果TabLayout的宽度wrapcontent,那么三个tab将会挤到左边,每个tab的效果是wrapcontent。

以上tab是通过代码添加的,也可以在xml中进行添加,效果等效于

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp">

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="Tab 1" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Tab 2" />

        <android.support.design.widget.TabItem
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:icon="@mipmap/ic_launcher"
            android:text="Tab 3" />

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

</android.support.constraint.ConstraintLayout>

xml属性说明

对于TabLayout的样式修改,一些可以通过修改属性就行修改。

修改指示器

可以修改指示器的颜色和高度,比如:

<android.support.design.widget.TabLayout
        app:tabIndicatorColor="@android:color/holo_green_dark"
        app:tabIndicatorHeight="10dp"
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"/>

效果如下:

修改文字样式

  1. 选中和未选中颜色设置
app:tabSelectedTextColor="#FF0000"
        app:tabTextColor="#0000FF"

效果如下图:

  1. 修改文字大小 使用textAppearence属性,在style文件中设置大小。
app:tabTextAppearance="@style/my_tab_text_style"

mytabtext_style内容如下:

<style name="my_tab_text_style">
        <item name="android:textSize">20sp</item>
        <item name="android:textStyle">bold</item>
    </style>

效果如下:

修改tab样式

  1. 使用padding参数,可以使用tabPadding进行设置,比如: 可以看到预览图的效果如下:
  1. <android.support.design.widget.TabLayout
  2. app:tabPaddingTop="20dp"
  3. android:paddingBottom="20dp"
  4. android:id="@+id/tabLayout"
  5. android:layout_width="match_parent"
  6. android:layout_height="wrap_content">
  1. tabMode。tabMode支持两种值,MODEFIXED和MODESCROLLABLE;当tab比较多,一屏容纳不下时,会使用MODE_SCROLLABLE,这时可以隐藏部分MODE;而FIXED的就会始终显示。 当在xml布局中添加了很多TabItem后,预览效果如下图:

这时使用的就是FIXED模式,可以看到TabLayout默认就是FIXED模式;当改成MODE_SCROLLABLE后, 预览样式如下图:

  1. app:tabMode="scrollable"
  1. Tab位置。当只有三个tab时,默认分散了,如果想三个tab聚合起来,可以通过设置tabGravity属性进行设置,比如: 设置后的效果如下:

设置前的效果就是前面三个tab平铺的效果。改属性的默认值是fill。 另外,可以通过设置tabContentStart设置偏移量,类似margin。 比如设置: 后的效果如下图:

  1. app:tabContentStart="100dp"
  2. app:tabGravity="center"
  1. 设置tab背景。tabBakcground属性,比如设置的样式如下: 效果图:
  1. <shapexmlns:android="http://schemas.android.com/apk/res/android"
  2. android:shape="rectangle"
  3. >
  4. <size
  5. android:width="50dp"
  6. android:height="30dp"
  7. ></size>
  8. <gradient
  9. android:startColor="#FF0000"
  10. android:endColor="#0000FF"
  11. ></gradient>
  12. </shape>
  1. tab宽度,可以通过设置tabMaxWidth和tabMinWidth进行限制。

TabItem样式自定义

以上的xml样式,都可以通过相应的set方法进行设置,但是如果想改变默认的tab样式,那么就需要代码的操作了。默认的tab样式,icon在上,text在下;下面改个icon在左,text在右的样式。

首先定义一个布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_height="48dp"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:padding="12dp"
        android:id="@+id/iv_icon"
        tools:src="@mipmap/ic_launcher"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <TextView
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textSize="18sp"
        android:textColor="#333333"
        android:id="@+id/tv_text"
        android:layout_width="0dp"
        android:layout_height="21dp"
        app:layout_constraintLeft_toRightOf="@id/iv_icon"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="hha" />


</android.support.constraint.ConstraintLayout>

然后在代码中更改TabLayout现有Tab样式,代码如下:

tabLayout=findViewById(R.id.tabLayout);

        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            View view=LayoutInflater.from(this).inflate(R.layout.my_tab_layout,null);
            tab.setCustomView(view);
            ((ImageView)view.findViewById(R.id.iv_icon)).setImageDrawable(tab.getIcon());
            ((TextView)view.findViewById(R.id.tv_text)).setText(tab.getText());
        }

运行结果如下图:

可以看到tab样式已经变成了icon在左,文字在右的样式。

集成ViewPager

布局如下:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        app:layout_constraintTop_toBottomOf="@id/tabLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        android:layout_height="0dp"></android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

代码如下:

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    private int[] imgs=new int[]{
            R.drawable.pic_11,
            R.drawable.pic_12,
            R.drawable.pic_11
    };

    private String[] tabs=new String[]{
      "Tab 1",
      "Tab 2",
      "Tab 3",
    };


    private List<ImgFragment> imgFragments=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout=findViewById(R.id.tabLayout);
        viewPager=findViewById(R.id.viewpager);

        for (int i = 0; i < imgs.length; i++) {
            imgFragments.add(ImgFragment.newInstance(imgs[i]));
        }

        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return imgFragments.get(i);
            }

            @Override
            public int getCount() {
                return imgFragments.size();
            }

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return tabs[position];
            }
        });

        tabLayout.setupWithViewPager(viewPager);

    }
}

运行效果如下:

这里需要注意的是:当调用了setupWithViewPager之后,tab值默认将会从getPageTitle中获取;如果这个时候没有重写PageAdapter的getPageTitle,那么效果将会如下图:

这个时候可以发现TabLayout上面都是空的,但其实是有tab的,只不过tab内容为空而已。这个时候可以通过代码重新设置,比如:

tabLayout.setupWithViewPager(viewPager);
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab=tabLayout.getTabAt(i);
            tab.setText(tabs[i]);
            tab.setIcon(imgs[i]);
        }

效果如下图:

可以看到,不止设置了text,还设置了title,使用PageAdapter只能设置text。

总结

至此,TabLayout的基本用法也就是这样了;除了这个,还有与Toolbar以及协调布局共同使用的情况,这个以后有机会会继续深入的学习下。

DEMO地址

参考内容

  • https://developer.android.com/reference/android/support/design/widget/TabLayout
  • TabLayout之自定义样式
  • MaterialDesign之对TabLayout的探索
  • Design库-TabLayout属性详解

本文分享自微信公众号 - 每天学点Android知识(android_every_day),作者:星风coder

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 自定义Material点击效果的View

    最近在做项目的时候,遇到一个需求,需要自定义一个View;写到布局文件里面,希望也有Material的波纹点击效果,需要怎么弄呢?

    用户1108631
  • 让View跟随状态动起来——StateListAnimator

    StateListAnimator定义了一组动画,可以根据View drawable的状态进行不同的切换。所谓状态指的是statepressed、stateen...

    用户1108631
  • AppBarLayout学习

    AppBarLayout是一个垂直的LinearLayout,实现了很多和协调布局一起合作的滚动属性。其子View可以通过setScrollFlags()或在x...

    用户1108631
  • 1-AVI--Fragment基础使用

    张风捷特烈
  • Android在PopWindow中使用Spinner的心路历程

    最近在开发的项目程序中用到了PopWindow,结果在里面需要加一个点击选择的列表,于是就准备使用Spinner放在PopWindow,期间经历了几个问题,最后...

    Vaccae
  • Android:手把手教你 实现Activity 与 Fragment 相互通信(含Demo)

    Carson.Ho
  • Android开发高级进阶——多线程(实现简单下载器)

    Android3.0以及以后的版本中,禁止在主线程执行网络请求,否则会抛出异常,可见在UI线程中执行耗时操作是不推荐的行为。所以,在进行与耗时操作同步进行的操作...

    trampcr
  • Android中Fragment+ViewPager的配合使用

    官方推荐 ViewPager与Fragment一起使用,可以更加方便的管理每个Page的生命周期,这里有标准的适配器实现用于ViewPager和Fragment...

    欢醉
  • Android官方提供的支持不同屏幕大小的全部方法

    为了确保你的布局能够自适应各种不同屏幕大小,你应该在布局的视图中使用"wrap_content"和"match_parent"来确定它的宽和高。如果你使用了"...

    梦_之_旅
  • 从0系统学Android--4.1探究碎片

    平板电脑和手机最大的区别就在于屏幕的大小,一般手机的屏幕大小会在 3 英寸到 6 英寸之间,而一般平板电脑屏幕大小会在 7 英寸到 10 英寸之间。屏幕大小差距...

    开发者

扫码关注云+社区

领取腾讯云代金券