给TextView加上多彩效果：改变部分字体的大小和颜色

迈不过友情╰ 2024-02-17 18:16 84阅读 0赞

#### 前言 ####

在实际使用中，有时候会遇到特殊需求，比如pm突发奇想，想把TextView的某几个字变的大一点，再加点颜色，这貌似不好搞，如果是给TextView整体加效果就很好搞了。但是问题总是要解决，下面我给出解决方法，其实方法很简单，问题在于你是否知道有这种方法。

#### 方法： ####

**1、 字体颜色可以采用font，也可以使用ColorSpan**

**2、 字体大小可以使用<big>、<small>和 <h1>到<h6>的标签，还可以采用SizeSpan**

**3、 Spannable功能比较全面，调用setSpan即可为TextView设置美丽的特效，其支持的特效在CharacterStyle中定义，有好多种，比如AbsoluteSizeSpan、ForegroundColorSpan以及BackgroundColorSpan等，具体大家可以根据需要查看，下面是CharacterStyle的类继承关系图：**

public abstract class

## CharacterStyle ##

extends [Object][]

<table style="font-size:13px; margin:0px; border-collapse:collapse; border-spacing:0px; border:0px; width:1154px; padding:0px; background-color:transparent"> 
 <tbody> 
  <tr> 
   <td colspan="2" style="padding:0px; vertical-align:top; border:none; margin:0px; background-color:transparent"> <a href="http://developer.android.com/reference/java/lang/Object.html" style="color:rgb(37,138,175); text-decoration:none; margin-bottom:0px" rel="nofollow">java.lang.Object</a></td> 
  </tr> 
  <tr> 
   <td style="padding:0px; vertical-align:top; border:none; margin:0px; font-weight:bold; width:1em; background-color:transparent"> &nbsp;&nbsp;&nbsp;↳</td> 
   <td colspan="1" style="padding:0px; vertical-align:top; border:none; margin:0px; background-color:transparent"> android.text.style.CharacterStyle</td> 
  </tr> 
 </tbody> 
</table>

<table style="font-size:13px; margin:1em 0px 0px; border-collapse:collapse; border-spacing:0px; border:0px; width:968px; max-width:968px; background-color:transparent"> 
 <tbody> 
  <tr> 
   <td colspan="12" style="padding:0px; vertical-align:top; border:none; margin:0px; background-color:inherit"> <a href="http://developer.android.com/reference/android/text/style/CharacterStyle.html#" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow"><img src="http://developer.android.com/assets/images/triangle-closed.png" alt="" style="border:0px; max-width:100%; vertical-align:middle; margin:0px; padding:0px 4px 4px 0px"></a>Known Direct Subclasses 
    <div style="margin:0px 0px 0px 13px"> 
     <div> 
      <a href="http://developer.android.com/reference/android/text/style/BackgroundColorSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">BackgroundColorSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/ClickableSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">ClickableSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/ForegroundColorSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">ForegroundColorSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/MaskFilterSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">MaskFilterSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/MetricAffectingSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">MetricAffectingSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/RasterizerSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">RasterizerSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/StrikethroughSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">StrikethroughSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/SuggestionSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">SuggestionSpan</a>, 
      <a href="http://developer.android.com/reference/android/text/style/UnderlineSpan.html" style="color:rgb(37,138,175); text-decoration:none; margin-bottom:0px" rel="nofollow">UnderlineSpan</a> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

<table style="font-size:13px; margin:1em 0px 0px; border-collapse:collapse; border-spacing:0px; border:0px; width:968px; max-width:968px; background-color:transparent"> 
 <tbody> 
  <tr> 
   <td colspan="12" style="padding:0px; vertical-align:top; border:none; margin:0px; background-color:inherit"> <a href="http://developer.android.com/reference/android/text/style/CharacterStyle.html#" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow"><img src="http://developer.android.com/assets/images/triangle-closed.png" alt="" style="border:0px; max-width:100%; vertical-align:middle; margin:0px; padding:0px 4px 4px 0px"></a>Known Indirect Subclasses 
    <div style="margin:0px 0px 0px 13px"> 
     <div> 
      <a href="http://developer.android.com/reference/android/text/style/AbsoluteSizeSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">AbsoluteSizeSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/DynamicDrawableSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">DynamicDrawableSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/ImageSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">ImageSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/LocaleSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">LocaleSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/RelativeSizeSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">RelativeSizeSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/ReplacementSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">ReplacementSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/ScaleXSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">ScaleXSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/StyleSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">StyleSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/SubscriptSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">SubscriptSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/SuperscriptSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">SuperscriptSpan</a>, 
      <a href="http://developer.android.com/reference/android/text/style/TextAppearanceSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">TextAppearanceSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/TypefaceSpan.html" style="color:rgb(37,138,175); text-decoration:none" rel="nofollow">TypefaceSpan</a>,&nbsp; 
      <a href="http://developer.android.com/reference/android/text/style/URLSpan.html" style="color:rgb(37,138,175); text-decoration:none; margin-bottom:0px" rel="nofollow">URLSpan</a> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

#### 效果图 ####

![SouthEast][]

#### 上面效果的代码 ####

**\[java\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  TextView textView1 = (TextView) findViewById(R.id.textView1); 
2.  TextView textView2 = (TextView) findViewById(R.id.textView2); 
3.  TextView textView3 = (TextView) findViewById(R.id.textView3); 
4.  TextView textView4 = (TextView) findViewById(R.id.textView4); 
5.  
6.  //两次加大字体，设置字体为红色（big会加大字号，font可以定义颜色）
7.  textView1.setText(Html.fromHtml("北京市发布霾黄色预警，<font color='\#ff0000'><big><big>外出携带好</big></big></font>口罩")); 
8.  
9.  //设置字体大小为3级标题，设置字体为红色
10. textView2.setText(Html.fromHtml("北京市发布霾黄色预警，<h3><font color='\#ff0000'>外出携带好</font></h3>口罩")); 
11. 
12. //设置字体大小为58（单位为物理像素），设置字体为红色，字体背景为黄色
13. textView3.setText("北京市发布霾黄色预警，外出携带好口罩"); 
14. Spannable span = **new** SpannableString(textView3.getText()); 
15. span.setSpan(**new** AbsoluteSizeSpan(58), 11, 16, Spannable.SPAN\_EXCLUSIVE\_EXCLUSIVE); 
16. span.setSpan(**new** ForegroundColorSpan(Color.RED), 11, 16, Spannable.SPAN\_EXCLUSIVE\_EXCLUSIVE); 
17. span.setSpan(**new** BackgroundColorSpan(Color.YELLOW), 11, 16, Spannable.SPAN\_EXCLUSIVE\_EXCLUSIVE); 
18. textView3.setText(span); 
19. 
20. //两次缩小字体，设置字体为红色（small可以减小字号）
21. textView4.setText(Html.fromHtml("北京市发布霾黄色预警，<font color='\#ff0000'><small><small>外出携带好</small></small></font>口罩"));

说明：上述代码分别用不同方式实现了类似的效果，通过对比，我们应该可以理解各种方法的不同，想写出更多效果Spannable是必须的，因为font支持的属性很有限，比如说font不支持size属性，所以请多多了解Spannable。也许有时候我们想把文本加到xml里面，这也是可以的，只不过有一点我们需要注意，那就是要对<、>、'、"这四个字符进行转换，因为它们四个是HTML的标签。具体来说，左括号<要用<代替，右括号>要用>代替，单引号和双引号要用\\进行转义。这里给出一个示例，其效果和上面代码中的效果是一致的：<string name="text">北京市发布霾黄色预警，<font color=\\'\#ff0000\\'><big><big>外出携带好</big></big></font>口罩</string>，另外，你必须显式地调用textView.setText(Html.fromHtml(getString(R.string.text)))来使其生效。

[Object]: http://developer.android.com/reference/java/lang/Object.html
[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3700a3e9670045f7a75487da47624205.png
[view plain]: http://blog.csdn.net/singwhatiwanna/article/details/18363899#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/159553
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/159553/fork