Android富文本的使用 android 富文本显示

转载

mob64ca13f8b166 2023-11-22 15:00:14

文章标签 Android富文本的使用 android如何展示富文本 ico 基线字符串 文章分类 Android 移动开发

效果图

rich.jpg

像图中的效果，大家在开发并不少见，大家可能不知道android提供了实现图文混排的类。大家或许会写一个布局或者使用drawableLeft这个属性实现文本的左侧图标。

android提供了这两个类SpannableString和SpannableStringBuilder实现图文混排

SpannableString其实和String一样，都是一种字符串类型，SpannableString可以直接作为TextView的显示文本，不同的是SpannableString可以通过使用其方法setSpan方法实现字符串各种形式风格的显示,重要的是可以指定设置的区间，也就是为字符串指定下标区间内的子字符串设置格式。

SpannableStringBuilder应该开发的小伙伴知道StringBuilder，可以使用append()方法实现字符串拼接，非常方便。同样，SpannableString中也有SpannableStringBuilder，顾名思义，就是实现对，SpannableString的一个拼接效果，同样是append()方法，可以实现各种风格效果的SpannableString拼接，非常实用。

SpannableStringBuilder和SpannableString主要通过使用setSpan(Object what, int start, int end, int flags)改变文本样式。对应的参数：

start：指定Span的开始位置

end：指定Span的结束位置，并不包括这个位置。

flags：取值有如下四个

Spannable.SPAN_EXCLUSIVE_INCLUSIVE：在 Span前面输入的字符不应用 Span的效果，在后面输入的字符应用Span效果。

Spannable.SPAN_INCLUSIVE_EXCLUSIVE：在 Span前面输入的字符应用 Span 的效果，在后面输入的字符不应用Span效果。

Spannable.SPAN_INCUJSIVE_INCLUSIVE：在 Span前后输入的字符都应用 Span 的效果。

Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前后都不包括。

what：对应的各种Span，不同的Span对应不同的样式。已知的可用类有：

BackgroundColorSpan : 文本背景色

ForegroundColorSpan : 文本颜色

MaskFilterSpan : 修饰效果，如模糊(BlurMaskFilter)浮雕

RasterizerSpan : 光栅效果

StrikethroughSpan : 删除线

SuggestionSpan : 相当于占位符

UnderlineSpan : 下划线

AbsoluteSizeSpan : 文本字体(绝对大小)

DynamicDrawableSpan : 设置图片，基于文本基线或底部对齐。

ImageSpan : 图片

RelativeSizeSpan : 相对大小(文本字体)

ScaleXSpan : 基于x轴缩放

StyleSpan : 字体样式：粗体、斜体等

SubscriptSpan : 下标(数学公式会用到)

SuperscriptSpan : 上标(数学公式会用到)

TextAppearanceSpan : 文本外貌(包括字体、大小、样式和颜色)

TypefaceSpan : 文本字体

URLSpan : 文本超链接

ClickableSpan : 点击事件

解释了这么多，看代码怎么实现吧，其实很简单！

第一行文字的效果代码

String text = "[icon] " + charSequence;
SpannableString spannable = new SpannableString(text);
Drawable drawable = this.getResources().getDrawable(R.mipmap.umeng_socialize_qq);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
//第一个参数drawable 第二个参数对齐方式
ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mIconSpan.setText(spannable);

第二行文字的效果代码

String text = "[icon] ";
SpannableStringBuilder spannable = new SpannableStringBuilder(text);
Drawable drawable1 = this.getResources().getDrawable(R.mipmap.umeng_socialize_qq);
drawable1.setBounds(0, 0, drawable1.getIntrinsicWidth(), drawable1.getIntrinsicHeight());
ImageSpan imageSpan1 = new ImageSpan(drawable1, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan1, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
//追加一个icon
spannable.append("[icon] " + charSequence);
Drawable drawable2this.getResources().getDrawable(R.mipmap.umeng_socialize_wechat);
drawable2.setBounds(0, 0, drawable2.getIntrinsicWidth(), drawable1.getIntrinsicHeight());
ImageSpan imageSpan2 = new ImageSpan(drawable2, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan2, 7, 13, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mMultiIconSpan.setText(spannable);

小编写到这里的时候，看下了运行的结果，发现图片怎么不居中呀，真正开发中，这种效果是不可取的。百度了下一下主要看这样一行代码客mageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE); ImageSpan.ALIGN_BASELINE是指以文字的基线对齐

/**
* A constant indicating that the bottom of this span should be aligned
* with the bottom of the surrounding text, i.e., at the same level as the
* lowest descender in the text.
*/
public static final int ALIGN_BOTTOM = 0;
/**
* A constant indicating that the bottom of this span should be aligned
* with the baseline of the surrounding text.
*/
public static final int ALIGN_BASELINE = 1;

点击进去看下源码的解释，原来ALIGN_BOTTOM是以文字的底部对齐，ALIGN_BASELINE是以文字的基线对齐，看到这里也知道图片为什么不居中了。

**如果要实现图片居中，怎么办？我们把图片在Y轴的方向往下移动一段距离，自定义一个CenterAlignImageSpan继承ImageSpan **

public class CenterAlignImageSpan extends ImageSpan {
public CenterAlignImageSpan(Drawable d) {
super(d);
}
public CenterAlignImageSpan(Drawable d, int verticalAlignment) {
super(d, verticalAlignment);
}
@Override
public void draw(@NonNull Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom,
@NonNull Paint paint) {
Drawable drawable = getDrawable();
Paint.FontMetricsInt fm = paint.getFontMetricsInt();
//计算y方向的位移
int translationY = (y + fm.descent + y + fm.ascent) / 2 - drawable.getBounds().bottom / 2;
canvas.save();
//绘制图片位移一段距离
canvas.translate(x, translationY);
drawable.draw(canvas);
canvas.restore();
}
}

主要的原理是把图片绘制在字体的descent线和ascent的中点位置。还是那句话，先看上面的两篇博客。

第三行文字的效果代码

String text = "[icon] " + charSequence;
SpannableString spannable = new SpannableString(text);
Drawable drawable = this.getResources().getDrawable(R.mipmap.umeng_socialize_qzone);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
//图片居中
CenterAlignImageSpan imageSpan = new CenterAlignImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
spannable.setSpan(imageSpan, 0, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mVerticalCenterIcon.setText(spannable);

有时候在开发中需要给一些的特殊的文字，设置一些超链接，颜色，背景色等等。

第四行文字的效果代码

SpannableString spannableString = new SpannableString(charSequence);
//URLSpan
URLSpan urlSpan = new URLSpan("https://www.jianshu.com/u/9006081639f4");
spannableString.setSpan(urlSpan, 4, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mUrlSpan.setMovementMethod(LinkMovementMethod.getInstance());
mUrlSpan.setHighlightColor(ContextCompat.getColor(this, R.color.colorAccent));
mUrlSpan.setText(spannableString);

第五行文字的效果代码

SpannableString spannableString = new SpannableString(charSequence);
//ForegroundColorSpan
ForegroundColorSpan colorSpan = new ForegroundColorSpan(ContextCompat.getColor(this, R.color.colorPrimaryDark));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mForegroundColorSpan.setText(spannableString);

写了这么几个例子，相信大家对图片混排很清楚了，至于一些其它的文字的特性效果，需要大家去扩展了，比如文字的模糊、字体的样式、图片在文字的中间或者右边等等。

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。