渐变的需求脑中也仅有一个shape渐变带来的大概思路回头来看想着学习一下这款自定义控件的内部实现故记录于此

Tip为表尊重源码中的注释声明并未做任何修改仅记录自身学习中的思考、想法

效果需求效果实现效果

BuilderShapeDrawableBuilderTextColorBuilder

文本渐变核心类

单标签固定样式产品要求不严格的话直接让设计切图简单便捷多标签固定样式产品要求不严格的话当样式标签固定在

2-5个之间可以让设计切图显示逻辑处理简单便捷多标签不固定样式例如内部可能字体可能是精选、常态、盈利等等当这种场景被不确定占据时只能通过代码来进行适配

关于渐变背景因仅为一种固定渐变背景且并非本文关键故在此直接写出如果你想更详细的学习和了解shape可前往

shape保姆级手册

关于渐变位置主要有startColor、centerColor、endColor

如根据设计图的话可仅设置startColor、endColor

shape_staid_select_top_right背景shape-

?xml

xmlns:androidhttp://schemas.android.com/apk/res/androidcornersandroid:bottomLeftRadius5dpandroid:topRightRadius5dp

/paddingandroid:bottom1dpandroid:leftdimen/mp_12android:rightdimen/mp_12android:top1dp

/gradientandroid:angle45android:centerColor#F8E2C7android:endColor#F8E2C8android:startColor#F8E2C7

/shape开发实践

剥离的产物所以如果不介意引入三方库的话最简单的方式肯定是直接依赖了只不过会导致项目体积更大一些毕竟有些东西我们用不到

ShapeView

此处项目结构为我Demo的结构目录主要通过减少三方库的引入从而减少项目体积、包体积

使用方式

xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:gravitycenter_horizontaltools:context.MainActivitycom.example.shapefontbg.shape.ShapeTextViewandroid:idid/tv_shapeandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginTop30dpandroid:backgrounddrawable/shape_staid_select_top_rightandroid:text我爱洗澡皮肤好好~android:textSize14spapp:shape_textEndColor#501512app:shape_textStartColor#AD5C22app:typefaceScalemedium

//RelativeLayout集成学习

初始化背景属性、文本属性内部通过读取typefaceScale属性设置对应字体加粗效果内部增添动态设置Text、setTextColor、TypefaceScale方法支持外部调用

package

com.example.shapefontbg.shapeimport

import

androidx.appcompat.widget.AppCompatTextView

import

com.example.shapefontbg.shape.builder.ShapeDrawableBuilder

import

com.example.shapefontbg.shape.builder.TextColorBuilder

import

com.example.shapefontbg.shape.styleable.ShapeTextViewStyleable/***

author

https://github.com/getActivity/ShapeView*

time

context.obtainStyledAttributes(attrs,

R.styleable.ShapeTextView)//初始化背景属性shapeDrawableBuilder

typedArray,

STYLEABLE)//初始化文本属性textColorBuilder

typedArray,

typedArray.getInt(R.styleable.ShapeTextView_typefaceScale,

0)typefaceScale

typedArrayTypefaceScale(scale)//

设置相关背景属性shapeDrawableBuilder.intoBackground()//

设置相关文本属性

(textColorBuilder.isTextGradientColors)

text

textColorBuilder.buildLinearGradientSpannable(text)

else

textColorBuilder.intoTextColor()

}textColorBuilder.intoTextColor()}/***

字体粗度*

{super.setTextColor(color)textColorBuilder?.textColor

colortextColorBuilder?.clearTextGradientColors()}/***

渐变入口*

(textColorBuilder?.isTextGradientColors

true)

{super.setText(textColorBuilder.buildLinearGradientSpannable(text),

type)}

Paint.Style.FILL_AND_STROKEsuper.onDraw(canvas)paint.strokeWidth

style}fun

(textColorBuilder.isTextGradientColors)

{text

textColorBuilder.buildLinearGradientSpannable(text)}

else

{textColorBuilder.intoTextColor()}改为可能多走了一层内层判断性能应该没有太大影响

textColorBuilder.intoTextColor()原因内部、外部判断逻辑重复去除外部判断即可

内部实现为文本渐变核心类后续会单独说明

nameshape_textGradientOrientation!--

水平渐变

nameshape_buttonPressedDrawable

formatreference

nameshape_buttonCheckedDrawable

formatreference

nameshape_buttonDisabledDrawable

formatreference

nameshape_buttonFocusedDrawable

formatreference

nameshape_buttonSelectedDrawable

formatreference

nameshape_textGradientOrientation

/attr

我觉得因为原始项目中具体实现Styleable类有很多个如果后续有扩展的话也可以再用工厂模式或策略模式二次封装

背景属性抽象类

com.example.shapefontbg.shape.styleable/***

author

https://github.com/getActivity/ShapeView*

time

com.example.shapefontbg.shape.styleable/***

author

https://github.com/getActivity/ShapeView*

time

textGradientOrientationStyleable:

Int

声明对应抽象类的自定义属性可用于固定属性、动态设置属性将动态属性和静态自定义属性做了一个基础映射

package

com.example.shapefontbg.shape.styleableimport

author

https://github.com/getActivity/ShapeView*

time

[IShapeDrawableStyleable]*/override

val

R.styleable.ShapeTextView_shapeoverride

val

R.styleable.ShapeTextView_shape_widthoverride

val

R.styleable.ShapeTextView_shape_heightoverride

val

R.styleable.ShapeTextView_shape_solidColoroverride

val

R.styleable.ShapeTextView_shape_solidPressedColoroverride

val

R.styleable.ShapeTextView_shape_solidDisabledColoroverride

val

R.styleable.ShapeTextView_shape_solidFocusedColoroverride

val

R.styleable.ShapeTextView_shape_solidSelectedColoroverride

val

R.styleable.ShapeTextView_shape_radiusoverride

val

R.styleable.ShapeTextView_shape_topLeftRadiusoverride

val

R.styleable.ShapeTextView_shape_topRightRadiusoverride

val

R.styleable.ShapeTextView_shape_bottomLeftRadiusoverride

val

R.styleable.ShapeTextView_shape_bottomRightRadiusoverride

val

R.styleable.ShapeTextView_shape_startColoroverride

val

R.styleable.ShapeTextView_shape_centerColoroverride

val

R.styleable.ShapeTextView_shape_endColoroverride

val

R.styleable.ShapeTextView_shape_useLeveloverride

val

R.styleable.ShapeTextView_shape_angleoverride

val

R.styleable.ShapeTextView_shape_gradientTypeoverride

val

R.styleable.ShapeTextView_shape_centerXoverride

val

R.styleable.ShapeTextView_shape_centerYoverride

val

R.styleable.ShapeTextView_shape_gradientRadiusoverride

val

R.styleable.ShapeTextView_shape_strokeColoroverride

val

R.styleable.ShapeTextView_shape_strokePressedColoroverride

val

R.styleable.ShapeTextView_shape_strokeDisabledColoroverride

val

R.styleable.ShapeTextView_shape_strokeFocusedColoroverride

val

R.styleable.ShapeTextView_shape_strokeSelectedColoroverride

val

R.styleable.ShapeTextView_shape_strokeWidthoverride

val

R.styleable.ShapeTextView_shape_dashWidthoverride

val

R.styleable.ShapeTextView_shape_dashGap/***

[ITextColorStyleable]*/override

val

R.styleable.ShapeTextView_shape_textColoroverride

val

R.styleable.ShapeTextView_shape_textPressedColoroverride

val

R.styleable.ShapeTextView_shape_textDisabledColoroverride

val

R.styleable.ShapeTextView_shape_textFocusedColoroverride

val

R.styleable.ShapeTextView_shape_textSelectedColoroverride

val

R.styleable.ShapeTextView_shape_textStartColoroverride

val

R.styleable.ShapeTextView_shape_textCenterColoroverride

val

R.styleable.ShapeTextView_shape_textEndColoroverride

val

textGradientOrientationStyleable

R.styleable.ShapeTextView_shape_textGradientOrientation

}扩展因为原作者的Shape使用场景、范围较广所以有挺多Layout-Styleable内部实现也均有所不同因为该篇主要记录渐变文本所以我们仅需关注ShapeTextViewStyleable即可

Builder

单一职责解耦分别作用于背景和TextView自身支持自定义属性设置方式含静态设置、动态设置建造者模式便于链式动态设置自定义属性封装一些通用型方法

ShapeDrawableBuilder

com.example.shapefontbg.shape.builder;import

android.content.res.TypedArray;

import

android.graphics.drawable.Drawable;

import

android.graphics.drawable.GradientDrawable;

import

android.graphics.drawable.StateListDrawable;

import

androidx.annotation.Nullable;import

com.example.shapefontbg.shape.styleable.IShapeDrawableStyleable;/***

author

https://github.com/getActivity/ShapeView*

time

typedArray.getInt(styleable.getShapeTypeStyleable(),

0);mShapeWidth

typedArray.getDimensionPixelSize(styleable.getShapeWidthStyleable(),

-1);mShapeHeight

typedArray.getDimensionPixelSize(styleable.getShapeHeightStyleable(),

-1);mSolidColor

typedArray.getColor(styleable.getSolidColorStyleable(),

NO_COLOR);if

(typedArray.hasValue(styleable.getSolidPressedColorStyleable()))

{mSolidPressedColor

typedArray.getColor(styleable.getSolidPressedColorStyleable(),

NO_COLOR);}if

(styleable.getSolidCheckedColorStyleable()

typedArray.hasValue(styleable.getSolidCheckedColorStyleable()))

{mSolidCheckedColor

typedArray.getColor(styleable.getSolidCheckedColorStyleable(),

NO_COLOR);}if

(typedArray.hasValue(styleable.getSolidDisabledColorStyleable()))

{mSolidDisabledColor

typedArray.getColor(styleable.getSolidDisabledColorStyleable(),

NO_COLOR);}if

(typedArray.hasValue(styleable.getSolidFocusedColorStyleable()))

{mSolidFocusedColor

typedArray.getColor(styleable.getSolidFocusedColorStyleable(),

NO_COLOR);}if

(typedArray.hasValue(styleable.getSolidSelectedColorStyleable()))

{mSolidSelectedColor

typedArray.getColor(styleable.getSolidSelectedColorStyleable(),

NO_COLOR);}int

typedArray.getDimensionPixelSize(styleable.getRadiusStyleable(),

0);mTopLeftRadius

typedArray.getDimensionPixelSize(styleable.getTopLeftRadiusStyleable(),

typedArray.getDimensionPixelSize(styleable.getTopRightRadiusStyleable(),

typedArray.getDimensionPixelSize(styleable.getBottomLeftRadiusStyleable(),

typedArray.getDimensionPixelSize(styleable.getBottomRightRadiusStyleable(),

radius);if

(typedArray.hasValue(styleable.getStartColorStyleable())

typedArray.hasValue(styleable.getEndColorStyleable()))

{if

(typedArray.hasValue(styleable.getCenterColorStyleable()))

{mGradientColors

int[]{typedArray.getColor(styleable.getStartColorStyleable(),

NO_COLOR),typedArray.getColor(styleable.getCenterColorStyleable(),

NO_COLOR),typedArray.getColor(styleable.getEndColorStyleable(),

NO_COLOR)};}

int[]{typedArray.getColor(styleable.getStartColorStyleable(),

NO_COLOR),typedArray.getColor(styleable.getEndColorStyleable(),

typedArray.getBoolean(styleable.getUseLevelStyleable(),

false);mAngle

typedArray.getFloat(styleable.getAngleStyleable(),

0);mGradientType

typedArray.getInt(styleable.getGradientTypeStyleable(),

GradientDrawable.LINEAR_GRADIENT);mCenterX

typedArray.getFloat(styleable.getCenterXStyleable(),

0.5f);mCenterY

typedArray.getFloat(styleable.getCenterYStyleable(),

typedArray.getDimensionPixelSize(styleable.getGradientRadiusStyleable(),

radius);mStrokeColor

typedArray.getColor(styleable.getStrokeColorStyleable(),

NO_COLOR);if

(typedArray.hasValue(styleable.getStrokePressedColorStyleable()))

{mStrokePressedColor

typedArray.getColor(styleable.getStrokePressedColorStyleable(),

NO_COLOR);}if

(styleable.getStrokeCheckedColorStyleable()

typedArray.hasValue(styleable.getStrokeCheckedColorStyleable()))

{mStrokeCheckedColor

typedArray.getColor(styleable.getStrokeCheckedColorStyleable(),

NO_COLOR);}if

(typedArray.hasValue(styleable.getStrokeDisabledColorStyleable()))

typedArray.getColor(styleable.getStrokeDisabledColorStyleable(),

NO_COLOR);}if

(typedArray.hasValue(styleable.getStrokeFocusedColorStyleable()))

{mStrokeFocusedColor

typedArray.getColor(styleable.getStrokeFocusedColorStyleable(),

NO_COLOR);}if

(typedArray.hasValue(styleable.getStrokeSelectedColorStyleable()))

typedArray.getColor(styleable.getStrokeSelectedColorStyleable(),

typedArray.getDimensionPixelSize(styleable.getStrokeWidthStyleable(),

0);mDashWidth

typedArray.getDimensionPixelSize(styleable.getDashWidthStyleable(),

0);mDashGap

typedArray.getDimensionPixelSize(styleable.getDashGapStyleable(),

0);}public

color;clearGradientColors();return

this;}public

topRightRadius;mBottomLeftRadius

bottomLeftRadius;mBottomRightRadius

this;}public

createGradientDrawable(mSolidColor,

mStrokeColor);//

{defaultDrawable.setColors(mGradientColors);}if

(mSolidPressedColor

defaultDrawable;}StateListDrawable

drawable

int[]{android.R.attr.state_pressed},

createGradientDrawable(mSolidPressedColor

null

mSolidColor,mStrokePressedColor

null

int[]{android.R.attr.state_checked},

createGradientDrawable(mSolidCheckedColor

null

mSolidColor,mStrokeCheckedColor

null

int[]{-android.R.attr.state_enabled},

createGradientDrawable(mSolidDisabledColor

null

mSolidColor,mStrokeDisabledColor

null

int[]{android.R.attr.state_focused},

createGradientDrawable(mSolidFocusedColor

null

mSolidColor,mStrokeFocusedColor

null

int[]{android.R.attr.state_selected},

createGradientDrawable(mSolidSelectedColor

null

mSolidColor,mStrokeSelectedColor

null

mStrokeColor));}drawable.addState(new

int[]{},

mView.setLayerType(View.LAYER_TYPE_SOFTWARE,

null);

}mView.setBackground(drawable);}private

GradientDrawable

mBottomLeftRadius};GradientDrawable

gradientDrawable

GradientDrawable();gradientDrawable.setShape(mShape);

形状gradientDrawable.setSize(mShapeWidth,

mShapeHeight);

尺寸gradientDrawable.setCornerRadii(radius);

圆角gradientDrawable.setColor(solidColor);

颜色gradientDrawable.setUseLevel(mUseLevel);gradientDrawable.setStroke(strokeColor,

mStrokeWidth,

边框gradientDrawable.setOrientation(toOrientation(mAngle));gradientDrawable.setGradientType(mGradientType);gradientDrawable.setGradientRadius(mGradientRadius);gradientDrawable.setGradientCenter(mCenterX,

mCenterY);return

GradientDrawable.Orientation.LEFT_RIGHT;case

45:return

GradientDrawable.Orientation.BL_TR;case

90:return

GradientDrawable.Orientation.BOTTOM_TOP;case

135:return

GradientDrawable.Orientation.BR_TL;case

180:return

GradientDrawable.Orientation.RIGHT_LEFT;case

225:return

GradientDrawable.Orientation.TR_BL;case

270:return

GradientDrawable.Orientation.TOP_BOTTOM;case

315:return

GradientDrawable.Orientation.TL_BR;default:break;}}return

GradientDrawable.Orientation.LEFT_RIGHT;}

一对应属性

com.example.shapefontbg.shape.builder;import

android.content.res.ColorStateList;

import

android.content.res.TypedArray;

import

android.text.SpannableStringBuilder;

import

androidx.annotation.Nullable;import

com.example.shapefontbg.shape.LinearGradientFontSpan;

import

com.example.shapefontbg.shape.styleable.ITextColorStyleable;/***

author

https://github.com/getActivity/ShapeView*

time

mTextGradientOrientation;public

textView,

typedArray.getColor(styleable.getTextColorStyleable(),

textView.getTextColors().getDefaultColor());if

(typedArray.hasValue(styleable.getTextPressedColorStyleable()))

{mTextPressedColor

typedArray.getColor(styleable.getTextPressedColorStyleable(),

mTextColor);}if

(styleable.getTextCheckedColorStyleable()

typedArray.hasValue(styleable.getTextCheckedColorStyleable()))

{mTextCheckedColor

typedArray.getColor(styleable.getTextCheckedColorStyleable(),

mTextColor);}if

(typedArray.hasValue(styleable.getTextDisabledColorStyleable()))

{mTextDisabledColor

typedArray.getColor(styleable.getTextDisabledColorStyleable(),

mTextColor);}if

(typedArray.hasValue(styleable.getTextFocusedColorStyleable()))

{mTextFocusedColor

typedArray.getColor(styleable.getTextFocusedColorStyleable(),

mTextColor);}if

(typedArray.hasValue(styleable.getTextSelectedColorStyleable()))

{mTextSelectedColor

typedArray.getColor(styleable.getTextSelectedColorStyleable(),

mTextColor);}if

(typedArray.hasValue(styleable.getTextStartColorStyleable())

typedArray.hasValue(styleable.getTextEndColorStyleable()))

{if

(typedArray.hasValue(styleable.getTextCenterColorStyleable()))

{mTextGradientColors

int[]{typedArray.getColor(styleable.getTextStartColorStyleable(),

mTextColor),typedArray.getColor(styleable.getTextCenterColorStyleable(),

mTextColor),typedArray.getColor(styleable.getTextEndColorStyleable(),

mTextColor)};}

int[]{typedArray.getColor(styleable.getTextStartColorStyleable(),

mTextColor),typedArray.getColor(styleable.getTextEndColorStyleable(),

mTextColor)};}}mTextGradientOrientation

typedArray.getColor(styleable.getTextGradientOrientationStyleable(),LinearGradientFontSpan.GRADIENT_ORIENTATION_HORIZONTAL);}public

TextColorBuilder

color;clearTextGradientColors();return

this;}public

mTextGradientOrientation;}public

buildLinearGradientSpannable(CharSequence

text)

LinearGradientFontSpan.buildLinearGradientSpannable(text,

mTextGradientColors,

mTextGradientOrientation);}public

ColorStateList

ColorStateList.valueOf(mTextColor);}int

maxSize

int[]{android.R.attr.state_pressed};colorsTemp[arraySize]

mTextPressedColor;arraySize;}if

(mTextCheckedColor

int[]{android.R.attr.state_checked};colorsTemp[arraySize]

mTextCheckedColor;arraySize;}if

(mTextDisabledColor

int[]{-android.R.attr.state_enabled};colorsTemp[arraySize]

mTextDisabledColor;arraySize;}if

(mTextFocusedColor

int[]{android.R.attr.state_focused};colorsTemp[arraySize]

mTextFocusedColor;arraySize;}if

(mTextSelectedColor

int[]{android.R.attr.state_selected};colorsTemp[arraySize]

mTextSelectedColor;arraySize;}statesTemp[arraySize]

new

对数组进行拷贝System.arraycopy(statesTemp,

states,

arraySize);System.arraycopy(colorsTemp,

colors,

{mTextView.setText(buildLinearGradientSpannable(mTextView.getText()));return;}mTextView.setTextColor(buildColorState());}

文本渐变核心类

com.example.shapefontbg.shape;import

import

android.graphics.LinearGradient;

import

android.text.SpannableStringBuilder;

import

android.text.style.ReplacementSpan;

import

android.widget.LinearLayout;import

androidx.annotation.NonNull;/***

author

https://github.com/getActivity/ShapeView*

time

GRADIENT_ORIENTATION_HORIZONTAL

垂直渐变方向*/public

buildLinearGradientSpannable(CharSequence

text,

SpannableStringBuilder(text);//下面声明了建造方法所以支持链式设置LinearGradientFontSpan

span

LinearGradientFontSpan().setTextGradientColor(colors).setTextGradientOrientation(orientation).setTextGradientPositions(positions);builder.setSpan(span,

builder.length(),

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);return

builder;}/***

mTextGradientPositions;Overridepublic

int

详情请见https://stackoverflow.com/questions/20069537/replacementspans-draw-method-isnt-calledPaint.FontMetricsInt

metrics

metrics.top;fontMetricsInt.ascent

metrics.ascent;fontMetricsInt.descent

metrics.descent;fontMetricsInt.bottom

(int)

mMeasureTextWidth;}Overridepublic

void

paint.ascent(),mTextGradientColor,

else

Shader.TileMode.REPEAT);}paint.setShader(linearGradient);int

alpha

如果是则设置不透明paint.setAlpha(255);}canvas.drawText(text,

start,

绘制完成之后将画笔的透明度还原回去paint.setAlpha(alpha);}public

orientation)

setTextGradientPositions(float[]

positions)