一.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());
}
});
}
效果