TabLayout基础讲解及使用

于 2017-05-22 13:37:33 发布
阅读量2.9k 收藏 4
点赞数 1
分类专栏： Android View 文章标签： TabLayout 点击事件 TabLayout默认点击效果 TabLayout 设置指示器高度 TabLayout 设置Tab背景颜色 TabLayout 设置字体大小  颜色  TabLayout 去除点击效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37730482/article/details/72625668
版权

一.TabLayout简介

 

TabLayout是Android Design库中用来实现选项卡效果的View。TabLayout是安卓6.0之后出现的。

public class TabLayout extends HorizontalScrollView

可知 TabLayout实际上是一个横向滑动的ScrollView。

 

 

 

 

 

二.Gradle配置

在Android Studio中引入design库

dependencies {
    ...

    //design库
    implementation 'com.android.support:design:28.0.0'
}

 

 

 

 

三.代码实现

package com.wjn.viewlistdemo.activity.tablayout;

import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.wjn.viewlistdemo.R;
import com.wjn.viewlistdemo.utils.StatusBarUtil;

import java.util.ArrayList;
import java.util.List;

public class TabLayoutActivity extends AppCompatActivity {

    private TabLayout tabLayout1;
    private TabLayout tabLayout2;
    private TabLayout tabLayout3;
    private TabLayout tabLayout4;
    private TabLayout tabLayout5;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tablayout);
        //根据状态栏颜色来决定 状态栏背景 用黑色还是白色 true:是否修改状态栏字体颜色
        StatusBarUtil.setStatusBarMode(this, false, false, R.color.colorPrimary);

        initTabLayoutView1();

        initTabLayoutView2();

        initTabLayoutView3();

        initTabLayoutView4();

        initTabLayoutView5();

    }

    /**
     * 初始化各种View
     */

    private void initTabLayoutView1() {
        tabLayout1 = findViewById(R.id.activity_tablayout_tablayout1);

        List<String> list = new ArrayList<>();
        list.add("新闻");
        list.add("头条");
        list.add("中超");
        list.add("NBA");
        list.add("科技");
        list.add("体育");
        list.add("育儿");
        list.add("懂车帝");
        list.add("健康");
        list.add("教育");
        list.add("股票");
        list.add("漫画");

        for (int i = 0; i < list.size(); i++) {
            String name = list.get(i);
            tabLayout1.addTab(tabLayout1.newTab().setText(name));
        }

    }

    /**
     * 初始化各种View
     */

    private void initTabLayoutView2() {
        tabLayout2 = findViewById(R.id.activity_tablayout_tablayout2);

        List<String> list = new ArrayList<>();
        list.add("鲁能");
        list.add("李霄鹏");
        list.add("蒿俊闵");
        list.add("佩莱");
        list.add("韦德");
        list.add("詹姆斯");

        List<Integer> listpic = new ArrayList<>();
        listpic.add(R.mipmap.ic_action_add);
        listpic.add(R.mipmap.ic_action_add);
        listpic.add(R.mipmap.ic_action_add);
        listpic.add(R.mipmap.ic_action_add);
        listpic.add(R.mipmap.ic_action_add);
        listpic.add(R.mipmap.ic_action_add);

        for (int i = 0; i < list.size(); i++) {
            String name = list.get(i);
            int mipmap = listpic.get(i);
            tabLayout2.addTab(tabLayout2.newTab().setText(name).setIcon(mipmap));
        }
    }

    /**
     * 初始化各种View
     */

    private void initTabLayoutView3() {
        tabLayout3 = findViewById(R.id.activity_tablayout_tablayout3);

        List<String> list = new ArrayList<>();
        list.add("鲁能");
        list.add("李霄鹏");
        list.add("蒿俊闵");
        list.add("佩莱");
        list.add("韦德");
        list.add("詹姆斯");

        List<Integer> listpic = new ArrayList<>();
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);

        for (int i = 0; i < list.size(); i++) {
            String name = list.get(i);
            int mipmap = listpic.get(i);
            TabLayout.Tab tab = tabLayout3.newTab();
            View inflate = View.inflate(this, R.layout.tablayout_item, null);
            TextView textView = inflate.findViewById(R.id.tablayout_item_textview);
            textView.setText(name);
            ImageView imageView = inflate.findViewById(R.id.tablayout_item_imagview);
            imageView.setBackgroundResource(mipmap);
            tab.setCustomView(inflate);
            tabLayout3.addTab(tab);
        }
    }

    /**
     * 初始化各种View
     */

    private void initTabLayoutView4() {
        tabLayout4 = findViewById(R.id.activity_tablayout_tablayout4);

        List<String> list = new ArrayList<>();
        list.add("新闻");
        list.add("头条");
        list.add("中超");
        list.add("NBA");
        list.add("科技");
        list.add("体育");
        list.add("育儿");
        list.add("懂车帝");
        list.add("健康");
        list.add("教育");
        list.add("股票");
        list.add("漫画");

        for (int i = 0; i < list.size(); i++) {
            //1.先赋值
            String name = list.get(i);
            tabLayout4.addTab(tabLayout4.newTab().setText(name));
            //2.获取每一个tab对象
            TabLayout.Tab tabAt = tabLayout4.getTabAt(i);
            //3.将每一个条目设置我们自定义的视图
            tabAt.setCustomView(R.layout.tablayout_item_textview);
            //4.默认选中第一个
            if (i == 0) {
                TextView textView = tabAt.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
                textView.setTextSize(20);
                textView.setTextColor(getResources().getColor(R.color.textview_sel));
            }
            //5.通过tab对象找到自定义视图的ID并赋值
            TextView textView = tabAt.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
            textView.setText(name);//设置tab上的文字
        }

        //TabLayout 点击事件
        tabLayout4.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            //选中
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
                textView.setTextSize(20);
                textView.setTextColor(getResources().getColor(R.color.textview_sel));
                Log.d("TAG", "onTabSelected方法！！！" + tab.getText());
            }

            //取消选中
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
                textView.setTextSize(14);
                textView.setTextColor(getResources().getColor(R.color.textview));
                Log.d("TAG", "onTabUnselected方法！！！" + tab.getText());
            }

            //点击已选中
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.d("TAG", "onTabReselected方法！！！" + tab.getText());
            }
        });

    }

    /**
     * 初始化各种View
     */

    private void initTabLayoutView5() {
        tabLayout5 = findViewById(R.id.activity_tablayout_tablayout5);

        List<String> list = new ArrayList<>();
        list.add("新闻");
        list.add("头条");
        list.add("中超");

        for (int i = 0; i < list.size(); i++) {
            String name = list.get(i);
            tabLayout5.addTab(tabLayout5.newTab().setText(name));
        }

    }

}

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="TabLayout"
        android:textColor="#FFFFFF"
        android:textSize="16sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="无图标的TabLayout"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_tablayout_tablayout1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="#30e407"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#e40707"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="#ffffff" />


    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="有图标的TabLayout"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_tablayout_tablayout2"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="#30e407"
        app:tabIndicatorHeight="2dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#e40707"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="#ffffff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="自定义有图标的TabLayout"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_tablayout_tablayout3"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@android:color/transparent"
        app:tabIndicatorColor="#30e407"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        app:tabRippleColor="@android:color/transparent"
        app:tabTextAppearance="@style/TabLayoutTextStyle" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="自定义点击事件的TabLayout"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_tablayout_tablayout4"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@color/colorPrimary"
        app:tabIndicatorColor="#30e407"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#e40707"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="#ffffff" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center"
        android:text="固定位置的TabLayout"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <android.support.design.widget.TabLayout
        android:id="@+id/activity_tablayout_tablayout5"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_gravity="center"
        app:tabBackground="@color/colorPrimary"
        app:tabGravity="center"
        app:tabPaddingStart="10dp"
        app:tabPaddingBottom="10dp"
        app:tabPadding="10dp"
        app:tabPaddingEnd="10dp"
        app:tabPaddingTop="10dp"
        app:tabIndicatorColor="#30e407"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#e40707"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="#ffffff" />


</LinearLayout>

 

 

效果

 

 

 

四.详细讲解

 

1.改变字体颜色

app:tabTextColor="#ffffff"

 

 

2.设置字体被选中后的颜色

app:tabSelectedTextColor="#e40707"

 

 

3.设置指示器颜色

app:tabIndicatorColor="#30e407"

 

 

4.设置指示器高度（如果希望选项卡不显示指示器效果只需要把指示器高度设置为0就行了）

app:tabIndicatorHeight="2dp"

 

 

5.设置Tab背景颜色

app:tabBackground="@color/colorye"

 

 

6.设置Tab滚动方式 可滚动

app:tabMode="scrollable"

 

 

7.设置Tab滚动方式 固定

app:tabMode="fixed"

 

 

8.取消TabLayout默认点击效果

app:tabBackground="@android:color/transparent"
app:tabRippleColor="@android:color/transparent"

 

 

9.标签距离

app:tabPaddingStart="10dp"
app:tabPaddingBottom="10dp"
app:tabPadding="10dp"
app:tabPaddingEnd="10dp"
app:tabPaddingTop="10dp"

 

 

10.对齐方式  

居中显示

app:tabGravity="center"

 

填充

app:tabGravity="fill"

 

 

11.偏移

从左边开始偏移距离, 必须是可滑动的模式 scrollable

app:tabContentStart="200dp"

 

 

12.标签宽度限制

最大宽度

app:tabMaxWidth="50dp"

 

最小宽度

app:tabMinWidth="100dp"

 

 

13.自定义TabLayout Item布局

自定义xml

<?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">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="@android:color/transparent">

        <ImageView
            android:id="@+id/tablayout_item_imagview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/ic_action_add" />

        <TextView
            android:id="@+id/tablayout_item_textview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/tablayout_item_imagview"
            android:text="鲁能"
            android:layout_marginLeft="10dp"
            android:textColor="#000000" />

    </RelativeLayout>

</LinearLayout>

 

使用

/**
     * 初始化各种View
     */

    private void initTabLayoutView3() {
        tabLayout3 = findViewById(R.id.activity_tablayout_tablayout3);

        List<String> list = new ArrayList<>();
        list.add("鲁能");
        list.add("李霄鹏");
        list.add("蒿俊闵");
        list.add("佩莱");
        list.add("韦德");
        list.add("詹姆斯");

        List<Integer> listpic = new ArrayList<>();
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);
        listpic.add(R.mipmap.followupplan);

        for (int i = 0; i < list.size(); i++) {
            String name = list.get(i);
            int mipmap = listpic.get(i);
            TabLayout.Tab tab = tabLayout3.newTab();
            View inflate = View.inflate(this, R.layout.tablayout_item, null);
            TextView textView = inflate.findViewById(R.id.tablayout_item_textview);
            textView.setText(name);
            ImageView imageView = inflate.findViewById(R.id.tablayout_item_imagview);
            imageView.setBackgroundResource(mipmap);
            tab.setCustomView(inflate);
            tabLayout3.addTab(tab);
        }
    }

 

效果

 

 

 

 

14.TabLayout选中事件操作

自定义xml

<?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">

    <TextView
        android:id="@+id/tablayout_item_textview_textview"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="鲁能"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        android:textSize="14sp" />

</LinearLayout>

 

使用

/**
     * 初始化各种View
     */

    private void initTabLayoutView4() {
        tabLayout4 = findViewById(R.id.activity_tablayout_tablayout4);

        List<String> list = new ArrayList<>();
        list.add("新闻");
        list.add("头条");
        list.add("中超");
        list.add("NBA");
        list.add("科技");
        list.add("体育");
        list.add("育儿");
        list.add("懂车帝");
        list.add("健康");
        list.add("教育");
        list.add("股票");
        list.add("漫画");

        for (int i = 0; i < list.size(); i++) {
            //1.先赋值
            String name = list.get(i);
            tabLayout4.addTab(tabLayout4.newTab().setText(name));
            //2.获取每一个tab对象
            TabLayout.Tab tabAt = tabLayout4.getTabAt(i);
            //3.将每一个条目设置我们自定义的视图
            tabAt.setCustomView(R.layout.tablayout_item_textview);
            //4.默认选中第一个
            if (i == 0) {
                TextView textView = tabAt.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
                textView.setTextSize(20);
                textView.setTextColor(getResources().getColor(R.color.textview_sel));
            }
            //5.通过tab对象找到自定义视图的ID并赋值
            TextView textView = tabAt.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
            textView.setText(name);//设置tab上的文字
        }

        //TabLayout 点击事件
        tabLayout4.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            //选中
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
                textView.setTextSize(20);
                textView.setTextColor(getResources().getColor(R.color.textview_sel));
                Log.d("TAG", "onTabSelected方法！！！" + tab.getText());
            }

            //取消选中
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                TextView textView = tab.getCustomView().findViewById(R.id.tablayout_item_textview_textview);
                textView.setTextSize(14);
                textView.setTextColor(getResources().getColor(R.color.textview));
                Log.d("TAG", "onTabUnselected方法！！！" + tab.getText());
            }

            //点击已选中
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                Log.d("TAG", "onTabReselected方法！！！" + tab.getText());
            }
        });

    }

 

效果

 

 

 

代码链接：https://github.com/wujianning/ViewListDemo

jianning-wu
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值