Android深度定制化TabLayout：圆角，渐变色，背景边框，基于Android原生TabLayout_tablayout 圆角_zhangphil的博客

相关文章推荐
失眠的可乐 · button按钮的属性设置 - CSDN文库· 4 月前 ·
有情有义的芹菜 · ssh server ...· 1 年前 ·
纯真的冲锋衣 · WIN安装vcpkg - DarkH - 博客园· 1 年前 ·
潇洒的香瓜 · String and character ...· 1 年前 ·
闷骚的伤疤 · Antibody Probes of ...· 1 年前 ·
实现纯色且具有圆角弧度的Tab切换卡很多，但是要求具有一定渐变的实现，如上图被选中的选项卡颜色渐变则很少见，这样的设计要求原生或者即便第三方开源的项目也很少实现（至少截止发文时间）。现在说明如何上图的TabLayout，基于Android原生的TabLayout。
毫无疑问得继承自Android原生到的TabLayout，重写里面的相关方法，MyTabLayout.java：
package zhangphil.test;
import android.content.Context;
import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MyTabLayout extends TabLayout {
    private List<String> titles;
    public MyTabLayout(Context context) {
        super(context);
        init();
    public MyTabLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    public MyTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    private void init() {
        titles = new ArrayList<>();
        this.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(Tab tab) {
                 * 设置当前选中的Tab为特殊高亮样式。
                if (tab != null && tab.getCustomView() != null) {
                    TextView tab_layout_text = tab.getCustomView().findViewById(R.id.tab_layout_text);
                    tab_layout_text.setTextColor(Color.WHITE);
                    tab_layout_text.setBackgroundResource(R.drawable.tablayout_item_pressed);
            @Override
            public void onTabUnselected(Tab tab) {
                 * 重置所有未选中的Tab颜色、字体、背景恢复常态(未选中状态)。
                if (tab != null && tab.getCustomView() != null) {
                    TextView tab_layout_text = tab.getCustomView().findViewById(R.id.tab_layout_text);
                    tab_layout_text.setTextColor(getResources().getColor(android.R.color.holo_red_light));
                    tab_layout_text.setBackgroundResource(R.drawable.tablayout_item_normal);
            @Override
            public void onTabReselected(Tab tab) {
    public void setTitle(List<String> titles) {
        this.titles = titles;
         * 开始添加切换的Tab。
        for (String title : this.titles) {
            Tab tab = newTab();
            tab.setCustomView(R.layout.tablayout_item);
            if (tab.getCustomView() != null) {
                TextView text = tab.getCustomView().findViewById(R.id.tab_layout_text);
                text.setText(title);
            this.addTab(tab);

在setTitle时候，开始为TabLayout添加每一个选项卡Tab，每一个选项卡的文本显示是由res/layout/tab_layout_item.xml： 
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tab_layout_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tablayout_item_normal"
    android:gravity="center"
    android:paddingBottom="5dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="5dp"
    android:textColor="@android:color/holo_red_light"
    android:textSize="14dp">
</TextView>注意这个布局中的@+id/tab_layout_text的TextView，这将是后续改变背景颜色和字体颜色的操作对象。事实上如果你愿意，你可以把这个布局写的更加复杂更加多变，不止只有一个TextView，可以有更多的View和ViewGroup，只要有它们的id，然后在后面要介绍的onTabSelected和onTabUnselected里面尽情修改切换它们的表现形式。 

res/layout/tab_layout_text.xml里面引用了普通的未被选中状态下的圆角边框线res/drawable/tablayout_item_normal.xml： 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp" />
    <stroke
        android:width="1px"
        android:color="@android:color/darker_gray" />
</shape>这个其实一个简单圆角背景，灰色边框线。res/drawable/tablayout_item_normal.xml将作为未被选中的Tab的背景资源在后续的选中和未被选中时候加载。 

实际上真正修改和重置TabLayout字体和背景颜色的工作是在addOnTabSelectedListener的两个关键函数onTabSelected和onTabUnselected里面。 
在init函数中，给当前的TabLayout增加一个监听器OnTabSelectedListener，然后，onTabSelected表示当前TabLayout被选中的具体是哪一个Tab，有了这个回调函数，并且获得了被选中的具体Tab对象tab，就可以从该Tab提取出该View（通getCustomView()），再找到在setTitle时候添加的每一个Tab的布局R.layout.tab_layout_item中的子View，本例只添加了一个TextView，其id为（android:id="@+id/tab_layout_text"）的TextView，为其设置选中的字体颜色和背景。本例是为每一个选中的Tab设置一个res/drawable/tablayout_item_pressed.xml： 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp" />
    <gradient
        android:angle="180"
        android:endColor="@android:color/holo_orange_light"
        android:startColor="@android:color/holo_red_light"
        android:type="linear" />
</shape>在这个背景资源中，实现了圆角渐变颜色。（重要） 

同时设置选中状态下的Tab字体颜色为白色。可以看到，因为在R.layout.tab_layout_item只定义了一个TextView，如果定义了很多子View，如果是ImageView，也可以通过该ImageView的id，操纵该ImageView被选中时候的状态，换句话说，借助getCustomView().findViewById，可以在onTabSelected玩出很多Tab在选中时候的花样和变化。 

类似的，在onTabUnselected里面，则是所有没有选中的Tab设置字体颜色，背景，边框线等，没有选中的Tab，简单的设置为normal状态的背景资源即可。 
具体使用，像Android原生的TabLayout一样把MyTabLayout写到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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <zhangphil.test.MyTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable" />
</LinearLayout> 
然后在上层Java代码写若干选项卡需要的字符串： 
package zhangphil.test;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import java.util.Arrays;
import java.util.List;
public class TabActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_avtivity);
        String[] str = {"zhang", "phil", "zhang phil", "csdn", "zhang phil csdn", "zhang phil @ csdn", "blog.csdn.net/zhangphil", "android"};
        List<String> titles = Arrays.asList(str);
        MyTabLayout tabLayout = findViewById(R.id.tab_layout);
        tabLayout.setTitle(titles);
                    Android深度定制化TabLayout：圆角，渐变色，背景边框，基于Android原生TabLayout如今UI设计已经不再满足于下方只有一个下划线，切换后能改变和表示选中颜色的TabLayout了。设计对于TabLayout这种非常常见的切换控制条提出了更高的设计要求，比如，背景颜色渐变，有一定圆角弧度的背景边框线，等等，比如下面的的一个自定义TabLayout：实现纯色且具有圆角弧度的Ta...
				还是先上效果图 
1. 在Android—Tablayout自定义tab写了自定义tab的实现，但是我发现当我们用自定义tab的时候，发现tablayout下的字体颜色属性不管用了，所以这时我们只能去自己实现自定义布局的背景和textview的字体颜色变化。    <android.support.design.widget.TabLayout
            android:id="@+i
				RoundWidget
Java 实现的 Android 原生圆角矩形控件，圆角 FrameLayout 和圆角 ImageView，
详见项目代码中的 RoundFrameLayout 和 RoundImageView。
Gradle依赖：
implementation 'com.github.xiaofeidev:round:$latest_version'
JCenter 的工件库托管服务将于 2022 年 2 月 1 号停止，本库将会在此之前及时迁移到新的远程 Maven 仓库，大家请放心使用。
本库只支持在 AndroidX 的依赖基础上使用！miniSDK = 14
项目中主要有  RoundFrameLayout 和 RoundImageView这两个控件，它们具有如下公共属性：
rd_radius
尺寸值，设置 View 整体四个圆角
				Android为ListView添加圆角边框效果，安卓UI设计的例子，默认情况下ListView的外框是直角的，也就是大家习惯的样式，但为了美化更突出，或者与你的应用风格更吻合，有时候可能修饰成圆角边框，本例子就是实现了这一功能，实用性较强。
　　动态设置listview的高度，使用listView.getDividerHeight()获取子项间分隔符占用的高度， params.height最后得到整个ListView完整显示需要的高度。
				前言项目需要做一个选项卡的功能，很简单，就是点击切换的效果，公共有这个控件，但是不太符合业务需求，所以自己花了半小时写了一个，很简单，继承自linearLayout，支持预置选择哪个选项卡，支持显示红点，支持选择回调。 
项目很简单，一直在纠结要不要写博客，最后为了坚持还是写了，毕竟万变不离其宗，复杂的效果也是简单的逻辑一个个堆砌起来的。写一下，希望也能帮助一些初学者效果图照例，我们先看效果图有一个
				要设置圆角渐变色背景，可以使用 CSS 的 `background-image` 属性和 `border-radius` 属性来实现。具体实现步骤如下：
1. 首先确定需要设置背景的元素，例如一个 `div` 元素，可以通过 CSS 选择器来选择对应的元素，例如：
```css
div {
  /* 这里是样式代码 */
2. 在上面选择器的代码块中，使用 `background-image` 属性来设置渐变背景。可以使用 `linear-gradient` 函数来创建线性渐变，例如：
```css
div {
  background-image: linear-gradient(to bottom right, #ff9a9e, #fad0c4);
上面代码中，将 `div` 元素的背景设置为从左上角到右下角的渐变，颜色从 #ff9a9e 到 #fad0c4。
3. 使用 `border-radius` 属性来设置圆角，例如：
```css
div {
  background-image: linear-gradient(to bottom right, #ff9a9e, #fad0c4);
  border-radius: 20px;
上面代码中，将 `div` 元素的四个角设置为 20px 的圆角。
4. 如果需要设置不同的圆角大小，可以使用 `border-top-left-radius`、`border-top-right-radius`、`border-bottom-left-radius`、`border-bottom-right-radius` 属性来分别设置每个角的圆角大小，例如：
```css
div {
  background-image: linear-gradient(to bottom right, #ff9a9e, #fad0c4);
  border-top-left-radius: 20px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 5px;
上面代码中，将 `div` 元素的左上角设置为 20px 的圆角，右上角设置为 10px 的圆角，左下角设置为 30px 的圆角，右下角设置为 5px 的圆角。
以上就是设置圆角渐变色背景的方法，希望对你有所帮助。
                Unable to make field private final java.lang.String java.io.File.path accessible: module java.base d
                    不错不错！反手就是一个赞，欢迎回评哦~
                git错误：Unlink of file 'xxx' failed.Should I try again?
                    WorldWelcome: 
                    关掉占用内存的程序后，还要运行git checkout HEAD *.* 将它 revert
                Unable to make field private final java.lang.String java.io.File.path accessible: module java.base d
                    丶Silence: 
                    非常有用的答案，感谢
                pycharm：无法加载文件activate.ps1，因为在此系统上禁止运行脚本，Windows10系统
                    2301_78835717: 
                    我输入Set-ExecutionPolicy RemoteSigned怎么是换行
                Android CoroutineScope Dispatchers.Main主线程delay，kotlin
                    看着夕阳敲代码: 
                    博主写的非常好，文章干货满满，三联+关注！欢迎作者闲暇之余能回关我的博客进行指导，谢谢！