自定义Span

作者: 风从影 | 来源:发表于2016-12-09 18:23 被阅读2748次

自定义Span
自定义圆角Span
vue中ElementUI el-table 动态跨列、跨行显示
探索 Android 中的 Span
open tracing
杂记
Span
前端知识点（17）
vue相关项目.md
08 Store data

1 简介

之前已经讲过TextView的基础知识、段落级别的Span和字符级别的Span，分析了Android提供的一些Span的源码，这篇文字讲解如何自定义Span。
这篇文章中，由于段落级别的Span比较简单，在这不讲述这个类型的自定义Span。这篇着重讲述字符级的Span，并且结合Android提供动画机制制作出十分酷炫的动画Span。

2 FrameSpan

FrameSpan实现给相应的字符序列添加边框的效果，整体思路其实比较简单。

计算字符序列的宽度；

根据计算的宽度、上下坐标、起始坐标绘制矩形；

绘制文字

展现效果如下所示：

FrameSpan

再来看一下代码，其实代码十分简单。

public class FrameSpan extends ReplacementSpan {

    private final Paint mPaint;
    private int mWidth;

    public FrameSpan() {
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLUE);
        mPaint.setAntiAlias(true);
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        //return text with relative to the Paint
        mWidth = (int) paint.measureText(text, start, end);
        return mWidth;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        //draw the frame with custom Paint
        canvas.drawRect(x, top, x + mWidth, bottom, mPaint);
        canvas.drawText(text, start, end, x, y, paint);
    }
}

在这再次说明一下draw方法里面的参数的意义。

canvas：用来绘制的画布；

text：整个text；

start：这个Span起始字符在text中的位置；

end：这个Span结束字符在text中的位置；

x：这个Span的其实水平坐标；

y：这个Span的baseline的垂直坐标；

top：这个Span的起始垂直坐标；

bottom：这个Span的结束垂直坐标；

paint：画笔

3 VerticalImageSpan

Google提供的ImageSpan和DynamicDrawableSpan只能实现图片和文字底部对齐或者是baseline对齐，现在VerticalImageSpan可以实现图片和文字居中对齐。

VerticalImageSpan

图中的图片保持了和文字居中对齐，现在来看看VerticalImageSpan的源码。

public class VerticalImageSpan extends ImageSpan {

    private Drawable drawable;
    public VerticalImageSpan(Drawable drawable) {
        super(drawable);
        this.drawable=drawable;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fontMetricsInt) {
        Drawable drawable = getDrawable();
        if(drawable==null){
            drawable= this.drawable;
        }
        Rect rect = drawable.getBounds();
        if (fontMetricsInt != null) {
            Paint.FontMetricsInt fmPaint = paint.getFontMetricsInt();
            int fontHeight = fmPaint.bottom - fmPaint.top;
            int drHeight = rect.bottom - rect.top;

            int top = drHeight / 2 - fontHeight / 4;
            int bottom = drHeight / 2 + fontHeight / 4;

            fontMetricsInt.ascent = -bottom;
            fontMetricsInt.top = -bottom;
            fontMetricsInt.bottom = top;
            fontMetricsInt.descent = top;
        }
        return rect.right;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        Drawable drawable = getDrawable();
        canvas.save();
        int transY = ((bottom - top) - drawable.getBounds().bottom) / 2 + top;
        canvas.translate(x, transY);
        drawable.draw(canvas);
        canvas.restore();
    }
}

在geSize方法中通过fontMetricsInt设置从而实现图片和文字居中对齐，其实计算的根本为计算baseline的位置，因为TextView是按照baseline对齐的。
分析getSize方法可以知道这个图片的baseline为图片中央往下fontHeight / 2，这样也就实现了图片和文字的居中对齐。
draw方法用来绘制图片，绘制x坐标为span的其实坐标，绘制y坐标可以通过计算得到，具体计算请看上面的源码。

4 AnimateForegroundColorSpan

先讲述一个简单的动画Span的例子，这个动画是用来改变文字颜色的。

AnimateForegroundColorSpan

源代码如下：

private void animateColorSpan() {
    MutableForegroundColorSpan span = new MutableForegroundColorSpan(255, mTextColor);
    mSpans.add(span);

    WordPosition wordPosition = getWordPosition(mBaconIpsum);
    mBaconIpsumSpannableString.setSpan(span, wordPosition.start, wordPosition.end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    ObjectAnimator objectAnimator = ObjectAnimator.ofInt(span, MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY, Color.BLACK, Color.RED);
    objectAnimator.setEvaluator(new ArgbEvaluator());
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //refresh
            mText.setText(mBaconIpsumSpannableString);
        }
    });
    objectAnimator.setInterpolator(mSmoothInterpolator);
    objectAnimator.setDuration(600);
    objectAnimator.start();
}

private static final Property<MutableForegroundColorSpan, Integer> MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY =
        new Property<MutableForegroundColorSpan, Integer>(Integer.class, "MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY") {

            @Override
            public void set(MutableForegroundColorSpan alphaForegroundColorSpanGroup, Integer value) {
                alphaForegroundColorSpanGroup.setForegroundColor(value);
            }

            @Override
            public Integer get(MutableForegroundColorSpan span) {
                return span.getForegroundColor();
            }
        };

其实整个逻辑比较简单，通过Property不断给span更换颜色，然后动画update的时候给TextView重新设置Span。

5 RainbowSpan

彩虹样的Span，其实实现起来也是很简单的，主要是用到了Paint的Shader技术，效果如下所示：

源代码如下所示：

private static class RainbowSpan extends CharacterStyle implements UpdateAppearance {
private final int[] colors;

public RainbowSpan(Context context) {
  colors = context.getResources().getIntArray(R.array.rainbow);
}

@Override
public void updateDrawState(TextPaint paint) {
  paint.setStyle(Paint.Style.FILL);
  Shader shader = new LinearGradient(0, 0, 0, paint.getTextSize() * colors.length, colors, null,
      Shader.TileMode.MIRROR);
  Matrix matrix = new Matrix();
  matrix.setRotate(90);
  shader.setLocalMatrix(matrix);
  paint.setShader(shader);
}
}

由于paint使用shader是从上到下进行绘制，因此这里需要用到矩阵，然后将矩阵旋转90度。

6 AnimatedRainbowSpan

AnimatedRainbowSpan

如果要实现一个动画的彩虹样式，那么该如何实现呢？
其实结合上面的RainbowSpan和AnimateForegroundColorSpan的例子便可以实现AnimatedRainbowSpan。
实现思路：通过ObjectAnimator动画调整RainbowSpan中矩阵的平移，从而实现动画彩虹的效果。
代码如下所示：

public class AnimatedRainbowSpanActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_animated_rainbow_span);

    final TextView textView = (TextView) findViewById(R.id.text);
    String text = textView.getText().toString();

    AnimatedColorSpan span = new AnimatedColorSpan(this);

    final SpannableString spannableString = new SpannableString(text);
    String substring = getString(R.string.animated_rainbow_span).toLowerCase();
    int start = text.toLowerCase().indexOf(substring);
    int end = start + substring.length();
    spannableString.setSpan(span, start, end, 0);

    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(
        span, ANIMATED_COLOR_SPAN_FLOAT_PROPERTY, 0, 100);
    objectAnimator.setEvaluator(new FloatEvaluator());
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        textView.setText(spannableString);
      }
    });
    objectAnimator.setInterpolator(new LinearInterpolator());
    objectAnimator.setDuration(DateUtils.MINUTE_IN_MILLIS * 3);
    objectAnimator.setRepeatCount(ValueAnimator.INFINITE);
    objectAnimator.start();
  }

  private static final Property<AnimatedColorSpan, Float> ANIMATED_COLOR_SPAN_FLOAT_PROPERTY
      = new Property<AnimatedColorSpan, Float>(Float.class, "ANIMATED_COLOR_SPAN_FLOAT_PROPERTY") {
    @Override
    public void set(AnimatedColorSpan span, Float value) {
      span.setTranslateXPercentage(value);
    }
    @Override
    public Float get(AnimatedColorSpan span) {
      return span.getTranslateXPercentage();
    }
  };

  private static class AnimatedColorSpan extends CharacterStyle implements UpdateAppearance {
    private final int[] colors;
    private Shader shader = null;
    private Matrix matrix = new Matrix();
    private float translateXPercentage = 0;

    public AnimatedColorSpan(Context context) {
      colors = context.getResources().getIntArray(R.array.rainbow);
    }

    public void setTranslateXPercentage(float percentage) {
      translateXPercentage = percentage;
    }

    public float getTranslateXPercentage() {
      return translateXPercentage;
    }

    @Override
    public void updateDrawState(TextPaint paint) {
      paint.setStyle(Paint.Style.FILL);
      float width = paint.getTextSize() * colors.length;
      if (shader == null) {
        shader = new LinearGradient(0, 0, 0, width, colors, null,
            Shader.TileMode.MIRROR);
      }
      matrix.reset();
      matrix.setRotate(90);
      matrix.postTranslate(width * translateXPercentage, 0);
      shader.setLocalMatrix(matrix);
      paint.setShader(shader);
    }
  }
}

7 FireworksSpan

FireworksSpan

“烟火”动画是让文字随机淡入。首先，把文字切断成多个spans（例如，一个character的span），淡入spans后再淡入其它的spans。用前面介绍的MutableForegroundColorSpan，我们将创建一组特殊的span对象。在span组调用对应的setAlpha方法，我们随机设置每个span的透明度。

private static final class FireworksSpanGroup {
    private final float mAlpha;
    private final ArrayList<MutableForegroundColorSpan> mSpans;
    private FireworksSpanGroup(float alpha) {
        mAlpha = alpha;
        mSpans = new ArrayList<MutableForegroundColorSpan>();
    }
    public void addSpan(MutableForegroundColorSpan span) {
        span.setAlpha((int) (mAlpha * 255));
        mSpans.add(span);
    }
    public void init() {
        Collections.shuffle(mSpans);
    }
    public void setAlpha(float alpha) {
        int size = mSpans.size();
        float total = 1.0f * size * alpha;
        for(int index = 0 ; index < size; index++) {
            MutableForegroundColorSpan span = mSpans.get(index);
            if(total >= 1.0f) {
                span.setAlpha(255);
                total -= 1.0f;
            } else {
                span.setAlpha((int) (total * 255));
                total = 0.0f;
            }
        }
    }
    public float getAlpha() { return mAlpha; }
}

我们创建一个自定义属性动画的属性去更改FireworksSpanGroup的透明度

private static final Property<FireworksSpanGroup, Float> FIREWORKS_GROUP_PROGRESS_PROPERTY =
new Property<FireworksSpanGroup, Float>(Float.class, "FIREWORKS_GROUP_PROGRESS_PROPERTY") {
    @Override
    public void set(FireworksSpanGroup spanGroup, Float value) {
        spanGroup.setAlpha(value);
    }
    @Override
    public Float get(FireworksSpanGroup spanGroup) {
        return spanGroup.getAlpha();
    }
};

最后，我们创建span组并使用一个ObjectAnimator给其加上动画。

final FireworksSpanGroup spanGroup = new FireworksSpanGroup();
//初始化包含多个spans的grop
//spanGroup.addSpan(span);
//给ActionBar的标题设置spans
//mActionBarTitleSpannableString.setSpan(span, start, end, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
spanGroup.init();
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(spanGroup, FIREWORKS_GROUP_PROGRESS_PROPERTY, 0.0f, 1.0f);
objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
    @Override
    public void onAnimationUpdate(ValueAnimator animation)
    {
        //更新标题
        setTitle(mActionBarTitleSpannableString);
    }
});
objectAnimator.start();

8 TypeWriterSpan

TypeWriterSpan

有了上面的例子，写TypeWriterSpan就变得十分简单了。
先创建TypeWriterSpanGroup

private static final class TypeWriterSpanGroup {

    private static final boolean DEBUG = false;
    private static final String TAG = "TypeWriterSpanGroup";

    private final float mAlpha;
    private final ArrayList<MutableForegroundColorSpan> mSpans;

    private TypeWriterSpanGroup(float alpha) {
        mAlpha = alpha;
        mSpans = new ArrayList<MutableForegroundColorSpan>();
    }

    public void addSpan(MutableForegroundColorSpan span) {
        span.setAlpha((int) (mAlpha * 255));
        mSpans.add(span);
    }

    public void setAlpha(float alpha) {
        int size = mSpans.size();
        float total = 1.0f * size * alpha;

        if(DEBUG) Log.d(TAG, "alpha " + alpha + " * 1.0f * size => " + total);

        for(int index = 0 ; index < size; index++) {
            MutableForegroundColorSpan span = mSpans.get(index);

            if(total >= 1.0f) {
                span.setAlpha(255);
                total -= 1.0f;
            } else {
                span.setAlpha((int) (total * 255));
                total = 0.0f;
            }

            if(DEBUG) Log.d(TAG, "alpha span(" + index + ") => " + alpha);
        }
    }

    public float getAlpha() {
        return mAlpha;
    }
}

添加Span

private TypeWriterSpanGroup buildTypeWriterSpanGroup(int start, int end) {
    final TypeWriterSpanGroup group = new TypeWriterSpanGroup(0);
    for(int index = start ; index <= end ; index++) {
        MutableForegroundColorSpan span = new MutableForegroundColorSpan(0, Color.BLACK);
        mSpans.add(span);
        group.addSpan(span);
        mBaconIpsumSpannableString.setSpan(span, index, index + 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }
    return group;
}

添加动画

private void animateTypeWriter() {
    TypeWriterSpanGroup spanGroup = buildTypeWriterSpanGroup(0, mBaconIpsum.length() - 1);
    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(spanGroup, TYPE_WRITER_GROUP_ALPHA_PROPERTY, 0.0f, 1.0f);
    objectAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            //refresh
            mText.setText(mBaconIpsumSpannableString);
        }
    });
    objectAnimator.setInterpolator(mTypeWriterInterpolator);
    objectAnimator.setDuration(5000);
    objectAnimator.start();
}

添加动画属性变化器

 private static final Property<TypeWriterSpanGroup, Float> TYPE_WRITER_GROUP_ALPHA_PROPERTY =
        new Property<TypeWriterSpanGroup, Float>(Float.class, "TYPE_WRITER_GROUP_ALPHA_PROPERTY") {

            @Override
            public void set(TypeWriterSpanGroup spanGroup, Float value) {
                spanGroup.setAlpha(value);
            }

            @Override
            public Float get(TypeWriterSpanGroup spanGroup) {
                return spanGroup.getAlpha();
            }
        };

9 相关链接

Textview图文基础
 段落级span
字符级span
自定义span

自定义Span
1 简介之前已经讲过TextView的基础知识、段落级别的Span和字符级别的Span，分析了Android提供...
自定义圆角Span
vue中ElementUI el-table 动态跨列、跨行显示
开发过程中，经常遇到自定义表格，需要跨行或跨列显示。效果：通过el-table 属性方法span-method实...
探索 Android 中的 Span
探索 Android 中的 Span 在 Android 中,使用 Span 定义文本的样式. 通过 Span 改...
open tracing
vendor neutraltrace 调用链每一个Span 都包含Span Tag, Span Log, Sp...
杂记
页面中中文标点符号换行问题，可以在CSS中设置父级div： span标签自助换行：自定义格子标签布局：以下样式是...
Span
SpannableString 和 SpannableStringBuilder SpannableString不...
前端知识点（17）
节点操作 $(function(){ var $span = $(' span元素 '); var $p = $(...
vue相关项目.md
测试 1. 目录1
08 Store data
[TOC] test function name_function...