Android深度定制化TabLayout：圆角，渐变色，背景边框，圆角渐变下划线，基于Android原生TabLayout

Android深度定制化TabLayout：圆角，渐变色，背景边框，圆角渐变下划线，基于Android原生TabLayout

在附录1的基础上丰富自定义的TabLayout，这次增加两个内容：
1，当选中某一个切换卡时候，文本字体变粗。
2，增加下划线指示器，并且下划线指示器是渐变圆角的。下划线从右往左，从浅蓝变深蓝。
实现效果如图所示：

Android深度定制化TabLayout：圆角，渐变色，背景边框，圆角渐变下划线，基于Android原生TabLayout_第1张图片

Android深度定制化TabLayout：圆角，渐变色，背景边框，圆角渐变下划线，基于Android原生TabLayout_第2张图片

继承自Android原生TabLayout的MyTabLayout.java：

package zhangphil.test;import android.content.Context;import android.graphics.Color;import android.support.design.widget.TabLayout;import android.text.TextPaint;import android.util.AttributeSet;import android.widget.ImageView;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class MyTabLayout extends TabLayout {    private List 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_text = tab.getCustomView().findViewById(R.id.tab_text);                    TextPaint paint = tab_text.getPaint();                    paint.setFakeBoldText(true);                    tab_text.setTextColor(Color.WHITE);                    tab_text.setBackgroundResource(R.drawable.tablayout_item_pressed);                    ImageView tab_layout_indicator = tab.getCustomView().findViewById(R.id.tab_indicator);                    tab_layout_indicator.setBackgroundResource(R.drawable.tablayout_item_indicator);                }            }            @Override            public void onTabUnselected(Tab tab) {                /**                 * 重置所有未选中的Tab颜色、字体、背景恢复常态(未选中状态)。                 */                if (tab != null && tab.getCustomView() != null) {                    TextView tab_text = tab.getCustomView().findViewById(R.id.tab_text);                    tab_text.setTextColor(getResources().getColor(android.R.color.holo_red_light));                    TextPaint paint = tab_text.getPaint();                    paint.setFakeBoldText(false);                    tab_text.setBackgroundResource(R.drawable.tablayout_item_normal);                    ImageView tab_indicator = tab.getCustomView().findViewById(R.id.tab_indicator);                    tab_indicator.setBackgroundResource(0);                }            }            @Override            public void onTabReselected(Tab tab) {            }        });    }    public void setTitle(List titles) {        this.titles = titles;        /**         * 开始添加切换的Tab。         */        for (String title : this.titles) {            Tab tab = newTab();            tab.setCustomView(R.layout.tablayout_item);            if (tab.getCustomView() != null) {                TextView tab_text = tab.getCustomView().findViewById(R.id.tab_text);                tab_text.setText(title);            }            this.addTab(tab);        }    }}

在onTabSelected中把选中的tab的文本变粗变成白色。同时设置下划线指示器可见。涉及到的下划线res/drawable/tablayout_item_indicator.xml：

<?xml version="1.0" encoding="utf-8"?>

是一个由右往左渐变的颜色圆角背景shape.

在MyTabLayout的setTitle中，为该切换View增加的res/layout/tablayout_item.xml：

<?xml version="1.0" encoding="utf-8"?>

res/layout/tablayout_item.xml为每一个添加到切换条上的其中一个选项tab。它使用了默认的（未选中）的背景资源作为未选中时候的背景res/drawable/tablayout_item_normal.xml:

<?xml version="1.0" encoding="utf-8"?>

res/drawable/tablayout_item_normal.xml其实是一个简单的有圆角边框的shape，没有选中的tab将以此作为背景资源。

当选中了某一个tab时候，把一个具有颜色到的背景资源文件作为tab的背景衬上去res/drawable/tablayout_item_pressed.xml：

<?xml version="1.0" encoding="utf-8"?>

这其实就是一个具有橙红色从右往左渐变的圆角背景。

具体使用和Android的原生TabLayout一致，写到xml布局里面：

<?xml version="1.0" encoding="utf-8"?>

上层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 titles = Arrays.asList(str);        MyTabLayout tabLayout = findViewById(R.id.tab_layout);        tabLayout.setTitle(titles);    }}

代码运行结果就是前文的配图。

附录：
1，《Android深度定制化TabLayout：圆角，渐变色，背景边框，基于Android原生TabLayout》链接：https://blog.csdn.net/zhangphil/article/details/80489089

更多相关文章

随机推荐