上一篇文章中介绍了一些 Span理论知识,包括 Span 的定义、分类,自定义Span等,
另外介绍了富文本处理类——SpannedString、SpannableString 、SpannableStringBuilder,以及通过setSpan(Object what, int start, int end, int flags)创建 Span 时参数的各个含义及注意事项,文章链接:超能力文字:探索Span机制的多彩世界(一):https://blog.csdn.net/u013700502/article/details/131287022
文本如下:
private const val SPAN_STR: String =
"北国风光,千里冰封,万里雪飘。
" +
"望长城内外,惟余莽莽;大河上下,顿失滔滔。
山舞银蛇,原驰蜡象,欲与天公试比高。
" +
"须晴日,看红装素裹,_ 分外妖娆。
江山如此多娇,引无数英雄竞折腰。
" +
"惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。
" +
"一代天骄,成吉思汗,只识弯弓射大雕。
" +
"俱往矣,数风流人物,还看今朝。"
const val SPAN_STR2 = "锄禾日当午,
汗滴禾下土。
谁知盘中餐,
粒粒皆辛苦。"
const val SEG_1 = "北国风光"
const val SEG_2 = "千里冰封"
const val SEG_3 = "万里雪飘"
const val SEG_4 = "望长城内外"
const val SEG_5 = "惟余莽莽"
const val SEG_6 = "大河上下"
const val SEG_7 = "顿失滔滔"
const val SEG_8 = "山舞银蛇"
const val SEG_9 = "原驰蜡象"
const val SEG_10 = "欲与天公试比高"
const val SEG_11 = "须晴日"
const val SEG_12 = "看红装素裹"
const val SEG_13 = "_ 分外妖娆"
const val SEG_14 = "江山如此多娇"
const val SEG_15 = "引无数英雄竞折腰"
const val SEG_16 = "惜秦皇汉武"
const val SEG_17 = "略输文采"
const val SEG_18 = "唐宗宋祖"
const val SEG_19 = "稍逊风骚"
const val SEG_20 = "一代天骄"
const val SEG_21 = "成吉思汗"
const val SEG_22 = "只识弯弓射大雕"
const val SEG_23 = "俱往矣"
const val SEG_24 = "数风流人物"
const val SEG_25 = "还看今朝。"
通过 TextView 原始展示如下:
val spanBuilder = SpannableStringBuilder(SPAN_STR)
tvSpan.text = spanBuilder
origin
2.1 影响外观的Span
Appearance affecting spans
整体示例效果图:
影响外观的Span
字体颜色样式,用于改变字体颜色
spanBuilder.setSpan(
ForegroundColorSpan(Color.RED),
index1, index1 + SEG_1.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
背景色样式,可以用来设定文本的背景色;
spanBuilder.setSpan(
BackgroundColorSpan(Color.GRAY),
index2, index2 + SEG_2.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
下划线样式,给文本添加下划线;
spanBuilder.setSpan(
UnderlineSpan(), index3, index3 + SEG_3.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
应用指定的 MaskFilter 到文本,可以实现一些特殊的效果,如模糊(BlurMaskFilter)等
/**
* MaskFilterSpan(MaskFilter filter)设置滤镜Span,参数filter是MaskFilter类型:
* BlurMaskFilter是一个可以应用于Paint的一个滤镜。它可以将绘制的图形进行模糊处理,以达到一些特定的视觉效果。
* 1、radius : 模糊半径。数值越大,模糊的范围越广。
* 2、style是BlurMaskFilter.Blur枚举,表示模糊的类型,包括以下四种:
* a、NORMAL:普通模糊,应用于整个图像。
* b、SOLID:只绘制模糊的区域,其他区域为透明。
* c、OUTER:外部模糊,只在图像外部模糊。
* d、INNER:内部模糊,只在图像内部模糊。
*/
spanBuilder.setSpan(
//1、NORMAL:在原始边界内外都进行模糊处理。
MaskFilterSpan(BlurMaskFilter(20F, BlurMaskFilter.Blur.NORMAL)),
index4, index4 + SEG_4.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
spanBuilder.setSpan(
//2、SOLID:在原始边界内部填充实心颜色,在边界外进行模糊处理。
MaskFilterSpan(BlurMaskFilter(20F, BlurMaskFilter.Blur.SOLID)),
index5, index5 + SEG_5.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
spanBuilder.setSpan(
//3、OUTER:在边界内部不进行绘制,在边界外进行模糊处理。
MaskFilterSpan(BlurMaskFilter(2F, BlurMaskFilter.Blur.OUTER)),
index6, index6 + SEG_6.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
spanBuilder.setSpan(
//4、INNER:在边界内部进行模糊处理,在边界外不进行绘制。
MaskFilterSpan(BlurMaskFilter(20F, BlurMaskFilter.Blur.INNER)),
index7, index7 + SEG_7.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
MaskFilterSpan
删除线样式,给文本添加删除线效果;
spanBuilder.setSpan(
StrikethroughSpan(),
index8, index8 + SEG_8.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
设置点击事件,注意点击相关的必须设置textView.movementMethod = LinkMovementMethod.getInstance(),否则点击不生效
spanBuilder.setSpan(
CustomClickSpan {showToast("自定义ClickableSpan点击: $SEG_9") },
index9, index9 + SEG_9.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
//自定义ClickableSpan
class CustomClickSpan(private val click: (View) -> Unit) : ClickableSpan() {
override fun onClick(widget: View) {
click.invoke(widget)
}
/**
* 通过修改TextPaint来修改文本状态,如修改文本颜色、下划线是否展示等
* @param paint
*/
override fun updateDrawState(paint: TextPaint) {
paint.color = Color.BLUE
paint.isUnderlineText = false
}
}
通过自定义 ClickableSpan 并重写 updateDrawState() 修改 TextPaint ,从而去掉ClickableSpan 里默认的下划线。执行结果:
ClickableSpan
打开一个链接。
spanBuilder.setSpan(
URLSpan("https://www.baidu.com"),
index10, index10 + SEG_10.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
Metric affecting spans
整体示例效果:
度量Span
字体样式,如通过传入的 Typeface 设置正常、粗体、斜体、加粗并倾斜等样式;
//设置StyleSpan:加粗、斜体等,如Typeface.NORMAL、BOLD、ITALIC、BOLD_ITALIC
spanBuilder.setSpan(
StyleSpan(Typeface.BOLD_ITALIC),
index11, index11 + SEG_11.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
在这里插入图片描述
设置不同样式的文本字体
val customTypeface = Typeface.create(
ResourcesCompat.getFont(this, R.font.iconfont_guide),
Typeface.BOLD_ITALIC
)
/**
* TypefaceSpan构造函数有两个:
* 1、TypefaceSpan(String family)字体族,最终通过Typeface.create(family, style)创建Typeface
* 2、TypefaceSpan(Typeface typeface)直接传入Typeface
* 当通过TypefaceSpan(String family)创建时,以前的Typeface都会保留并与新创建的合并;而通过TypefaceSpan(Typeface typeface)创建的会直接覆盖之前的Typeface设置。
*/
spanBuilder.setSpan(
//TypefaceSpan(customTypeface), //API>=28以上才有
TypefaceSpan("serif"), //系统自带的有normal,sans,monospace,serif
index12, index12 + SEG_12.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
TypefaceSpan
图片样式,用于在文本中插入图片;
val imgDrawable =
ResourcesCompat.getDrawable(resources, R.drawable.icon_flower, null)
imgDrawable?.let {
it.setBounds(0, 0, 40.dp2px(), 40.dp2px())
spanBuilder.setSpan(
CenterImageSpan(it),
index13, index13 + 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
//自定义ImageSpan
class CenterImageSpan(drawable: Drawable, verticalAlignment: Int = ALIGN_CENTER) :
ImageSpan(drawable, verticalAlignment) {
private var mDrawableRef: WeakReference? = null
/**
* Returns the width of the span. Extending classes can set the height of the span by updating
* attributes of {@link android.graphics.Paint.FontMetricsInt}. If the span covers the whole
* text, and the height is not set,
* {@link #draw(Canvas, CharSequence, int, int, float, int, int, int, Paint)} will not be
* called for the span.
*
* @param paint Paint instance.
* @param text Current text.
* @param start Start character index for span.
* @param end End character index for span.
* @param fm Font metrics, can be null.
* @return Width of the span.
*/
override fun getSize(
paint: Paint,
text: CharSequence?,
start: Int,
end: Int,
fm: Paint.FontMetricsInt?,
): Int {
val d = getCachedDrawable()
val rect = d?.bounds
rect?.let {
if (fm != null) {
val fmInt = paint.fontMetricsInt
val imgHeight = d.bounds.height() //图片高度
val textHeight = fm.bottom - fm.top //文字行高度
val halfDiffer = (imgHeight - textHeight) / 2
if (imgHeight > textHeight && verticalAlignment == ALIGN_CENTER) {
fm.ascent = fmInt.ascent - halfDiffer
fm.descent = fmInt.descent + halfDiffer
fm.top = fmInt.top - halfDiffer
fm.bottom = fmInt.bottom + halfDiffer
} else {
fm.ascent = -rect.bottom
fm.descent = 0
fm.top = fm.ascent
fm.bottom = 0
}
}
return rect.right
}
return 0
}
private fun getCachedDrawable(): Drawable? {
val wr: WeakReference? = mDrawableRef
var d: Drawable? = null
if (wr != null) {
d = wr.get()
}
if (d == null) {
d = drawable
mDrawableRef = WeakReference(d)
}
return d
}
}
执行结果:
ImageSpan
注意,这里使用的是自定义ImageSpan,目的是不管图片的大小,图片都能够正常的和文字进行居中展示;而如果使用默认ImageSpan时,如果图片的高度大于文字本身,那么居中展示就会失效。
相对大小样式,相对于原始大小调整文本的大小;
//自定义RelativeSizeSpan
spanBuilder.setSpan(
RelativeSizeColorSpan(0.8f, Color.RED),
index14, index14 + SEG_14.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
/**
* 自定义Span
* @param size : 文本被缩放的比例
*/
class RelativeSizeColorSpan(size: Float, @ColorInt val color: Int = Color.GRAY) :
RelativeSizeSpan(size) {
/**
* 在绘制文本时更新样式的绘制状态,例如文本颜色、下划线等。
*/
override fun updateDrawState(paint: TextPaint) {
super.updateDrawState(paint)
paint.color = color
paint.isUnderlineText = true
}
}
这里不仅想改变大小,还想改变样式(文本颜色、下划线),所以直接通过简单的自定义RelativeSizeSpan,然后在复写的 updateDrawState() 里设置即可,执行结果(箭头方向):
RelativeSizeSpan
绝对大小样式,以指定的像素大小设置文本的大小;
spanBuilder.setSpan(
/**
* @param size 文本的绝对值大小,单位是像素px
* @param dip 如果为true,则size变以为dp为单位;否则还是以像素px为单位。
*/
AbsoluteSizeSpan(20, true),
index15, index15 + SEG_15.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果(箭头方向):
在这里插入图片描述
在水平方向上缩放文本;
spanBuilder.setSpan(
ScaleXSpan(2f),
index16, index16 + SEG_16.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
ScaleXSpan
将文本baseline的位置向下移动,用于显示下标文本;
//将文本baseline的位置向下移动
spanBuilder.setSpan(
SubscriptSpan(),
index17 + SEG_17.length / 2, index17 + SEG_17.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
SubscriptSpan
将文本baseline的位置向上移动,用于显示上标文本;
//将文本baseline的位置向上移动
spanBuilder.setSpan(
SuperscriptSpan(),
index18 + SEG_18.length / 2, index18 + SEG_18.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
SuperscriptSpan
设置文本字体、大小、样式和颜色等
spanBuilder.setSpan(
TextAppearanceSpan(this, R.style.textAppearanceSpan),
index19, index19 + SEG_19.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
//styles.xml
执行结果(箭头方向):
在这里插入图片描述
2.3 影响段落的Span
Paragraph affecting spans
段落缩进,即为文本添加指定的行首缩进;
spanBuilder.setSpan(
/**
* first: 每个段落的首行缩进
* mRest: 每个段落的其他行缩进
*/
LeadingMarginSpan.Standard(20.dp2px(), 5.dp2px()),
0, SPAN_STR.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
LeadingMarginSpan.Standard
可以看到每个段落的首行都所进行20dp的缩进,因为每个段落都只有一行,所以针对一个段落中mRest 其他行的缩进没有体现出来而已。
LineBackgroundSpan改变行的背景色,如果[start,end)不够一行按一行处理
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
spanBuilder.setSpan(
LineBackgroundSpan.Standard(Color.YELLOW),
0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
执行结果:
LineBackgroundSpan.Standard
改变段落的行高,可用于调整行与行之间的间距。注意,LineHeightSpan 改变的是整个段落的行高,即使它只覆盖段落的一部分。
//LineHeightSpan改变段落的行高
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
//注意,LineHeightSpan将改变整个段落的行高,即使它只覆盖段落的一部分。
spanBuilder.setSpan(
LineHeightSpan.Standard(20.dp2px()),
0, SPAN_STR2.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
}
执行结果:
LineHeightSpan
在文本的行首添加一个带有指定边距的 Drawable。
val imgDrawable = ResourcesCompat.getDrawable(resources, R.drawable.icon_arrow_pull, null)
spanBuilder.setSpan(
DrawableMarginSpan(imgDrawable!!, 10.sp2px()),
0, SPAN_STR.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
执行结果:
DrawableMarginSpan
IconMarginSpan与DrawableMarginSpan类似,在文本的行首添加一个带有指定边距的Bitmap。
val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon_arrow_pull), 10.sp2px()
spanBuilder.setSpan(
IconMarginSpan(bitmap),
0, SPAN_STR.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
IconMarginSpan
QuoteSpan 可以在文本开始的地方添加引用样式(一个垂直的线条)。
val quoteSpan = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
/**
* QuoteSpan(int color, int stripeWidth, int gapWidth)
* @param color 垂直线条颜色。缺省情况下,条带颜色为0xff0000ff
* @param stripeWidth 线条的宽度,以像素为单位。默认值是2px。
* @param gapWidth 线条和段落之间的距离,以像素为单位。默认值是2px。
*/
QuoteSpan(Color.RED, 20, 40)
} else {
QuoteSpan(Color.RED)
}
spanBuilder.setSpan(quoteSpan, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
执行结果:
QuoteSpan
给文本添加项目符号(圆点样式)
private fun getBulletSpan(): BulletSpan {
return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
/**
* BulletSpan(int gapWidth, int color, int bulletRadius)
* @param gapWidth: 项目符号和段落之间的距离,单位是px,默认2px
* @param color:项目符号颜色,默认是文本颜色
* @param bulletRadius:符号半径,单位是px,默认是4px
*/
BulletSpan(20, Color.RED, 10)
} else {
BulletSpan(20, Color.RED)
}
}
//第一行设置圆点
spanBuilder.setSpan(getBulletSpan(), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
val index23 = SPAN_STR.indexOf(SEG_23)
//最后一行设置圆点
spanBuilder.setSpan(getBulletSpan(),
index23, index23 + 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
执行结果:
BulletSpan
文本对齐方式,AlignmentSpan.Standard是其默认实现,其构造函数AlignmentSpan.Standard(Layout.Alignment align) 中的
align 是 Layout.Alignment枚举类型参数,包括三种情况:ALIGN_CENTER居中、 ALIGN_NORMAL正常、ALIGN_OPPOSITE相反方向。如:
spanBuilder.setSpan(
AlignmentSpan.Standard(Layout.Alignment.ALIGN_CENTER), 0, SPAN_STR.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
Alignment.ALIGN_CENTER
可以看到文本已经居中展示了。
段落中第一行的左侧偏移量(与 有关系),默认实现为TabStopSpan.Standard
val SPAN_STR2 = "锄禾日当午,
汗滴禾下土。
谁知盘中餐,
粒粒皆辛苦。"
val spanBuilder = SpannableStringBuilder(SPAN_STR2)
spanBuilder.setSpan(TabStopSpan.Standard(40.dp2px()),
0, SPAN_STR2.length, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
)
tvSpan.text = spanBuilder
执行结果:
TabStopSpan
页面更新:2024-05-16
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号