重拾Android之路之TextView（高亮、超链接、跳转）

---

引言

通常每一个互联网产品的登录界面或是注册界面都会遇到用户协议超链接的问题。因此，我以美团登录为示例，总结一下TextView的小特性用法。

正文

1. 首先创建一个方法，作用是将普通文本变为携带超链接的链接文本。

    public void createLink(String link) {
        SpannableString spannableString = new SpannableString(link);
        spannableString.setSpan(new URLSpan("http://www.baidu.com"), 0, link.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv_link.setText(spannableString);
        tv_link.setMovementMethod(LinkMovementMethod.getInstance());
    }

• tv_link.setMovementMethod(LinkMovementMethod.getInstance()); 激活链接,没有此方法，点击超链接是不会跳转的。
• 这样的效果是：点击链接会跳转到手机浏览器打开网页

2. 将网页跳转到新的WebView页面上去。

spannableString.setSpan(new CustomUrlSpan(this, "http://www.baidu.com"), 0, link.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

public class CustomUrlSpan extends ClickableSpan {
    private Context context;
    private String url;

    public CustomUrlSpan(Context context, String url) {
        this.context = context;
        this.url = url;
    }

    @Override
    public void onClick(View widget) {
        Intent intent = new Intent(context, WebViewActivity.class);
        intent.putExtra(WebViewActivity.WEB_URL, url);
        intent.putExtra("from","policy");
        intent.putExtra("title","协议及声明");
        context.startActivity(intent);
    }
}

拓展

之前做TextView关键字高亮效果，使用的是Html.fromHtml(String source)方法，然后通过TextView的setText(CharSequence text)方法来显示

后来测试此方法在部分手机上显示有问题，如Nexus4，华为P6等等。于是乎只能继续寻找别的解决办法了，在这里Mark一下。

这里用到了SpannableString类

使用 SpannableString.setSpan(Object what, int start, int end, int flags)方法

1、创建超链接

/** 
     * 创建一个超链接 
     */  
    private void createLink() {  
        // 创建一个 SpannableString对象  
        SpannableString sp = new SpannableString("百度手机卫士");  
        // 设置超链接  
        sp.setSpan(new URLSpan("http://www.baidu.com"), 0, 2,  
                Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);  
          
        tv_content1.setText(sp);  
        //设置TextView可点击    
        tv_content1.setMovementMethod(LinkMovementMethod.getInstance());    
    }  

2、高亮某一段文字的背景

//高亮背景颜色  
    private void backgroundHight(){  
        // 创建一个 SpannableString对象  
        SpannableString sp = new SpannableString("祝大家新年快乐");  
        //设置背景颜色  
        sp.setSpan(new BackgroundColorSpan(Color.RED), 3 ,5,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
        tv_content2.setText(sp);  
        //设置TextView可点击    
        tv_content2.setMovementMethod(LinkMovementMethod.getInstance());    
    }  

3、高亮某段文字

//高亮字体颜色  
    private void foregroundHight(){  
        // 创建一个 SpannableString对象  
        SpannableString sp = new SpannableString("祝大家新年快乐");  
        //设置背景颜色  
        sp.setSpan(new ForegroundColorSpan(Color.parseColor("#ff6600")), 3 ,5,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
//      sp.setSpan(new ForegroundColorSpan(Color.YELLOW), 3 ,5,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
        tv_content3.setText(sp);  
        //设置TextView可点击    
        tv_content3.setMovementMethod(LinkMovementMethod.getInstance());    
    }  

*4、设置斜体

//斜体  
    private void boldItalicHight(){  
        // 创建一个 SpannableString对象  
        SpannableString sp = new SpannableString("新年快乐天天开心 哈哈哈哈哈哈");  
//      SpannableString sp = new SpannableString("Happy New Year 天天开心 哈哈哈哈哈哈");  
        //设置背景颜色  
        sp.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 6 ,10,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
        tv_content4.setText(sp);  
        //设置TextView可点击    
        tv_content4.setMovementMethod(LinkMovementMethod.getInstance());    
    }  

这里设置的斜体只对 英文起作用，汉字没有斜体效果，如果有人知道原因，麻烦在下面回复我一下，谢谢！

*5、设置下划线

//下划线  
    private void underLineHight(){  
        // 创建一个 SpannableString对象  
        SpannableString sp = new SpannableString("祝大家新年快乐");  
        //设置背景颜色  
        sp.setSpan(new UnderlineSpan(), 3 ,5,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
        tv_content5.setText(sp);  
        //设置TextView可点击    
        tv_content5.setMovementMethod(LinkMovementMethod.getInstance());    
    }  

6、设置中划线

//中划线  
    private void strikethroughHight(){  
        // 创建一个 SpannableString对象  
        SpannableString sp = new SpannableString("祝大家新年快乐");  
        //设置背景颜色  
        sp.setSpan(new StrikethroughSpan(), 3 ,5,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
        tv_content6.setText(sp);  
        //设置TextView可点击    
        tv_content6.setMovementMethod(LinkMovementMethod.getInstance());    
    }  

7、高亮一段文字中指定的全部关键字

/** 
     * 高亮某个关键字，如果有多个则全部高亮 
     */  
    private void highlightKeyword() {  
          
        String str = "KTV风暴KTV";  
        SpannableString sp = new SpannableString(str);  
          
        Pattern p = Pattern.compile("KTV");  
        Matcher m = p.matcher(str);  
  
        while (m.find()) {  //通过正则查找，逐个高亮  
            int start = m.start();  
            int end = m.end();  
            sp.setSpan(new ForegroundColorSpan(Color.parseColor("#ff6600")), start ,end,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);    
        }  
        tv_content7.setText(sp);  
    }  

运行效果

SpannableString的详细用法

发现用这个类就是用来实现文本的样式修改。

Spannable继承自Spanned接口，而实际上，Spanned继承自CharSequence接口。
在TextView的setText(CharSequence text)方法中，要求的参数正好是一个CharSequence对象，因此，我们可以通过Spannable对象来直接使用setText来完成文本的设置。在使用中通常使用Spannable spn = new SpannableString("字符串");或者通过SpannableStringBuilder对象来进行构建。

在构建除了Spannable对象以后，就可以使用spannable.setSpan(Obj what, int start, int end, int flags)方法来进行样式的设置了，其中参数what是具体样式的实现对象，start则是该样式开始的位置，end对应的是样式结束的位置，参数flags，定义在Spannable中的常量，常用的有：

Spanned.SPAN_EXCLUSIVE_EXCLUSIVE --- 不包含两端start和end所在的端点        (a,b)
Spanned.SPAN_EXCLUSIVE_INCLUSIVE --- 不包含端start，但包含end所在的端点     (a,b]
Spanned.SPAN_INCLUSIVE_EXCLUSIVE --- 包含两端start，但不包含end所在的端点   [a,b)
Spanned.SPAN_INCLUSIVE_INCLUSIVE --- 包含两端start和end所在的端点          [a,b]

第一个参数传入一个样式，样式种类有，具体参见这里和这里：

• AbsoluteSizeSpan 指定文字大小
• TypefaceSpan 可以设置不同的字体
• AlignmentSpan.Standard 标准文本对齐
• BackgroundColorSpan 文本背景颜色
• ForegroundColorSpan 文字字体颜色
• LeadingMarginSpan 文本缩进
• TabStopSpan 制表位偏移样式
• TextAppearanceSpan 使用style文件来定义文本样式
• RelativeSizeSpan 对于文本设定的大小的相对比例
• ScaleXSpan 将字体按比例进行横向缩放
• URLSpan 可以打开一个链接
• StyleSpan 正常、粗体、斜体和同时加粗倾斜四种样式
• StrikethroughSpan 删除线样式
• QuoteSpan 在文本左侧添加一条表示引用的竖线
• UnderlineSpan 给一段文字加上下划线
• SubscriptSpan 脚注样式，比如化学式的常见写法
• SuperscriptSpan 上标样式，比如数学上的次方运算
• BulletSpan 文本着重样式，类似于HTML中的
• 标签的圆点效果
• DrawableMarginSpan 、IconMarginSpan 图片+Margin样式
• ImageSpan 图片样式，主要用于在文本中插入图片 聊天中的emoji表情显示用的就是这个
• MaskFilterSpan 文本滤镜 目前只有模糊效果和浮雕效果
• RasterizerSpan 光栅化

通过这种方式，我实现最上面的需求，实现方法如下：

public static SpannableStringBuilder addQuoteSpannableStr(String resoneStr){
    SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder("“" + resoneStr + "”");
    int length = spannableStringBuilder.length();

    spannableStringBuilder.setSpan(new AbsoluteSizeSpan(DensityUtil.dip2px(17)), 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    spannableStringBuilder.setSpan(new AbsoluteSizeSpan(DensityUtil.dip2px(15)), 1, length - 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    spannableStringBuilder.setSpan(new AbsoluteSizeSpan(DensityUtil.dip2px(17)), length - 1, length, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

    spannableStringBuilder.setSpan(new ForegroundColorSpan(ResourceUtil.getColor(R.color.ab_life_feed_item_recommend_quote)), 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    spannableStringBuilder.setSpan(new ForegroundColorSpan(ResourceUtil.getColor(R.color.ab_life_feed_item_recommend_resone)), 1, length - 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    spannableStringBuilder.setSpan(new ForegroundColorSpan(ResourceUtil.getColor(R.color.ab_life_feed_item_recommend_quote)), length - 1, length, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    return spannableStringBuilder;
}

最后再附录一段添加emoji代码：

public static void convert2RichText(String text, Spannable spannable, float scaleRate) {
    Pattern pattern = Pattern.compile("\\[([0-9]+)\\]");
    Matcher matcher = pattern.matcher(text);
    while (matcher.find()) {
        String emojiId = matcher.group(1);
        System.out.println("emojiId:" + emojiId);
        if (EMOJI_MAP.containsKey(emojiId)) {
            Drawable drawable = getEmojiDrawable(context, emojiId, scaleRate);
            int imageStartIndex = matcher.start();
            int imageEndIndex = matcher.end();
            ImageSpan span = new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM);
            spannable.setSpan(span, imageStartIndex, imageEndIndex, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
        }
    }
}

对于Spannable的样式集锦摘录自坚坚老师。

小Tips:

---

设置当TextView中的文字超过TextView的容量时，用省略号代替

只需要下边的设置：

textview.setSingleLine();

textview.setEllipsiz(TextUtils.TruncateAt.valueOf(``"END"``));

在xml中设置如下：

android:singleLine="true"

android:ellipsize="end"