【android】SpannableString详解及使用SpannableString设置复合文本

最新推荐文章于 2022-08-04 15:53:16 发布

长城Great

最新推荐文章于 2022-08-04 15:53:16 发布

阅读量4.6k

点赞数

分类专栏： android 文章标签： android

android 专栏收录该内容

262 篇文章 1 订阅

订阅专栏

在实际的应用开发过程中经常会遇到，在文本的不同部分显示一些不同的字体风格的信息如：文本的字体、大小、颜色、样式、以及超级链接等。一般情况下，TextView中的文本都是一个样式，对于类似的情况，可以借助SpannableString或SpannableStringBuilder对象来实现以上设置。

SpannableString与SpannableStringBuilder都可以将某段文本设置成一个Span，在Android中，Span表示一段文本的效果，例如，链接形式、图像、带背景的文本等。只是不同的是SpannableStringBuilder可以修改文本的内容。

磨刀不误砍柴工，接下来先让我们熟悉一下SpannableString类。

类结构：

extends Object
implements GetChars Spannable CharSequence

java.lang.Object
↳	android.text.SpannableString

类概述：

这类文本的内容是不变的，但标记对象可以被附加和分离。可变的文本,请参阅SpannableStringBuilder。

构造方法：

Public Constructors
	SpannableString(CharSequence source)

常用公有方法：

Public Methods
final char	charAt(int i) 返回指定索引位置的字符，第一个字符的索引为0。
boolean	equals(Object o) Compares this instance with the specified object and indicates if they are equal. 比较这个实例与指定的对象，如果相等则返回true。
final void	getChars(int start, int end, char[] dest, int off) 和String.getChars()方法相似：从指定字符数组中复制字符。start 开始位置，end结束位置，off偏移量。
int	getSpanEnd(Object what) 获取what对象在SpannableString对象中的结束位置。如果没有匹配返回-1。
int	getSpanStart(Object what) 获取what对象在SpannableString对象中的开始位置。如果没有匹配返回-1。
final int	length() 返回此序列中的字符数。
void	removeSpan(Object what) 从文本的范围中删除指定的对象。
void	setSpan(Object what, int start, int end, int flags) 设置一个Span对象。 what

说明：

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

设置一个Span对象。其中第一个参数what：表示一段文本的效果，它可以接受如下属性：

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

第二个和第三个参数分别表示文本中要设置成Span的某段文本的起始位置和终止位置的下一个字符的位置，也就是start和end。最后一个参数(flags)是一个标志。还可以设置如下几个类似的值:

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

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

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

---------------------------------------------------------------------------------------

使用SpannableString设置复合文本

TextView通常用来显示普通文本，但是有时候需要对其中某些文本进行样式、事件方面的设置。Android系统通过SpannableString类来对指定文本进行相关处理，具体有以下功能：

1、BackgroundColorSpan 背景色
 2、ClickableSpan 文本可点击，有点击事件
 3、ForegroundColorSpan 文本颜色（前景色）
4、MaskFilterSpan 修饰效果，如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)
5、MetricAffectingSpan 父类，一般不用
 6、RasterizerSpan 光栅效果
 7、StrikethroughSpan 删除线（中划线）
8、SuggestionSpan 相当于占位符
 9、UnderlineSpan 下划线
 10、AbsoluteSizeSpan 绝对大小（文本字体）
11、DynamicDrawableSpan 设置图片，基于文本基线或底部对齐。
12、ImageSpan 图片
 13、RelativeSizeSpan 相对大小（文本字体）
14、ReplacementSpan 父类，一般不用
 15、ScaleXSpan 基于x轴缩放
 16、StyleSpan 字体样式：粗体、斜体等
 17、SubscriptSpan 下标（数学公式会用到）
18、SuperscriptSpan 上标（数学公式会用到）
19、TextAppearanceSpan 文本外貌（包括字体、大小、样式和颜色）
20、TypefaceSpan 文本字体
 21、URLSpan 文本超链接

这么多文字，为了让你有看下去的勇气，下面来张效果图：

1、BackgroundColorSpan 背景色

 
 
       SpannableString spanText  
      =  
      new SpannableString 
      ( 
      "萝卜白菜的博客 -- http://orgcent.com" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new BackgroundColorSpan 
      ( 
      Color. 
      GREEN 
      ),  
      0, spanText. 
      length 
      ( 
      ), Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

2、ClickableSpan 文本可点击，有点击事件
查看：Android使用TextView实现无下划线超链接

3、ForegroundColorSpan 文本颜色（前景色）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "萝卜白菜的博客 -- http://orgcent.com" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new ForegroundColorSpan 
      ( 
      Color. 
      BLUE 
      ),  
      6, spanText. 
      length 
      ( 
      ), Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

4、MaskFilterSpan 修饰效果，如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "MaskFilterSpan -- http://orgcent.com" 
      ) 
      ; 
      
 
      int length  
      = spanText. 
      length 
      ( 
      ) 
      ; 
      
 
      //模糊(BlurMaskFilter) 
      
 MaskFilterSpan maskFilterSpan  
      =  
      new MaskFilterSpan 
      ( 
      new BlurMaskFilter 
      ( 
      3, Blur. 
      OUTER 
      ) 
      ) 
      ; 
      
 spanText. 
      setSpan 
      (maskFilterSpan,  
      0, length  
      -  
      10, Spannable. 
      
 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 
      //浮雕(EmbossMaskFilter) 
      
 maskFilterSpan  
      =  
      new MaskFilterSpan 
      ( 
      new EmbossMaskFilter 
      ( 
      new  
      float 
      [ 
      ] 
      { 
      1, 
      1, 
      3 
      }, 1.5f,  
      8,  
      3 
      ) 
      ) 
      ; 
      
 spanText. 
      setSpan 
      (maskFilterSpan, length  
      -  
      10, length, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:从上图看，浮雕效果不明显。把字体设置大点后可以看得清晰些。需要其他效果可以继承MaskFilter来自定义。

6、RasterizerSpan 光栅效果

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "StrikethroughSpan" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new StrikethroughSpan 
      ( 
      ),  
      0,  
      7, Spannable. 
      
 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:暂不清楚，效果不明显。

7、StrikethroughSpan 删除线（中划线）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "StrikethroughSpan" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new StrikethroughSpan 
      ( 
      ),  
      0,  
      7, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

8、SuggestionSpan
相当于占位符，一般用在EditText输入框中。当双击此文本时，会弹出提示框选择一些建议（推荐的）文字，选中的文本将替换此占位符。在输入法上用的较多。
PS：API 14新增，暂无示例。

9、UnderlineSpan 下划线

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "UnderlineSpan" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new UnderlineSpan 
      ( 
      ),  
      0, spanText. 
      length 
      ( 
      ), Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

10、AbsoluteSizeSpan 绝对大小（文本字体）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "AbsoluteSizeSpan" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new AbsoluteSizeSpan 
      ( 
      20,  
      true 
      ),  
      0, spanText. 
      length 
      ( 
      ), Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:把字体大小设置大点，效果硬朗。

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

 
 
       DynamicDrawableSpan drawableSpan  
      =  
      new DynamicDrawableSpan 
      (DynamicDrawableSpan. 
      ALIGN_BASELINE 
      )  
      { 
      
     @Override 
      
      
      public Drawable getDrawable 
      ( 
      )  
      { 
      
         Drawable d  
      = getResources 
      ( 
      ). 
      getDrawable 
      (R. 
      drawable. 
      ic_launcher 
      ) 
      ; 
      
         d. 
      setBounds 
      ( 
      0,  
      0,  
      50,  
      50 
      ) 
      ; 
      
          
      return d 
      ; 
      
      
      } 
      
 
      } 
      ; 
      
 DynamicDrawableSpan drawableSpan2  
      =  
      new DynamicDrawableSpan 
      (DynamicDrawableSpan. 
      ALIGN_BOTTOM 
      )  
      { 
      
     @Override 
      
      
      public Drawable getDrawable 
      ( 
      )  
      { 
      
           Drawable d  
      = getResources 
      ( 
      ). 
      getDrawable 
      (R. 
      drawable. 
      ic_launcher 
      ) 
      ; 
      
           d. 
      setBounds 
      ( 
      0,  
      0,  
      50,  
      50 
      ) 
      ; 
      
                  
      return d 
      ; 
      
              
      } 
      
          
      } 
      ; 
      
 spanText. 
      setSpan 
      (drawableSpan,  
      3,  
      4, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 spanText. 
      setSpan 
      (drawableSpan2,  
      7,  
      8, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:左边图片基于基线对齐，右边图片基于底部对齐

12、ImageSpan 图片

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "ImageSpan" 
      ) 
      ; 
      
 Drawable d  
      = getResources 
      ( 
      ). 
      getDrawable 
      (R. 
      drawable. 
      ic_launcher 
      ) 
      ; 
      
 
      </strong 
      >d. 
      setBounds 
      ( 
      0,  
      0,  
      50,  
      50 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new ImageSpan 
      (d 
      ),  
      3,  
      4, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:和DynamicDrawableSpan差别不大

13、RelativeSizeSpan 相对大小（文本字体）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "RelativeSizeSpan" 
      ) 
      ; 
      
 
      //参数proportion:比例大小 
      
 spanText. 
      setSpan 
      ( 
      new RelativeSizeSpan 
      (2.5f 
      ),  
      3,  
      4, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:相对大小的比例是基于当前文本字体大小

15、ScaleXSpan 基于x轴缩放

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "ScaleXSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 
      //参数proportion:比例大小 
      
 spanText. 
      setSpan 
      ( 
      new ScaleXSpan 
      (3.8f 
      ),  
      3,  
      7, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

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

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "StyleSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 
      //Typeface.BOLD_ITALIC:粗体+斜体 
      
 spanText. 
      setSpan 
      ( 
      new StyleSpan 
      (Typeface. 
      BOLD_ITALIC 
      ),  
      3,  
      7, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

17、SubscriptSpan 下标（数学公式会用到）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "SubscriptSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new SubscriptSpan 
      ( 
      ),  
      6,  
      7, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

18、SuperscriptSpan 上标（数学公式会用到）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "SuperscriptSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new SuperscriptSpan 
      ( 
      ),  
      6,  
      7, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

19、TextAppearanceSpan 文本外貌（包括字体、大小、样式和颜色）

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "TextAppearanceSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 
      //若需自定义TextAppearance，可以在系统样式上进行修改 
      
 spanText. 
      setSpan 
      ( 
      new TextAppearanceSpan 
      ( 
      this, android. 
      R. 
      style. 
      TextAppearance_Medium 
      ),  
      6,  
      7, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:系统还提供了相关值TextAppearance_Small, TextAppearance_Large等。如有需要可在以上样式基础上修改。

20、TypefaceSpan 文本字体

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "TypefaceSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 
      //若需使用自定义字体，可能要重写类TypefaceSpan 
      
 spanText. 
      setSpan 
      ( 
      new TypefaceSpan 
      ( 
      "monospace" 
      ),  
      3,  
      10, Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
     
 

PS:关于自定义字体的设置，后面将介绍如何使用

21、URLSpan 文本超链接

 
 
       spanText  
      =  
      new SpannableString 
      ( 
      "URLSpan -- 萝卜白菜的博客" 
      ) 
      ; 
      
 spanText. 
      setSpan 
      ( 
      new URLSpan 
      ( 
      "http://orgcent.com" 
      ),  
      10, spanText. 
      length 
      ( 
      ), Spannable. 
      SPAN_INCLUSIVE_EXCLUSIVE 
      ) 
      ; 
      
 mTVText. 
      append 
      ( 
      "\n" 
      ) 
      ; 
      
 mTVText. 
      append 
      (spanText 
      ) 
      ; 
      
 
      //让URLSpan可以点击 
      
 mTVText. 
      setMovementMethod 
      ( 
      new LinkMovementMethod 
      ( 
      ) 
      ) 
      ; 
     
 

PS：
1、LinkMovementMethod是继承了ScrollingMovementMethod类，这个类用来实现TextView在没有使用标签也可以实现滚动效果。具体查看：android实现TextView垂直或水平滚动
2、若想实现无下划线的超链接，查看Android使用TextView实现无下划线超链接

转自：http://blog.csdn.net/fengyuzhengfan/article/details/38459299

http://orgcent.com/android-textview-spannablestring-span/ | 萝卜白菜的博客