Android TabLayout 使用进阶（含源码），2024最新Android中级面试题目汇总解答

public class BasicUseActivity extends AppCompatActivity {

private TabLayout tabLayout;

/**

• 标题数组

*/

private String[] titles = {“one”,“two”,“three”,“four”,“five”};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_basic_use);

tabLayout = findViewById(R.id.tab_layout);

for (String title : titles) {

//设置标签标题

tabLayout.addTab(tabLayout.newTab().setText(title));

}

}

}

下面运行一下：

这样标题就设置好了，不过你会看到这个标题我设置的是英文小写，而这运行出来就变成了大写，这个原理有Button是一样的，你只需要将textAllCaps属性设置为false就可以了。

但是你发现这个TabLayout控件中并没有找到这个属性，这可怎么办呢？

设置样式，在你的res → values → styles.xml，在里面增加

然后通过

app:tabTextAppearance=“@style/TabTextAllCapStyle”

设置到这个控件里面就可以了，如下所示。

<com.google.android.material.tabs.TabLayout

android:id=“@+id/tab_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:background=“#FFF”

app:tabTextAppearance=“@style/TabTextAllCapStyle” />

再运行一下：

可以看到变成了小写。

我觉得还是有搞头的，试试看。

修改代码：

//标签选中监听

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

/**

• 选中

• @param tab

*/

@RequiresApi(api = Build.VERSION_CODES.M)

@Override

public void onTabSelected(TabLayout.Tab tab) {

//大写

tab.setText(titles[tab.getPosition()].toUpperCase());

}

/**

• 未选中

• @param tab

*/

@Override

public void onTabUnselected(TabLayout.Tab tab) {

//小写

tab.setText(titles[tab.getPosition()].toLowerCase());

}

/**

• 重新选中

• @param tab

*/

@Override

public void onTabReselected(TabLayout.Tab tab) {

//大写

tab.setText(titles[tab.getPosition()].toUpperCase());

}

});

下面运行一下：

可以看到这样就可以使用实现了，只不过这是对于英文标题来说的，而中文标题的话通常我们是在选中时更改文字大小，而上图中，你会发现第一次进入时，是默认选中的第一个Tab，它的文字并没有大写，这是因为它没有触发监听，那么可以通过代码来设置。

//选中第一个

tabLayout.getTabAt(0).select();

这样设置就可以了。

② 设置图标

TabLayout也是可以设置图标的。首先放入五个图标

然后添加图标数组

/**

• 标题图标

*/

private Integer[] icons = {R.mipmap.common_problem, R.mipmap.community_me, R.mipmap.good_line,

R.mipmap.live, R.mipmap.umbrella_line};

再修改一个刚才的for循环

for (int i = 0;i < titles.length; i++){

//设置标签标题和图标

tabLayout.addTab(tabLayout.newTab().setText(titles[i]).setIcon(icons[i]));

}

这里你必须保证标题和图标数量一致，否则就会出现数组越界的情况导致程序崩溃。

下面运行一下。

这样看起来是不是很像一些App主页面的底部操作栏了，这个后面我会讲到的，怎么使用TabLayout+ViewPager+Fragment打造App主页面。

③ 设置下划线

从上面的图可以看到TabLayout默认是一个下划线的，这个下划线默认的颜色比较的丑，我们修改一下它。

通过

app:tabIndicatorColor=“#00FF00”

就可以设置下划线的颜色了00FF00就是原谅绿。爱是一道光，绿到你发慌。

然后再通过

app:tabTextColor=“#00FF00”

把标签的文字颜色也改成这个原谅绿，

运行看看。

啧啧啧，是不是很环保啊！这个颜色。然后你如果不需要下划线，最简单的办法就是设置透明，

app:tabIndicatorColor=“#00000000”

这样设置就看不到下划线了。

当然更多实际需求是修改下划线的长度可以随文字大小改变而改变，这个设置其实也比较的简单，超出你想象之外的简单。

通过

app:tabIndicatorFullWidth=“false”

运行一下：

是不是很简单呢？基本上这个就能满足你的需求了，那么这个TabLayout的基本使用就介绍完了，有想要我添加的可以评论区留言哦，否则我就会以为你们都会了。

二、分类页面 （TabLayout + ViewPager + Fragment）

---

什么是分类页面呢？

可以看到类似与这种的都可以称之为分类页面，当然这是我的个人看法，我没有见过什么世面，浅显的这么认为。那么这样的页面看起来不错，但是怎么去入手呢？

分析一下可能就是TabLayout + ViewPager + Fragment构成的，这三个组合在写分类页面和App主页面时稍有不同，文中都会讲到的，莫急。

为了更好的演示，我还是会新建一个Activity，在com.llw.tablayoutdemo下新建一个mode2包，该包下新建ClassificationActivity，布局activity_classification.xml，布局代码：

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

xmlns:tools=“http://schemas.android.com/tools”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

android:orientation=“vertical”

tools:context=“.mode2.ClassificationActivity”>

<com.google.android.material.tabs.TabLayout

android:id=“@+id/tab_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

android:background=“#FFF”

app:tabIndicatorColor=“#00FF00”

app:tabIndicatorFullWidth=“false”

app:tabMode=“scrollable”

app:tabRippleColor=“#00000000”

app:tabSelectedTextColor=“#00FF00”

app:tabTextColor=“#000” />

<androidx.viewpager.widget.ViewPager

android:id=“@+id/view_pager”

android:layout_width=“match_parent”

android:layout_height=“match_parent”/>

还差Fragment了，假设当前的Activity是要做视频的分类，有类别如下：电视剧、电影、综艺、体育、新闻、国际这六项。那么我们就需要建6个Fragment，这个些fragment同样放在mode2包下。分别是

① 创建Fragment

TVSeriesFragment

public class TVSeriesFragment extends Fragment {

@Override

public View onCreateView(final LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

final View view = inflater.inflate(R.layout.fragment_tv_series,

container, false);

return view;

}

}

MovieFragment

public class MovieFragment extends Fragment {

@Override

public View onCreateView(final LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

final View view = inflater.inflate(R.layout.fragment_movie,

container, false);

return view;

}

}

VarietyShowFragment

public class VarietyShowFragment extends Fragment {

@Override

public View onCreateView(final LayoutInflater inflater,

ViewGroup container, Bundle savedInstanceState) {

final View view = inflater.inflate(R.layout.fragment_variety_show,

container, false);

return view;

}

}

SportsFragment

public class SportsFragment extends Fragment {