转载:http://zhengxiaopeng.com/的博客,博主翻译辛苦了。
最近,我写了一篇关于NewStand app和app上ActionBar的图标的翻转动效的文章。Cyril Mottier建议我采用一个很优雅的方案,即使用Spans去淡入淡出ActionBar的标题。
此外,我一直想尝试所有可用的Sapn色的类型:ImageSpan、BackgroundColorSpan等。他们非常简单易用但是(也)没有任何关于它们的文档和详细信息。
因此,在这篇文章中,我将探索在Spans的框架下什么是可以做的,然后,我将会告诉你怎么去进阶使用Spans。
你可以下载和安装demo程序,查看源码(再次感谢博主)。
框架
层次
主要规则:
- 如果一个Span影响字符级的文本格式,则继承CharacterStyle。
- 如果一个Span影响段落层次的文本格式,则实现ParagraphStyle
- 如果一个Span修改字符级别的文本外观,则实现UpdateAppearance
- 如果一个Span修改字符级文本度量|大小,则实现UpdateLayout
它为我们提供了下面这些美丽的类图:
characterstyle
paragraphstyle
updateappearance
updatelayout
因为它有一点复杂所以我建议你使用像这样的可视化类图,以充分理解它的层次结构。
它是如何工作的?
布局(Layout)
当你给一个TextView设置文本时,它使用基类布局去管理文本的渲染。
布局类包含一个布尔mSpannedText
:真,当文本是一个Spanned的实例时(SpannableString实现Spanned)。这个类只处理ParagraphStyle Spans。
draw方法调用了其它两个方法:
- drawBackground
对于文本的每一行,如果有一个LineBackgroundSpan用于当前行,LineBackgroundSpan#drawBackground)方法将被调用。 - drawText
对于文本的每一行,它计算LeadingMarginSpan和LeadingMarginSpan2,并调用LeadingMarginSpan#drawLeadingMargin)方法当它是必要的时候。这也用于确定文本对齐。最后,如果当前行是跨行的,布局将调用 TextLine#draw方法(每一行都会创建一个TextLine对象)。
文本行(TextLine)
android.text.TextLine的文档这么说:代表一行样式的文字,用于测量视觉顺序和为了渲染。
TextLine类包含3个Spans的集合:
- MetricAffectingSpan set
- CharacterStyle set
- ReplacementSpan set
其中有趣的方法:TextLine#handleRun,这也是所有的Spans用来渲染文本的。相对于Span的类型,TextLine调用:
- CharacterStyle#updateDrawState方法更改MetricAffectingSpan和CharacterStyle两个Spans的TextPaint配置。
- TextLine#handleReplacement方法处理ReplacementSpan。它调用Replacement#getSize)得到replacement的宽度,如果它需要更新字体规格最终会调用Replacement#draw
字体规格(Font Metrics)
如果你想知道更多什么是字体规格,那么看下面的图解:
fontmetrics
耍起来
BulletSpan
android.text.style.BulletSpan
BulletSpan影响段落层次的文本格式。它可以给段落的开始处加上项目符号。
1 | /** |
QuoteSpan
android.text.style.QuoteSpan
QuoteSpan影响段落层次的文本格式。它可以给一个段落加上垂直的引用线。
1 | /** |
AlignmentSpan.Standard
android.text.style.AlignmentSpan.Standard
AlignmentSpan.Standard影响段落层次的文本格式。它可以把段落的每一行文本按正常、居中、相反的方式对齐。
1 | /** |
UnderlineSpan
android.text.style.UnderlineSpan
UnderlineSpan影响字符级的文本格式。它可以为字符集加上下划线,归功于Paint#setUnderlineText(true))。
1 | //下划线 |
StrikethroughSpan
android.text.style.StrikethroughSpan
StrikethroughSpan影响字符级的文本格式。它可以给字符集加上删除线,归功于Paint#setStrikeThruText(true))。
1 | //删除线 |
SubscriptSpan
android.text.style.SubscriptSpan
SubscriptSpan影响字符级的文本格式,它可以通过减小TextPaint#baselineShift给字符集加下标。
1 | //下标 |
SuperscriptSpan
android.text.style.SuperscriptSpan
SuperscriptSpan影响字符级的文本格式。它可以通过增加TextPaint#baselineShift 给字符集加上标。
1 | //上标 |
BackgroundColorSpan
android.text.style.BackgroundColorSpan
BackgroundColorSpan影响字符级的文本格式。它可以给字符集加上背景颜色。
1 | /** |
ForegroundColorSpan
android.text.style.ForegroundColorSpan
ForegroundColorSpan影响字符级的文本格式,它可以设置字符集的前景颜色也即文字颜色。
1 | /** |
ImageSpan
android.text.style.ImageSpan
ImageSpan影响字符级的文本格式。它可以生成图像字符。这是为数不多的文档齐全的Span所以enjoy it!
1 | /** |
StyleSpan
android.text.style.StyleSpan
StyleSpan影响字符级的文本格式,它可以给字符集设置样式(blod、italic、normal)。
1 | //设置bold+italic的字符样式 |
TypefaceSpan
android.text.style.TypefaceSpan
TypefaceSpan影响字符级的文本格式。它可以给字符设置字体集(monospace、serif等)。
1 | //设置serif family |
TextAppearanceSpan
android.text.style.TextAppearanceSpan
TextAppearanceSpan影响字符级的文本格式。它可以给字符集设置外观(appearance)。
1 | /** |
1 | <-- style.xml --> |
AbsoluteSizeSpan
android.text.style.AbsoluteSizeSpan
AbsoluteSizeSpan影响字符级的文本格式。它可以设置一个字符集的绝对文字大小。
1 | /** |
RelativeSizeSpan
android.text.style.RelativeSizeSpan
RelativeSizeSpan影响字符水平的文本格式。它可以设置字符集的文本大小。
1 | //设置文字大小为大2倍 |
ScaleXSpan
android.text.style.ScaleXSpan
ScaleXSpan印象字符集的文本格式。它可以在x轴方向上缩放字符集。
1 | //设置水平方向上放大3倍 |
MaskFilterSpan
android.text.style.MaskFilterSpan
MaskFilterSpan影响字符集文本格式。它可以给字符集设置android.graphics.MaskFilter。
警告:BlurMaskFilter不支持硬件加速
1 | //模糊字符集 |
MaskFilterSpan的效果图: BlurMaskFilter
MaskFilterSpan的效果图: EmbossMaskFilter
Spans进阶
前景色(文字颜色)动画
前景色(文字颜色)动画
ForegroundColorSpan为只读。这意味实例化之后着你不能改变你不能改变前景色。所以,要做的第一件事就是编写一个MutableForegroundColorSpan。
MutableForegroundColorSpan.java
1 | public class MutableForegroundColorSpan extends ForegroundColorSpan |
现在,我们可以在同一个实例改变透明度和前景色了。但是,当你设置这些属性,它并不会刷新视图,你必须通过重新设置SpannableString才能刷新视图。
1 | MutableForegroundColorSpan span = new MutableForegroundColorSpan(255, Color.BLACK); |
现在我们要前景色的动画。我们可以自定义android.util.Property。
1 | private static final Property<MutableForegroundColorSpan, Integer> MUTABLE_FOREGROUND_COLOR_SPAN_FC_PROPERTY = |
最后,我们使用属性动画(ObjectAnimator)让自定义属性动起来。不要忘记更新视图。
1 | MutableForegroundColorSpan span = new MutableForegroundColorSpan(255, Color.BLACK); |
ActionBar”烟火”
ActionBar"烟火"
“烟火”动画是让文字随机淡入。首先,把文字切断成多个spans(例如,一个character的span),淡入spans后再淡入其它的spans。用前面介绍的MutableForegroundColorSpan,我们将创建一组特殊的span对象。在span组调用对应的setAlpha方法,我们随机设置每个span的透明度。
1 | private static final class FireworksSpanGroup { |
我们创建一个自定义属性动画的属性去更改FireworksSpanGroup的透明度
1 | private static final Property<FireworksSpanGroup, Float> FIREWORKS_GROUP_PROGRESS_PROPERTY = |
最后,我们创建span组并使用一个ObjectAnimator给其加上动画。
1 | final FireworksSpanGroup spanGroup = new FireworksSpanGroup(); |
使用自定义的span
在本节中,我们将看到使用自定义span来绘制的方式。这是文本定制很好的方式。
首先,我们要创建一个继承ReplacementSpan抽象类的自定义Span。
如果你想画一个自定义的背景,你可以实现LineBackgroundSpan
,这是影响段落级的文本格式。
我们必须实现2个方法:
- getSize):这个方法返回新的你更换后的size。
text:Span管理的文本
start:文本开始处
end:文本结尾处
fm:字体规格,可以为空 - draw):可以使用Canvas绘制。
x:绘制文本的x坐标
top:线(line)的顶部(译者注:line的定义参看前面字体规格这一节)
y:基线
bottom:线的底部、
让我们看一个例子,画一个包围文本的蓝色矩形。
FrameSpan.java
1 | @Override |
附加
Sample app包含了一些Spans进阶的例子,如下:
Progressive blur
Typewriter
总结
在编写这篇文章的过程中,我意识到Spans是真的像Drawable那样强大的,我认为它们还没有被充分运用。文本是一个应用程序的主要内容,它无处不在,所以不要忘记,通过Spans让它变得更具活力和吸引力!