SpannableString 和 SpannableStringBuilder的使用

最新推荐文章于 2022-12-27 16:05:23 发布

M-Ellen

最新推荐文章于 2022-12-27 16:05:23 发布

阅读量1.3k

点赞数

分类专栏： android 文章标签： SpannableString SpannableStringBuilder 评论

本文链接：https://blog.csdn.net/pzm1993/article/details/83115793

版权

android 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

介绍

谷歌API这样描述 SpannableString 与 SpannableStringBuilder：

This is the class for text whose content and markup can both be changed.
（这是一个内容和标记都可以更改的文本类）

1.SpannableString与SpannableStringBuilder介绍

SpannableStringBuilder，SpannableString其实和String一样，都是用来存储字符串，并且多继承自 CharSequence，所以最终多可以通过 setText(CharSequence text)方法，将字符设置给TextView。

作用：

将原有的 String 字符串，通过使用其方法setSpan( )方法实现字符串各种形式风格的显示。比如在 加下划线、加背景色、改变字体颜色、用图片把指定的文字给替换掉…，这也是与 String 不同的地方。

区别：

SpannableString 与 SpannableStringBuilder区别，相信大家首先会想到String 与 StringBuilder的区别。其实类似的，如果传入一个字符串，前者必须一次传入，但后者可以通过append()方法动态拼接多个SpannableString 。（后面例子会展示）

本文主要通过一个TextView，实现如下功能，并实现局部点击。

使用

官方API 点这里 SpannableStringBuilder
更详细的API使用，可以自行到官方API查看，使用比较简单。这里，主要介绍setSpan( ) 的使用，也是最重要的。

setSpan(Object what, int start, int end, int flags)

在指定的文本范围内，使用指定的 What 类型

参数：
start，end：字符的起始位置，和结束位置，形式是 : [ start , end )
what：是一个CharacterStyle对象，一般常用的有以下几种：

参数 what	说明
ForegroundColorSpan	文本颜色
BackgroundColorSpan	文本背景色
ClickableSpan	点击事件
MaskFilterSpan	修饰效果，如模糊(BlurMaskFilter)浮雕
RasterizerSpan	光栅效果
StrikethroughSpan	删除线
SuggestionSpan	相当于占位符
UnderlineSpan	下划线
AbsoluteSizeSpan	文本字体（绝对大小）
DynamicDrawableSpan	设置图片，基于文本基线或底部对齐。
ImageSpan	图片
RelativeSizeSpan	相对大小（文本字体）
ScaleXSpan	基于x轴缩放
StyleSpan	字体样式：粗体、斜体等
SubscriptSpan	下标（数学公式会用到）
SuperscriptSpan	上标（数学公式会用到）
TextAppearanceSpan	文本外貌（包括字体、大小、样式和颜色）
TypefaceSpan	文本字体
URLSpan	文本超链接

flags：作用域标识

参数 flags	说明
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE	前后都不包括（在标志位 [start，end）前后添加文字，新添加的文字不会有任何设置的属性）
Spannable.SPAN_EXCLUSIVE_INCLUSIVE	前面不包括，后面包括。（在标志位 [start，end）前添加文字，新添加的文字不会有任何设置的属性，后边的添加的文字会带有设置的what属性）
Spannable.SPAN_INCLUSIVE_EXCLUSIVE	前面包括，后面不包括。（在标志位 [start，end）后添加文字，新添加的文字不会有任何设置的属性，前边边的添加的文字会带有设置的what属性）
Spannable.SPAN_INCLUSIVE_INCLUSIVE	前后都包括。前后都不包括（在标志位 [start，end）前后添加文字，新添加的文字会有设置的属性）

知道这些参数之后，接下来就简单了，大家可以逐一测试下。
下面，围绕效果图，开始实现。

1.添加字体颜色

一般在评论中，需要将用户名的文字使用不同颜色，如下：


		SpannableString spannableString;
		mSpannableStringBuilder = new SpannableStringBuilder();
        spannableString = new SpannableString("小哥哥");
        spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary)),0, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mSpannableStringBuilder.append(spannableString);

        mSpannableStringBuilder.append("回复");

        spannableString = new SpannableString("小姐姐 : ");
        spannableString.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary)),0, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mSpannableStringBuilder.append(spannableString);

        mSpannableStringBuilder.append("在我心中，你最美~");
        mContentTv.setText(mSpannableStringBuilder);

2. 添加点击事件

首先，添加点击事件，关联东西会稍微复杂一点，这里一步一步介绍。

在评论的中，点击用户名或者回复的信息，应该做不同的处理。首先，给用户名添加点击事件。


		final SpannableString spannableString;
        mSpannableStringBuilder = new SpannableStringBuilder();
        spannableString = new SpannableString("小哥哥");
        /**
         * 添加监听事件
         */
        spannableString.setSpan(new ClickableSpan() {
            @Override
            public void onClick(View widget) {
                Toast.makeText(getApplicationContext(), spannableString.toString(),Toast.LENGTH_SHORT).show();
            }
        },0, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE );
        mSpannableStringBuilder.append(spannableString);

        mSpannableStringBuilder.append("回复");


        final SpannableString spannableString1;
        spannableString1 = new SpannableString("小姐姐: ");
        /**
         *  添加监听事件
         */
        spannableString1.setSpan(new ClickableSpan() {
            @Override
            public void onClick(View widget) {
                Toast.makeText(getApplicationContext(), spannableString1.toString(),Toast.LENGTH_SHORT).show();
            }
        },0, spannableString1.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE );
        mSpannableStringBuilder.append(spannableString1);

        mSpannableStringBuilder.append("在我心中，你最美~");
        mContentTv.setText(mSpannableStringBuilder);

然后，运行代码之后，发现不能点击。因为，还需要添加这一行，其作用就是链接响应，简单来说在xml设置：android:autoLink 是一样的。

mContentTv.setMovementMethod(LinkMovementMethod.getInstance());

运行之后就可以了，点击：

这里有 4个问题 需要解决：

字体默认有颜色；
字体默认有下划线
点击之后，字体背影一直不消失
点击span部分响应时，同时，整个textView的onClick也响应

1、2 问题解决：

方法可能会有多种，比如添加点击事件之后，再改变字体颜色。这里说下正常简单的操作是：自定义 ClickableSpan


	public abstract class SpannableClickable extends ClickableSpan implements View.OnClickListener {
		/**
		 * text颜色
		 */
		private int textColor;
		public SpannableClickable(Context context) {
			this.textColor = context.getResources().getColor(R.color.colorPrimary);
		}
		public SpannableClickable(int textColor) {
			this.textColor = textColor;
		}
		
		/**
		 * 重写该方法
		 * 1.设置字体颜色，在构造函数可以自定义 传入
		 * 2.取消下划线
		 * 3.清除背景图层
		 */
		@Override
		public void updateDrawState(TextPaint ds) {
			super.updateDrawState(ds);
			ds.setColor(textColor);
			ds.setUnderlineText(false);
	//		ds.bgColor = bgColor;
			ds.clearShadowLayer();
		}
	}

然后设置这个自定义的监听即可：

	spannableString.setSpan(new SpannableClickable(getApplicationContext()) {
	            @Override
	            public void onClick(View widget) {
	                Toast.makeText(getApplicationContext(), spannableString.toString(),Toast.LENGTH_SHORT).show();
	            }
	        },0, spannableString.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

3 ，4 问题解决： ：自定义 MovementMethod

首先说下2点需求：

1.改变监听，一般需求是：点击span部分的时候，整体textView不再响应。
2.改变背景，一般需求是，点击的时候，显示背景色，按键起来的时候，恢复原来的背景（透明）。

改变监听，这个会比较好处理，重新修改textView 的onTouch方法就可以。
但是，再修改的过程，发现在该方法中对span文本的背景色设置没有效果，所以放弃这种。

最后，使用自定义的 MovementMethod，如下：

	public class MovementMethod extends BaseMovementMethod {
		public final String			TAG			= MovementMethod.class.getSimpleName();
		/**
		 * 整个textView的背景色
		 */
		private int					textViewBgColor;
		/**
		 * 点击部分文字时部分文字的背景色
		 */
		private int					clickableSpanBgClor;
		private BackgroundColorSpan	mBgSpan;
		private ClickableSpan[]		mClickLinks;
		/**
		 * true：响应textview的点击事件， false：响应设置的clickableSpan事件
		 */
		private boolean				isPassToTv	= true;
		public boolean isPassToTv() {
			return isPassToTv;
		}
		private void setPassToTv(boolean isPassToTv) {
			this.isPassToTv = isPassToTv;
		}
		
		/**
		 * @param clickableSpanBgClor   点击选中部分时的背景色
		 * @param textViewBgColor       整个textView点击时的背景色
		 */
		public MovementMethod(int clickableSpanBgClor, int textViewBgColor) {
			this.textViewBgColor = textViewBgColor;
			this.clickableSpanBgClor = clickableSpanBgClor;
		}
		
		@Override
		public boolean onTouchEvent(TextView widget, Spannable buffer, MotionEvent event) {
	
			/**
			 * 这些代码 直接从LinkMovementMethod 拿过来就可以了
			 */
			int action = event.getAction();
			if (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);
				
				mClickLinks = buffer.getSpans(off, off, ClickableSpan.class);
				if (mClickLinks.length > 0) {
					// 点击的是Span区域，不要把点击事件传递
					setPassToTv(false);
					Selection.setSelection(buffer, buffer.getSpanStart(mClickLinks[0]), buffer.getSpanEnd(mClickLinks[0]));
					// 设置点击区域的背景色
					mBgSpan = new BackgroundColorSpan(clickableSpanBgClor);
					buffer.setSpan(mBgSpan, buffer.getSpanStart(mClickLinks[0]), buffer.getSpanEnd(mClickLinks[0]), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
				} else {
					setPassToTv(true);
					// textview选中效果
					widget.setBackgroundColor(textViewBgColor);
				}
				
			} else if (action == MotionEvent.ACTION_UP) {
				if (mClickLinks.length > 0) {
					mClickLinks[0].onClick(widget);
					if (mBgSpan != null) {// 移除点击时设置的背景span
						buffer.removeSpan(mBgSpan);
					}
				} else {
					
				}
				Selection.removeSelection(buffer);
				widget.setBackgroundResource(R.color.transparent);
			} else if (action == MotionEvent.ACTION_MOVE) {
				// 这种情况不用做处理
			} else {
				if (mBgSpan != null) {// 移除点击时设置的背景span
					buffer.removeSpan(mBgSpan);
				}
				widget.setBackgroundResource(R.color.transparent);
			}
			return super.onTouchEvent(widget, buffer, event);
		}
	}

最后：

	mContentTv.setMovementMethod(new MovementMethod(getResources().getColor(R.color.gray), getResources().getColor(R.color.gray)));

最后，问题多解决了，哈哈哈。。。。

问题1.每个CharacterStyle对象只能应用于一个Spanned

这说的CharacterStyle对象，就是前面说的What对象。
在使用的时候，可能会有这种情况：一个CharacterStyle对象被使用多次，如下：

        String content = "小姐姐回复小哥哥：在我心中，你最帅~";
        mSpannableStringBuilder = new SpannableStringBuilder(content);
        ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary));
        mSpannableStringBuilder.setSpan(foregroundColorSpan,0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mSpannableStringBuilder.setSpan(foregroundColorSpan,5, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

本来是想2个用户名，多想改变成蓝色，但最终结果是：

只有最后一次使用的时候才有效果。如何解决，这里提供2种：
1.那就是再重新 new CharacterStyle对象；（废话！！！）
2.使用CharacterStyle类的静态方法wrap方法：

官方这样说：

public static CharacterStyle wrap (CharacterStyle cs)

A given CharacterStyle can only applied to a single region of a given Spanned. If you need to attach the same CharacterStyle to multiple regions, you can use this method to wrap it with a new object that will have the same effect but be a distinct object so that it can also be attached without conflict.
给定的字符样式只能应用于给定跨距的单个区域。如果需要将相同的CharacterStyle附加到多个区域，可以使用此方法用一个新对象对其进行包装，该对象具有相同的效果，但是是不同的对象，因此也可以不冲突地附加它。

        String content = "小姐姐回复小哥哥：在我心中，你最帅~";
        mSpannableStringBuilder = new SpannableStringBuilder(content);
        ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary));
        mSpannableStringBuilder.setSpan(CharacterStyle.wrap(foregroundColorSpan),0, 3, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mSpannableStringBuilder.setSpan(CharacterStyle.wrap(foregroundColorSpan),5, 8, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        mContent1Tv.setText(mSpannableStringBuilder);

总结

SpannableStringBuilder 可以说是对TextView高级的用法，平时没怎么用，也不知道有这功能。目前项目有评论，于是就了解一下。
后面会写一个项目的实际用法，希望可以尽量完成。

如果议论，欢迎指出，谢谢！看完，麻烦点个赞呀！

欢迎点赞

参考：

https://developer.android.google.cn/reference/android/text/SpannableString

https://blog.csdn.net/baidu_31956557/article/details/78339071

M-Ellen

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SpannableString 和 SpannableStringBuilder的使用

介绍This is the class for text whose content and markup can both be changed.（这是一个内容和标记都可以更改的文本类）1.SpannableString与SpannableStringBuilder介绍SpannableStringBuilder，SpannableString其实和String一样，都是一种字符串类型。...
复制链接

扫一扫