一、前言
官网：TabLayout 提供一个水平方向的布局来显示 Tabs，继承的是HorizontalScrollView 这个类。
二、属性
| 属性 | 含义 |
|---|---|
| tabBackground | 设置Tabs的背景 |
| tabGravity | 为Tabs设置Gravity |
| tabIndicatorColor | 设置指示器的颜色 |
| tabIndicatorHeight | 设置指示器的高度，规范建议是2dp |
| tabMaxWidth | 设置 Tab 的最大宽度 |
| tabMinWidth | 设置 Tab 的最小宽度 |
| tabMode | 设置Tabs的显示模式 |
| tabSelectedTextColor | 设置Tab选中后，文字显示的颜色 |
| tabTextColor | 设置Tab未选中，文字显示的颜色 |
三、基础使用
1. 简单使用
-
效果图
-
布局文件
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
- java 代码
public class BFragment extends BaseFragment {
@BindView(R.id.tabLayout)
TabLayout mTabLayout;
@Override
protected int layoutId() {
return R.layout.fragment_b;
}
@Override
protected void initView(View view) {
mTabLayout.addTab(mTabLayout.newTab().setText("个性推荐"));
mTabLayout.addTab(mTabLayout.newTab().setText("歌单"));
mTabLayout.addTab(mTabLayout.newTab().setText("主播电台"));
mTabLayout.addTab(mTabLayout.newTab().setText("排行榜"));
}
@Override
protected void initData() {
}
}
2. 带 icon 的导航栏
-
效果图
-
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".fragment.BFragment">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="个性推荐"
android:icon="@mipmap/ic_launcher"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="歌单"
android:icon="@mipmap/ic_launcher"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主播电台"
android:icon="@mipmap/ic_launcher"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="排行榜"
android:icon="@mipmap/ic_launcher"/>
</com.google.android.material.tabs.TabLayout>
</LinearLayout>
3. Tab 选中监听
Tab 切换的时候，我们需要切换页面的内容，这时候就需要为它设置一个监听器 TabLayout.OnTabSelectedListener，如下：
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Log.i(TAG,"onTabSelected:"+tab.getText());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
四、实例
结合使用 TabLayout + ViewPager + Fragment
1. 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fillViewport="false"
app:tabMode="fixed"
app:tabIndicatorColor="@color/purple_500"
app:tabIndicatorHeight="2dp"
app:tabTextAppearance="@style/TabLayoutTextStyle"
app:tabIndicatorFullWidth="false"
app:tabTextColor="@color/text_E3"
app:tabSelectedTextColor="@color/text_color"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
<style name="TabLayoutTextStyle">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
</style>
2. MainActivity.java
public class MainActivity extends BaseActivity {
@BindView(R.id.tab_layout)
TabLayout mTabLayout;
@BindView(R.id.viewPager)
ViewPager mViewPager;
private List<String> mTitles = new ArrayList<>();
private List<Fragment> mFragments = new ArrayList<>();
private HomeFragment mHomeFragment = HomeFragmentFactory.getInstance().getHomeFragment();
private OrderFragment mOrderFragment = HomeFragmentFactory.getInstance().getOrderFragment();
private NoticeFragment mNoticeFragment = HomeFragmentFactory.getInstance().getNoticeFragment();
private MineFragment mMineFragment = HomeFragmentFactory.getInstance().getMineFragment();
private HomeAdapter mAdapter;
@Override
public int getLayoutId() {
return R.layout.activity_main;
}
@Override
public void initView() {
mTitles.add("首页");
mTitles.add("工单");
mTitles.add("通知");
mTitles.add("我的");
mFragments.add(mHomeFragment);
mFragments.add(mOrderFragment);
mFragments.add(mNoticeFragment);
mFragments.add(mMineFragment);
mAdapter = new HomeAdapter(getSupportFragmentManager(),mTitles,mFragments);
mViewPager.setAdapter(mAdapter);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.setTabsFromPagerAdapter(mAdapter);
}
}
3. BaseFragment.java
public abstract class BaseFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(layoutId(),container,false);
ButterKnife.bind(this,view);
initData();
initView(view);
return view;
}
/**
* 初始化布局
* @return 布局id
*/
protected abstract int layoutId();
/**
* 初始化控件
* @param view 布局view
*/
protected abstract void initView(View view);
/**
* 初始化，绑定数据
*/
protected abstract void initData();
/**
* 不带参数的跳转
*
* @param clazz 跳转到的目标类
*/
protected void readyGo(final Class<?> clazz) {
Intent intent = new Intent(getActivity(), clazz);
startActivity(intent);
}
/**
* 带参数的跳转
*
* @param clazz 跳转到的目标类
* @param bundle 参数
*/
protected void readyGo(final Class<?> clazz, final Bundle bundle) {
Intent intent = new Intent(getActivity(), clazz);
if (bundle != null) {
intent.putExtras(bundle);
}
startActivity(intent);
}
/**
* 跳转且返回结果
*
* @param clazz 跳转到的目标类
* @param requestCode 请求码
*/
protected void readyGoForResult(final Class<?> clazz, final int requestCode) {
Intent intent = new Intent(getActivity(), clazz);
startActivityForResult(intent, requestCode);
}
/**
* 带参数跳转且返回结果
*
* @param clazz 跳转到的目标类
* @param requestCode 请求码
* @param bundle 参数
*/
protected void readyGoForResult(final Class<?> clazz, final int requestCode, final Bundle bundle) {
Intent intent = new Intent(getActivity(), clazz);
if (bundle != null) {
intent.putExtras(bundle);
}
startActivityForResult(intent, requestCode);
}
@Override
public void onDestroy() {
super.onDestroy();
}
}
4. HomeFragment.java
public class HomeFragment extends BaseFragment {
@Override
protected int layoutId() {
return R.layout.fragment_home;
}
@Override
protected void initView(View view) {
}
@Override
protected void initData() {
}
}
5. HomeFragmentFactory.java
public class HomeFragmentFactory {
static HomeFragmentFactory mInstance;
private HomeFragment mHomeFragment;
private OrderFragment mOrderFragment;
private NoticeFragment mNoticeFragment;
private MineFragment mMineFragment;
public HomeFragmentFactory() {
}
public static HomeFragmentFactory getInstance() {
if (mInstance == null) {
synchronized (HomeFragmentFactory.class) {
if (mInstance == null) {
mInstance = new HomeFragmentFactory();
}
}
}
return mInstance;
}
/**
* 首页
*
* @return
*/
public HomeFragment getHomeFragment() {
if (mHomeFragment == null) {
synchronized (HomeFragment.class) {
if (mHomeFragment == null) {
mHomeFragment = new HomeFragment();
}
}
}
return mHomeFragment;
}
/**
* 工单
*
* @return
*/
public OrderFragment getOrderFragment() {
if (mOrderFragment == null) {
synchronized (OrderFragment.class) {
if (mOrderFragment == null) {
mOrderFragment = new OrderFragment();
}
}
}
return mOrderFragment;
}
/**
* 通知
*
* @return
*/
public NoticeFragment getNoticeFragment() {
if (mNoticeFragment == null) {
synchronized (NoticeFragment.class) {
if (mNoticeFragment == null) {
mNoticeFragment = new NoticeFragment();
}
}
}
return mNoticeFragment;
}
/**
* 我的
*
* @return
*/
public MineFragment getMineFragment() {
if (mMineFragment == null) {
synchronized (MineFragment.class) {
if (mMineFragment == null) {
mMineFragment = new MineFragment();
}
}
}
return mMineFragment;
}
}
6. HomeAdapter.java
public class HomeAdapter extends FragmentPagerAdapter {
private List<String> titleList;
private List<Fragment> fragmentList;
public HomeAdapter(@NonNull FragmentManager fm, List<String> titleList,
List<Fragment> fragmentList) {
super(fm);
this.titleList = titleList;
this.fragmentList = fragmentList;
}
@NonNull
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);
}
}
修改选中字体大小
1. 效果图
2. 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tab_item_time"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:gravity="bottom"
android:text="22:00"
android:textColor="@drawable/selector_text_color"
android:textSize="12sp"/>
<TextView
android:id="@+id/tab_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="秒杀中"
android:textColor="@drawable/selector_text_color"
android:textSize="12sp"/>
</LinearLayout>
3. 代码引用并设置
private void initTabView() {
holder = null;
for (int i = 0; i < tabs.size(); i++) {
//获取tab
TabLayout.Tab tab = mTabLayout.getTabAt(i);
//给tab设置自定义布局
tab.setCustomView(R.layout.tab_item);
holder = new ViewHolder(tab.getCustomView());
//填充数据
holder.mTabItemTime.setText(String.valueOf(tabTimes.get(i)));
holder.mTabItemName.setText(tabs.get(i));
//默认选择第一项
if (i == 0) {
holder.mTabItemTime.setSelected(true);
holder.mTabItemName.setSelected(true);
holder.mTabItemTime.setTextSize(18);
holder.mTabItemName.setTextSize(12);
}
}
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
holder = new ViewHolder(tab.getCustomView());
holder.mTabItemTime.setSelected(true);
holder.mTabItemName.setSelected(true);
//设置选中后的字体大小
holder.mTabItemTime.setTextSize(18);
holder.mTabItemName.setTextSize(12);
//关联Viewpager
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
holder = new ViewHolder(tab.getCustomView());
holder.mTabItemTime.setSelected(false);
holder.mTabItemName.setSelected(false);
//恢复默认字体大小
holder.mTabItemTime.setTextSize(12);
holder.mTabItemName.setTextSize(12);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
class ViewHolder {
TextView mTabItemTime;
TextView mTabItemName;
ViewHolder(View tabView) {
mTabItemTime = (TextView) tabView.findViewById(R.id.tab_item_time);
mTabItemName = (TextView) tabView.findViewById(R.id.tab_item_name);
}
}
六、第三方开源库
1、MagicIndicator
GitHub 地址：https://github.com/hackware1993/MagicIndicator
简介： 强大、可定制、易扩展的 ViewPager 指示器框架。是ViewPagerIndicator、TabLayout、PagerSlidingTabStrip的最佳替代品。支持角标，更支持在非ViewPager场景下使用（使用hide()、show()切换Fragment或使用setVisibility切换FrameLayout里的View等）
效果图：
推荐文章：
- MagicIndicator系列之一 —— 使用MagicIndicator打造千变万化的ViewPager指示器
- MagicIndicator系列之二 —— MagicIndicator使用指南
- MagicIndicator系列之三 —— MagicIndicator原理浅析及扩展MagicIndicator的4种方式
2、FlycoTabLayout
GitHub 地址：https://github.com/H07000223/FlycoTabLayout
简介： 一个Android TabLayout 库,目前有 3 个TabLayout
效果图：
扫一扫
1113
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
