Material Design整理（八）——TabLayout

蜻蜓队长

发布于 2018-08-03 11:36:44

1.3K0

发布于 2018-08-03 11:36:44

简介

一般我们的app主界面都是界面下方或者上方有指示器，结合ViewPager或者Fragment来实现。而指示器可以是RadioGroup或者是其他简单的View（如TextView），但复杂的业务逻辑需要我们自己控制，还有过度动画也需要自己实现。

如今，Android中也有自带这种指示器的控件TabLayout。TabLayout存在于android design库中，它提供了一个水平的布局来展示Tabs。

今天我们一起使用TabLayout+ViewPager来实现主界面效果（如上图），也一起了解一下TabLayout的使用。

使用

1、添加依赖

当然了，第一步还是添依赖，好无聊

compile 'com.android.support:design:26.0.0-alpha1'

2、布局中使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="推荐"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="娱乐"/>
        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="体育"/>
    </android.support.design.widget.TabLayout>
</LinearLayout>

类似于RadioGroup一样，使用TabLayout作为父布局，其内部添加TabItem控件。其中text就是指示器的文字提示。

当然了，不仅可以在不居中直接添加TabItem子标签，这样可变性不好，我们可以在代码中动态添加，节后会介绍到！

3、动态添加TabItem标签

TabLayout tabLayout = (TabLayout) findViewById(R.id.tab);
    for (int i = 0; i < titles.length; i++) {
        TabLayout.Tab tab = tabLayout.newTab();//创建tab
        tab.setText(titles[i]);//设置文字
        tabLayout.addTab(tab);//添加到tabLayout中
    }

这只是一种简单的动态添加TabItem标签的方法。

因为TabLayout一般会结合ViewPager使用，而标签内容，标签数量也可以随着ViewPager来改变。

下文会提到TabItem结合ViewPager动态添加。

4、添加TabItem标签的点击事件

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
     @Override
     public void onTabSelected(TabLayout.Tab tab) {
          Toast.makeText(TabLayoutActivity.this, tab.getText(), Toast.LENGTH_SHORT).show();
     }
     @Override
     public void onTabUnselected(TabLayout.Tab tab) {
     }
     @Override
     public void onTabReselected(TabLayout.Tab tab) {
     }
});

5、为Tab添加图标

for (int i = 0; i < titles.length; i++) {
   TabLayout.Tab tab = tabLayout.newTab();//创建tab
   tab.setText(titles[i]);//设置文字
   tab.setIcon(R.mipmap.ic_launcher);//设置图标
   tabLayout.addTab(tab);//添加到tabLayout中
}

结合第三步，创建Tab对象，对其设置文字和图片

6、修改TabLayout的样式

Tablayout支持定制化修改，提供了不少自定义属性供开发者进行设置。有以下属性支持修改：

tabIndicatorColor：指示器颜色
tabBackground：tablayout的背景颜色
tabIndicatorHeight：指示器高度
tabGravity：指示器位置
tabMode：显示模式
tabSelectedTextColor：文字选中颜色
tabTextColor：文字未选中颜色
tabTextAppearance：字体
tabMaxWidth：tab最大宽度
tabMinWidth：tab最小宽度

特别说一下tabMode，它有两个属性值可选：fixed，scrollable。fixed表示位置固定，scrollable表示标签内容多时，可滚动显示。

6、TabLayout结合ViewPager

关键的来了！

·a 创建布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activity.MainActivity"
    tools:showIn="@layout/activity_main">
    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        app:tabGravity="fill"
        app:tabMode="fixed" />
    <View
        android:id="@+id/fenge"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/tab"
        android:background="#f2f2f2" />
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/fenge" />
</RelativeLayout>

·b TabLayout与ViewPager关联

vp_content.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
    private String[] titles={"推荐","体育","视频","美图","北京"};
    @Override
    public Fragment getItem(int position) {
        if(position==0){
            return new TuijianFragment();
        }else if(position==1){
            return new SportsFragment();
        }else if(position==2){
            return new VideoFragment();
        }else if(position==3){
            return new PictureFragment();
        }else {
            return new BeijingFragment();
        }
    }
    @Override
    public int getCount() {
        return 5;
    }
    @Override
    public CharSequence getPageTitle(int position) {
         return titles[position];
    }
});
tab.setupWithViewPager(vp_content);

这里需要注意的是，实现ViewPager的adapter时，需要重写Adapter的getPageTitle()方法，返回对应页签的内容，这样TabLayout才会有对应的页签。

关联的核心代码是setupWithViewPager方法。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2017-12-27，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自 Android机动车微信公众号，前往查看

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

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度