Android自定义Span实现文字渐变效果

目录
  • 前言
  • ForegroundColorSpan解析
  • 文本颜色动画渐变样式实现
  • 小结

前言

Android提供一些Span设置文本样式外,开发者若希望实现一些新特性也是能自定义开发实现的。只要了解原生Android底层是如何实现特殊样式,在其基础之上做一些创新就能够把文本内容玩出花来。

PS:本次先不探究TextView是如何解析加载底层实现文本样式绘制,只介绍CharacterStyle类的实现。

ForegroundColorSpan解析

这里以ForegroundColorSpan文本颜色样式Span举例,其继承CharacterStyle也就是字符样式顶层抽象类以及其样式同样也是继承自它。

public class ForegroundColorSpan extends CharacterStyle
        implements UpdateAppearance, ParcelableSpan {

    private final int mColor;

    public ForegroundColorSpan(@ColorInt int color) {
        mColor = color;
    }
    ....... 忽略无关代码

    @ColorInt
    public int getForegroundColor() {
        return mColor;
    }
    /// 重要函数
    @Override
    public void updateDrawState(@NonNull TextPaint textPaint) {
        textPaint.setColor(mColor);
    }
}

ForegroundColorSpan类源码中可知文本颜色由入参int color决定,同时文本的绘制颜色更新是由textPaint设置了入参color实现。从而得知文本样式绘制主要由textPaint实现,textPaint又是继承自Paint。只要对textPaint做一些改变和参数设置也能实现自定义功能能力了。

文本颜色动画渐变样式实现

如图所示实现文本颜色渐变效果,只需要自定义ForegroundColorSpan在其基础之上增加颜色更新变化即可实现如上效果。已知关键点是入参int color实时更新,因此只要修改颜色值并且在updateDrawState函数上修改颜色值满足以上两点就能够达到期望效果。

class MutableForegroundColorSpan : ForegroundColorSpan {
    // 动画渐变值预设
    companion object {
        val MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY: Property<MutableForegroundColorSpan, Int> =
            object : Property<MutableForegroundColorSpan, Int>(
                Int::class.java, "MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY"
            ) {
                override operator fun set(span: MutableForegroundColorSpan, value: Int) {
                    span.foregroundColor = value
                }

                override operator fun get(span: MutableForegroundColorSpan): Int {
                    return span.foregroundColor
                }
            }
    }

    private var mAlpha = 255
    private var mForegroundColor: Int

    constructor(alpha: Int, color: Int) : super(color) {
        mAlpha = alpha
        mForegroundColor = color
    }
    // 原构造函数继承
    constructor(src: Parcel): super(src) {

        mForegroundColor = src.readInt()
        mAlpha = src.readInt()
    }

    override fun writeToParcel(dest: Parcel, flags: Int) {
        super.writeToParcel(dest, flags)
        dest.writeInt(mForegroundColor)
        dest.writeInt(mAlpha)
    }
    // 动画设置
    fun animationColorChange(startColor: Int,endColor:Int) : ObjectAnimator{
        val objectAnimator: ObjectAnimator = ObjectAnimator.ofInt(
            this,
            MutableForegroundColorSpan.MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY,
            startColor,
            endColor
        )
        objectAnimator.setEvaluator(ArgbEvaluator())
        objectAnimator.duration = 3000
        return objectAnimator
    }

    // 透明度
    fun setAlpha(alpha: Int) {
        mAlpha = alpha
    }

    fun setForegroundColor(foregroundColor: Int) {
        mForegroundColor = foregroundColor
    }

    // 更新画笔颜色
    override fun updateDrawState(ds: TextPaint) {
        ds.color = foregroundColor
    }
     // 获取文本颜色
    override fun getForegroundColor(): Int {
        return Color.argb(
            mAlpha,
            Color.red(mForegroundColor),
            Color.green(mForegroundColor),
            Color.blue(mForegroundColor)
        )
    }

}
 // 样式设置 监听动画回调重新设置样式从而刷新文本
private var mutableForegroundColorSpan =
    MutableForegroundColorSpan(255, Color.BLACK)
mutableForegroundColorSpan.animationColorChange(
    Color.BLACK,
    Color.RED
).run {
    addUpdateListener {
        mutableForegroundColorView.text = animationColor()
    }
    start()
}

// 文本样式配置
private fun animationColor(): SpannableStringBuilder {
    var spannableString = SpannableStringBuilder("")
    spannableString.also { span ->
        span.append(SpannableString("xxxxMutableForegroundColorSpanyyyy").also {
            it.setSpan(
                mutableForegroundColorSpan,
                4,
                "MutableForegroundColorSpan".length,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
            )
        })
    }
    return spannableString
}

以上是实现文本渐变效果代码,增加实时刷新文本颜色之后就能够让文本颜色变化呈现动画效果。其也能拓展功能例如从透明逐步可见也是另外一种特别效果。此外内置动画效果同样也能以动画类的能力来设置循环次数等其他动画应有的功能。

小结

改造ForegroundColorSpan类外结合动画能力还能为文本样式创作做更多好玩效果。在此不一一例举开发者可以根据业务需要和想象力自行设置实现更有趣的内容效果。

以上就是Android自定义Span实现文字渐变效果的详细内容,更多关于Android Span文字渐变的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解Android SpannableString多行图文混排的应用实战

    TeXtView大家应该都不陌生,文本展示控件嘛! 就用TextView显示普普通通的文本,OK,很简单,Android入门的都会,没入门的在门缝外看两眼也都会,哈哈,开玩笑.那要是设计在开发需求中要求类似微信聊天表情一样在TextView中插入表情图片呢? 有的小伙伴就会说啦,"TextView添加图片我会啊,不就是drawableLeft,drawableRight嘛!" 嗯 ~ 也行,算是一种方法,可这有一个限制,首先,图片只能在TextView的两端,其次,两端都只能设置一张图

  • Android学习之Span的使用方法详解

    目录 Span集合 段落类Span 其他Span 展示效果 小试牛刀 小结 Span集合 段落类Span BulletSpan 为段落开头增加项目符号并支持大小.颜色.弧度 span.append(SpannableString("BulletSpan").also { it.setSpan(BulletSpan(40, Color.RED), 0, 10, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE) }) QuoteSpan 为段落开头增加垂直引用线 sp

  • Android RichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)

    AndroidRichText帮助实现像QQ,微信一样的,一个TextView里既有文字又有表情又有图片的效果,采用插件化的框架,代码简单,可拓展性强. 基础框架包只有四个java文件, RichTextWrapper :TextView的包裹类,实现支持富文本,通过new RichTextWrapper(TextView v)来构造. RTMovementMethod: 继承自Android原生的LinkMovementMethod,重写onTouchEvent方法,优化了ClickSpan(

  • Android SpannableString设置超链接、颜色、字体等属性

    Android SpannableString设置超链接.颜色.字体等属性 在Android中,TextView是我们最常用的用来显示文本的控件. 一般情况下,TextView中的文本都是一个样式.那么如何对于TextView中各个部分的文本来设置字体,大小,颜色,样式,以及超级链接等属性呢?下面我们通过SpannableString的具体实例操作来演示一下. package com.snowdream; import java.io.IOException; import org.xmlpul

  • Android使用Span打造丰富多彩的文本详解

    目录 1.引言 2.SpannableStringBuilder的基本用法 3.使用Span给文本添加效果 3.1 AbsoluteSizeSpan 3.2 BackgroundColorSpan 3.3 ClickableSpan 3.4 DrawableMarginSpan 3.5 DynamicDrawableSpan 3.6 ForegroundColorSpan 3.7 IconMarginSpan 3.8 ImageSpan 3.9 MaskFilterSpan 3.10 Quote

  • Android自定义TextView实现文字图片居中显示的方法

    最近有个需求是这样的,人民币的符号"¥"因为安卓手机系统的不一致导致符号不是完全一样,所以用美工的给的图片代替,考虑到用的地方比较多,所以想着写一个继承于线性布局的组合控件,后来一想,安卓中不是有TextView吗,这个自带图片的控件,后来写了个demo,因为我是用的MatchParent,导致问题出现,人民币符号不是和文字一样的居中,因此才有了这篇博文,让我们来自定义TextView吧,这个场景用的比较多. 分析下TextView的源码 我们先来分析下TextView的源码,因为Te

  • Android自定义跑马灯文字效果

    本文实例为大家分享了Android自定义跑马灯文字的具体代码,供大家参考,具体内容如下 Android 跑马灯效果文字: 效果图(真实动画很流畅,这个转gif有问题,感觉有点卡): 代码: /** * Created by wuguangliang on 2018/12/21 * * 跑马灯效果文字 */ public class MarqueeHorizontalTextView extends AppCompatTextView { private float textLength = 0f

  • Android自定义Dialog实现文字动态加载效果

    之前在技术问答上面看到一个提问 "加载中-" 后面三个点是动态的,这么一个效果实现.想来想去,好像没想到好的处理方式. 尝试了一下,以一个最笨的方式实现了.先来看一下效果 : 我是通过自定义一个Dialog,加载中的效果,是在Dialog内部实现的,进度还是从Activity里面控制的. 下面是Dialog实现类: public class CustomDialog extends AlertDialog { public CustomDialog(Context context) {

  • Android自定义TextView实现文字倾斜效果

    前言 由于Android自带的TextView控件没有提供倾斜的(我暂时没有找到),我们可以自定义控件来实现,下面首先来看我们实现的效果图. TextView文字倾斜 其实实现很简单,下面我们来看实现步骤: 1.新建一个类 LeanTextView继承TextView public class LeanTextView extends TextView { public int getmDegrees() { return mDegrees; } public void setmDegrees(

  • Android自定义实现图片加文字功能

    Android自定义实现图片加文字功能 分四步来写: 1,组合控件的xml; 2,自定义组合控件的属性; 3,自定义继承组合布局的class类,实现带两参数的构造器; 4,在xml中展示组合控件. 具体实现过程: 一.组合控件的xml 我接触的有两种方式,一种是普通的Activity的xml:一种是父节点为merge的xml.我项目中用的是第一种,但个人感觉第二种好,因为第一种多了相对或者绝对布局层. 我写的 custom_pictext.xml <?xml version="1.0&qu

  • Android 自定义TextView实现滑动解锁高亮文字

    下面一段代码给大家分享Android 自定义TextView实现滑动解锁高亮文字效果,具体代码如下所示: public class HightLightTextView extends TextView { // 存储view的宽度 private int mTextViewWidth = 0; // 画笔 private Paint mPaint; // 线性渲染 private LinearGradient mLinearGradient; // 存储变换的matrix private Ma

  • Android自定义TextView仿微信朋友圈文字展开全文功能

    Android自定义TextView仿微信朋友圈文字信息,展开全文功能 代码及注释如下: 首先写一个xml文件 showmore.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical

  • Android 自定义圆形带刻度渐变色的进度条样式实例代码

    效果图 一.绘制圆环 圆环故名思意,第一个首先绘制是圆环 1:圆环绘制函数 圆环API public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint) 参数说明 oval:圆弧所在的椭圆对象. startAngle:圆弧的起始角度. sweepAngle:圆弧的角度. useCenter:是否显示半径连线,true表示显示圆弧与圆心的半径连线,false表示不

  • Android自定义View实现折线图效果

    下面就是结果图(每种状态用一个表情图片表示): 一.主页面的布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height=&quo

  • Android 自定义 View 中使用 Spannable的实例详解

    我们都知道 Android 中使用 Spannable 可以实现 TextView 富文本的显示,但是在自定义控件中如何使用 Spannable 绘制不同样式的文字呢? 例如这种效果,标题中的 分数字61 是粗体,分 是常规字体,并且相对于 61 更小些. 第一反应可能是使用 SpannableString.setSpan() 设置 RelativeSizeSpan, 然后在 onDraw() 中进行绘制,事实是这样实现是没有效果的,因为 onDraw() 中只能获取到 SpannableStr

随机推荐