前言
最近项目中需要实现一个文章跟读效果的显示，还要能够点击文章中的单词能够弹出对话框显示单词的英美发音，那么如何实现这样的需求呢？当然是利用SpannableString啦，下面就结合项目中使用到的和参考其他博客的成果，整理一下常用的用法吧。
SpannableString其实很多方法和属性与String类似，只不过它比普通的字符串多了能够带有一些富文本属性，比如显示不同颜色、带下划线删除线等等。有心的读者一定想到了那是否有和StringBuilder对应的呢？答案是肯定的，那就是SpannableStringBuilder。显示富文本最重要的一个方法就是
setSpan(Object what, int start, int end, int flags)方法需要用户输入四个参数，what表示设置的格式是什么，可以是前景色、背景色也可以是可点击的文本等等，显示和交互的效果就由此决定；start表示需要设置格式的子字符串的起始下标（包括），同理end表示终了下标(不包括)，flags属性共四种：
Spanned.SPAN_INCLUSIVE_EXCLUSIVE 前面应用，后面不应用(即在文本前插入新的文本会应用该样式，而在文本后插入新文本不会应用该样式)
Spanned.SPAN_INCLUSIVE_INCLUSIVE 前面应用，后面也应用
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 前后都不应用
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 前面不应用，后面应用
常见用法
1.ForegroundColorSpan，为文本设置前景色，效果和setTextColor()类似
SpannableString spannableString = new SpannableString("前景色为蓝色");
spannableString.setSpan(new ForegroundColorSpan(Color.parseColor("#0000FF")), 0 , spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(spannableString);2.BackgroundColorSpan，为文本设置背景色，效果和TextView的setBackground()类似
new BackgroundColorSpan(Color.parseColor("#0000FF"))3.StrikethroughSpan，为文本设置中划线，也就是常说的删除线
new StrikethroughSpan()4.UnderlineSpan，为文本设置下划线，但线的大小和颜色能否设置呢？我没找到具体的方法，还请知道的小伙伴指点一二。
new UnderlineSpan() 5.SuperscriptSpan，设置上标，即类似数学公式中或标注的上标效果
new SuperscriptSpan()但这样直接设会使得上标的文字大小和正常文本大小一样，如果要使上标文字稍微小一点怎么办呢？这就需要下面即将讲到的 RelativeSizeSpan实现相对字体大小。
6.SubscriptSpan，设置下标，功能与设置上标类似
new SubscriptSpan()7.StyleSpan, 设置文字的显示风格（粗体、斜体），和TextView属性textStyle类似
new StyleSpan(Typeface.ITALIC) //设置斜体
new StyleSpan(Typeface.BOLD) //设置粗体 8.RelativeSizeSpan，设置文字相对大小，在TextView原有的文字大小的基础上，相对设置文字大小
new RelativeSizeSpan(1.2f) //相对正常大小的1.2倍9.ImageSpan，设置文本图片。没错，我们可以利用这个属性在一段文字中的任何位置插入图片，是不是想想都激动哈哈
SpannableString spannableString = new SpannableString("在文本中添加表情（表情）");
Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher);
ImageSpan imageSpan = new ImageSpan(drawable);
spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
tv_text4.setText(spannableString);10.ClickableSpan，设置可点击的文本，设置这个属性的文本可以相应用户点击事件，至于点击事件用户可以自定义。这样就可以实现一段文字中，设置某些特定的文字能够点击，就像一开始说到的点击弹出对话框那样的效果了。
SpannableString spannableString = new SpannableString("为文字设置点击事件");
MyClickableSpan clickableSpan = new MyClickableSpan("点击了");
spannableString.setSpan(clickableSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance()); //点击事件才能起效
textView.setHighlightColor(Color.parseColor("#36969696")); //点击背景色，默认淡蓝色
textView.setText(spannableString);class MyClickableSpan extends ClickableSpan {
private String content;
public MyClickableSpan(String content) {
this.content = content;
}
@Override
public void updateDrawState(TextPaint ds) { //设置显示样式
ds.setUnderlineText(false); //不要默认下划线
}
@Override
public void onClick(View widget) { //点击事件的响应方法
Toast.makeText(getApplicationContext(),"点击事件"+content, Toast.LENGTH_SHORT).show();
}
}11.URLSpan，设置超链接文本，能够调起系统自带的浏览器、邮件、电话等。其实ClickableSpan的也能实现超链接文本的效果，重写onClick点击事件就行，URLSpan内部就是这样实现的。
SpannableString ss5 = new SpannableString("超链接to百度");
ss5.setSpan( new URLSpan("http://www.baidu.com"), 0 ,ss5.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
tv_text5.setMovementMethod(LinkMovementMethod.getInstance());
tv_text5.setHighlightColor(Color.parseColor("#36969696"));
tv_text5.setText(ss5);clickableSpan和TextView的点击事件冲突
1.简化需求
我们需要实现这样的功能：一个TextView中，一部分文字设置了富文本显示，一部分还是普通的文字，点击设置了富文本的文字弹出相应对话框，二点击普通文字弹出另外相应的对话框。
2.问题
当点击富文本文字时，普通文本的点击事件也得到了相应。如下例子中，点击”富文本文字”时，先后弹出“点击富文本文字”和“点击普通文字”
SpannableString ss2 = new SpannableString("普通文字，富文本文字");
ss2.setSpan(new MaskFilterSpan(new MaskFilter()), 0 ,2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
ss2.setSpan(new RelativeSizeSpan(2.0f), 5,
10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
ss2.setSpan(new ClickableSpan() {
@Override
public void updateDrawState(TextPaint ds) {
//super.updateDrawState(ds);
ds.setUnderlineText(false);
}
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"点击富文本文字", Toast.LENGTH_SHORT).show();
}
}, 5, 9, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
tv_text2.setMovementMethod(MyTextView.CustomLinkMovementMethod.getInstance());
tv_text2.setHighlightColor(Color.TRANSPARENT); //背景色透明
tv_text2.setText(ss2);
tv_text2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"点击普通文字", Toast.LENGTH_SHORT).show();
}
});但我们实际上是要点击富文本文字时，不要弹出“点击普通文字”的响应事件的。那么这个问题如何解决呢？马上想到的当然是判断点击了富文本文字时拦截掉点击事件啦。这就需要我们自定义一个MyTextView继承TextView重写performClick()、onTouchEvent(MotionEvent event)还有在LinkMovementMethod的自定义子类中重写onTouchEvent(TextView widget, Spannable buffer,
MotionEvent event)
如下：
public class MyTextView extends TextView {
public MyTextView(Context context) {
super(context);
}
public MyTextView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MyTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public boolean linkHit;//内部富文本是否被点击
@Override
public boolean performClick() { //最后响应3
if (linkHit) {
return true; //这样textView的OnClick事件不会响应
}
return super.performClick(); //调用监听的onClick方法
}
@Override
public boolean onTouchEvent(MotionEvent event) { //textView的OnClick事件响应，首先响应1
linkHit = false;
return super.onTouchEvent(event);
}
public static class CustomLinkMovementMethod extends LinkMovementMethod { //次之2
static CustomLinkMovementMethod sInstance;
@Override
public boolean onTouchEvent(TextView widget, Spannable buffer,
MotionEvent event) {
int action = event.getAction();
if (action == MotionEvent.ACTION_UP ||
action == MotionEvent.ACTION_DOWN) {
int x = (int) event.getX();
int y = (int) event.getY();
x -= widget.getTotalPaddingLeft();
y -= widget.getTotalPaddingTop();
x += widget.getScrollX();
y += widget.getScrollY();
Layout layout = widget.getLayout();
int line = layout.getLineForVertical(y); //第几行
int off = layout.getOffsetForHorizontal(line, x); //水平偏移，第几个字
ClickableSpan[] link = buffer.getSpans(off, off, ClickableSpan.class);
if (link.length != 0) {
if (action == MotionEvent.ACTION_UP) {
link[0].onClick(widget); //ClickableSpan的onClick
} else if (action == MotionEvent.ACTION_DOWN) {
Selection.setSelection(buffer,
buffer.getSpanStart(link[0]),
buffer.getSpanEnd(link[0]));
}
if (widget instanceof MyTextView) {
((MyTextView) widget).linkHit = true; //点了标记的文字
}
return true;
} else {
Selection.removeSelection(buffer);
super.onTouchEvent(widget, buffer, event);
return false;
}
}
return Touch.onTouchEvent(widget, buffer, event);
}
public static CustomLinkMovementMethod getInstance() {
if (sInstance == null) {
sInstance = new CustomLinkMovementMethod();
}
return sInstance;
}
}
}
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
