2. 程式人生 > >Android -- SpannableString 實現富文字效果用法全解析

Android -- SpannableString 實現富文字效果用法全解析

阿新 • • 發佈：2019-02-07

先給你們看一下執行效果：

文末有Demo地址，感興趣的可以下載執行一下。

SpannableString 實現了CharSequence 和 Spannable 類 ，是字串的一種，所以其例項物件可以作為textvie.setText()的實參。
另外為SpannableString 物件通過setSpan() 方法為其設定特殊效果。

setSpan(Object what, int start, int end, int flags)方法有四個引數，what表示設定的特殊效果是什麼，start表示需要設定格式的子字串的起始下標，同理end表示終了下標，flags屬性有4種取值，影響設定的上標和下標，四種取值的如下：

Spanned.SPAN_INCLUSIVE_EXCLUSIVE 包括起始下標，不包括終止下標
Spanned.SPAN_INCLUSIVE_INCLUSIVE 包括起始下標，也包括終止下標
Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 不包括起始下標，也不包括終止下標
Spanned.SPAN_EXCLUSIVE_INCLUSIVE 不包括起始下標，包括終止下標

本文實現的所有效果如下：

 ForegroundColorSpan : 文字顏色
 BackgroundColorSpan : 文字背景色
 StrikethroughSpan : 刪除線
 UnderlineSpan : 下劃線
 AbsoluteSizeSpan : 文字字型（絕對大小）
 RelativeSizeSpan : 相對大小（文字字型）
 ScaleXSpan : 基於x軸縮放
 TypefaceSpan : 文字字型
 StyleSpan : 字型樣式：粗體、斜體等
 SubscriptSpan : 下標（數學公式會用到）
 SuperscriptSpan : 上標（數學公式會用到）
 URLSpan : 文字超連結
 ClickableSpan : 點選事件
 ImageSpan : 圖片
 IconMarginSpan,DrawableMarginSpan  : 帶偏移圖片
 DynamicDrawableSpan：動態指定圖片
 MaskFilterSpan : 修飾效果，模糊(BlurMaskFilter);
 
浮雕;

1.ForegroundColorSpan : 文字顏色BackgroundColorSpan : 文字背景色

        SpannableString spannableString01 = new SpannableString("文字顏色為紫色，背景色為藍色");
        ForegroundColorSpan foregroundColorSpan = new ForegroundColorSpan(Color.parseColor("#EE38FB"));
        BackgroundColorSpan backgroundColorSpan = new BackgroundColorSpan(Color.parseColor
 
("#40C3FF"));
        spannableString01.setSpan(foregroundColorSpan, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString01.setSpan(backgroundColorSpan, 12, 14, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_01.setText(spannableString01);

2.StrikethroughSpan : 刪除線 UnderlineSpan : 下劃線

        SpannableString spannableString02 = new SpannableString("文字刪除線，下劃線");
        StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
        UnderlineSpan underlineSpan = new UnderlineSpan();
        spannableString02.setSpan(strikethroughSpan, 2, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString02.setSpan(underlineSpan, 6, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_02.setText(spannableString02);

3.AbsoluteSizeSpan : 文字字型（絕對大小）RelativeSizeSpan : 相對大小（文字字型）

        SpannableString spannableString03 = new SpannableString("文字絕對大小，相對大小");
        AbsoluteSizeSpan absoluteSizeSpan01 = new AbsoluteSizeSpan(14, true);
        AbsoluteSizeSpan absoluteSizeSpan02 = new AbsoluteSizeSpan(11, true);
        AbsoluteSizeSpan absoluteSizeSpan03 = new AbsoluteSizeSpan(6, true);
        RelativeSizeSpan relativeSizeSpan01 = new RelativeSizeSpan(1.2f);
        RelativeSizeSpan relativeSizeSpan02 = new RelativeSizeSpan(0.8f);
        RelativeSizeSpan relativeSizeSpan03 = new RelativeSizeSpan(1.0f);
        spannableString03.setSpan(absoluteSizeSpan01, 2, 3, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString03.setSpan(absoluteSizeSpan02, 3, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString03.setSpan(absoluteSizeSpan03, 4, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString03.setSpan(relativeSizeSpan01, 7, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString03.setSpan(relativeSizeSpan02, 8, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString03.setSpan(relativeSizeSpan03, 9, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_03.setText(spannableString03);

4.ScaleXSpan : 基於x軸縮放

        SpannableString spannableString04 = new SpannableString("基於X軸縮放");
        ScaleXSpan scaleXSpan = new ScaleXSpan(2.4f);
        spannableString04.setSpan(scaleXSpan, 2, spannableString04.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_04.setText(spannableString04);

5.TypefaceSpan : 文字字型

        SpannableString spannableString05 = new SpannableString("字型：monospace，字型：serif，\n字型：sans-serif");
        TypefaceSpan typefaceSpan01 = new TypefaceSpan("monospace");
        TypefaceSpan typefaceSpan02 = new TypefaceSpan("serif");
        TypefaceSpan typefaceSpan03 = new TypefaceSpan("sans-serif");
        spannableString05.setSpan(typefaceSpan01, 3, 11, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString05.setSpan(typefaceSpan02, 16, 21, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString05.setSpan(typefaceSpan03, 26, spannableString05.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_05.setText(spannableString05);

6.StyleSpan : 字型樣式：粗體、斜體等

        SpannableString spannableString06 = new SpannableString("粗體，斜體，粗斜體");
        StyleSpan styleSpan01 = new StyleSpan(Typeface.BOLD);
        StyleSpan styleSpan02 = new StyleSpan(Typeface.ITALIC);
        StyleSpan styleSpan03 = new StyleSpan(Typeface.BOLD_ITALIC);
        spannableString06.setSpan(styleSpan01, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString06.setSpan(styleSpan02, 3, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString06.setSpan(styleSpan03, 6, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_06.setText(spannableString06);

7. SubscriptSpan : 下標 SuperscriptSpan : 上標

        SpannableString spannableString07 = new SpannableString("上標：X2，下標: H2O");
        SuperscriptSpan superscriptSpan = new SuperscriptSpan();
        SubscriptSpan subscriptSpan = new SubscriptSpan();
        spannableString07.setSpan(superscriptSpan, 4, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString07.setSpan(subscriptSpan, 11, 12, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_07.setText(spannableString07);

從前面的圖可以看出上標和下標字型並不會變小，所以我們只需要再用RelativeSizeSpan 或 AbsoluteSizeSpan 設定一下就可以了。

8.URLSpan : 文字超連結

超文字連結點選後會使用預設瀏覽器跳轉到指定的網站。必須呼叫setMovementMethod(),否則不生效。

        SpannableString spannableString08 = new SpannableString("文字超連結:我的部落格");
        URLSpan urlSpan = new URLSpan("http://blog.csdn.net/wyg1230");
        spannableString08.setSpan(urlSpan, 6, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_08.setMovementMethod(LinkMovementMethod.getInstance());
        tv_08.setText(spannableString08);

9. ClickableSpan : 點選事件

ClickableSpan 需要複寫其中的onClick()方法，其實URLSpan就是繼承自ClickableSpan並在onClick方法裡面實現了跳轉邏輯。必須呼叫setMovementMethod(),否則不生效。

        SpannableString spannableString09 = new SpannableString("點選事件：請點選這一部分");
        ClickableSpan clickableSpan = new MyClickableSpan();
        spannableString09.setSpan(clickableSpan, 5, 12, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_09.setMovementMethod(LinkMovementMethod.getInstance());
        tv_09.setText(spannableString09);
    public class MyClickableSpan extends ClickableSpan {

        @Override
        public void updateDrawState(TextPaint ds) {
            super.updateDrawState(ds);
            ds.setColor(Color.GREEN);//設定字型顏色
            ds.setUnderlineText(false);//設定無下劃線
        }

        @Override
        public void onClick(View view) {
            Toast.makeText(MainActivity.this, "點選了Clickable", Toast.LENGTH_SHORT).show();
        }
    }

10. ImageSpan : 圖片

        SpannableString spannableString10 = new SpannableString("ImageSpan..");
        ImageSpan imageSpan = new ImageSpan(this, R.drawable.pic);
        spannableString10.setSpan(imageSpan, 9, 11, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_10.setText(spannableString10);

11. IconMarginSpan,DrawableMarginSpan : 帶偏移圖片

        IconMarginSpan,DrawableMarginSpan 這兩個沒啥區別，一個傳Bitmap ，一個傳Drawable
        SpannableString spannableString11 = new SpannableString("IconMarginSpan..");
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic);
        IconMarginSpan iconMarginSpan = new IconMarginSpan(bitmap, 100);
        spannableString11.setSpan(iconMarginSpan, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);//只能以0開始
        tv_11.setText(spannableString11);

12.DynamicDrawableSpan：動態指定圖片

在建構函式可以傳參指定對齊方式：

DynamicDrawableSpan.ALIGN_BASELINE DynamicDrawableSpan.ALIGN_BOTTOM

       SpannableString spannableString12 = new SpannableString("DynamicDrawableSpan..");
        DynamicDrawableSpan drawableSpan = new DynamicDrawableSpan(DynamicDrawableSpan.ALIGN_BASELINE) {
            @Override
            public Drawable getDrawable() {
                Drawable d = getResources().getDrawable(R.drawable.pic);
                d.setBounds(0, 0, 200, 150);
                return d;
            }
        };
        spannableString12.setSpan(drawableSpan, spannableString12.length() - 3, spannableString12.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_12.setText(spannableString12);

13.MaskFilterSpan : 修飾效果：模糊(BlurMaskFilter);浮雕;

浮雕效果必須關閉硬體加速。

        SpannableString spannableString13 = new SpannableString("模糊效果，浮雕效果");
        MaskFilterSpan maskFilterSpan01 = new MaskFilterSpan(new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER));
        MaskFilterSpan maskFilterSpan02 = new MaskFilterSpan(new EmbossMaskFilter(new float[]{2, 3, 6}, 3.0f, 12, 16));
        spannableString13.setSpan(maskFilterSpan01, 0, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        spannableString13.setSpan(maskFilterSpan02, 4, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
        tv_13.setLayerType(View.LAYER_TYPE_SOFTWARE, null);//關閉硬體加速。浮雕效果才能有效
        tv_13.setText(spannableString13);

相關推薦

Android -- SpannableString 實現富文字效果用法全解析

先給你們看一下執行效果： 文末有Demo地址，感興趣的可以下載執行一下。 SpannableString 實現了CharSequence 和 Spannable 類 ，是字串的一種，所以其例項物件可以作為textvie.setText()的實參。

android上實現富文字

控制元件上設定富文字可以減少很多不必要的佈局 樣例程式碼： SpannableString s = new SpannableString("MPAndroidChart developed\n by Philipp Jahoda"); s.setSpan(new R

vue2.0 實現富文字編輯器功能

前端富文字編譯器使用總結： UEditor：百度前端的開源專案，功能強大，基於 jQuery，但已經沒有再維護，而且限定了後端程式碼，修改起來比較費勁 bootstrap-wysiwyg：微型，易用，小而美，只是 Bootstrap + jQuery... kindEditor：功能強大，程

android TextView實現滾動顯示效果(列表中多個同時滾動，親測可用)

 在android中，如果設定了TextView控制元件為單行顯示，且顯示的文字太長的話，預設情況下會造成顯示不全的情況，這種情況下我們需要設定該控制元件屬性如下： <TextView android:id="@+id/tv1"

Android TextView 實現跑馬燈效果

自定義一個TextView控制元件 public class MarqueeTextView extends AppCompatTextView { public MarqueeTextView(Context context) { s

小程式實現富文字編輯器轉換

gitHub:https://github.com/icindy/wxParse 1.在 js 中引入 wxParse.js 2.在 wxss 中引入 wxParse.js 3.通過呼叫WxParse.wxParse方法來設定html內容 4.在頁面中引用模版

【Android】Android開發實現帶有反彈效果，仿IOS反彈scrollview詳解教程

作者：程式設計師小冰，GitHub主頁：https://github.com/QQ986945193 新浪微博：http://weibo.com/mcxiaobing 首先給大家看一下我們今天這個最終實現的效果圖： 這個是ios中的反彈效果。當然我

Android 網路程式設計（5）: OkHttp2.x用法全解析

前言 講完了Volley，我們接下來看看目前比較火的網路框架OkHttp， 它處理了很多網路疑難雜症：會從很多常用的連線問題中自動恢復。如果您的伺服器配置了多個IP地址，當第一個IP連線失敗的時候，OkHttp會自動嘗試下一個IP，此外OkHttp還處理了代理伺服器問題和SS

Android事件匯流排（一）EventBus3.0用法全解析

前言 EventBus是一款針對Android優化的釋出/訂閱事件匯流排。簡化了應用程式內各元件間、元件與後臺執行緒間的通訊。優點是開銷小，程式碼更優雅，以及將傳送者和接收者解耦。如果Activity和Activity進行互動還好說，如果Fragmen

iOS NSMutableAttributedString 實現富文字（不同顏色字型、下劃線等）

//    1> NSFontAttributeName(字型) //    該屬性所對應的值是一個 UIFont 物件。該屬性用於改變一段文字的字型。如果不指定該屬性，則預設為12-point Helvetica(Neue)。 //     //    2> NSParagraphSt

使用NSMutableAttributedString 實現富文字（不同顏色字型、下劃線等）

開發中，常常會有一段文字顯示不同的顏色和字型，或者給某幾個文字加刪除線或下劃線的需求。NSMuttableAttstring（帶屬性的字串），上面的一些需求都可以很簡便的實現。 1.例項化方法有兩種： 使用字串來初始化 ①：- (id)initWithSt

SpringMVC + ueditor + 七牛 實現富文字檔案上傳功能

1.下載ueditor開發包（原始碼以及JSP版本UTF-8版），並匯入專案中，也可以匯入jar包。 2.pom 新增相關依賴 3.解壓並將原始碼拷貝到專案中：  解壓後原始碼如下圖： 拷貝至專案中： 4. 匯入控制元件 5.修改配置檔案 此方法對應後臺方

jquery wysiwyg.js實現富文字編輯框，可複製圖片及文字

wysiwyg.js是一款十分強大的、所見即所得的jQuery富文字編輯器外掛。wysiwyg.js富文字編輯器體積小，支援選擇、鍵盤、佔位等眾多事件。而且該富文字編輯器的相容性十分好，甚至相容IE

利用 javascript 實現富文字編輯器

近期專案中需要開發一個相容PC和移動端的富文字編輯器，其中包含了一些特殊的定製功能。考察了下現有的js富文字編輯器，桌面端的很多，移動端的幾乎沒有。桌面端以UEditor為代表。但是我們並不打算考慮相容性，所以沒有必要採用UEditor這麼重的外掛。為此決定自研一個富文字編輯器。本文，主要介紹如何實現富文

iOS通過html模版實現富文字編輯

 在iOS開發中，常常會遇到一些富文字編輯，如新聞，公告等，NSMutableAttributedString又有一定的侷限性，所以我想到用html 模版去載入富文字頁面，根據所需要的格式，去構建相應的html介面。一個簡單的html模版如下： <!DOCTYP

安卓實現富文字（1）

本篇文章實現自我編輯富文字，就是說可以實現讓自己編輯的文字以富文字的形式展示 主要參考的是這位大神的部落格 展示富文字的思路 首先需要拿到使用者在編輯框編輯的文字 然後根據使用者選擇的富文字方式

Android -- RecyclerView實現頂部吸附效果

package com.qianmo.stickyitemdecoration.bean; import java.util.List; /** * Created by Administrator on 2017/3/3 0003. * E-Mail：[email protected]

電商專案之springmvc實現富文字上傳到FTP伺服器

1、前端 富文字圖片上傳檔案 <form name="form1" action="/manage/product/richtext_img_upload.do" method="post" enctype="multipart/form-data"> <input t

關於SpannableString屬性詳細介紹以及利用SpannableString顯示多種文字效果

關於SpannableString： SpannableString其實和String一樣，都是一種字串型別，同樣TextView也可以直接設定SpannableString作為顯示文字，不同的是SpannableString可以通過使用其方法setSp

android View實現變暗效果

android專案中做一個預設圖片變暗，有焦點時變亮的效果。相信大家都能各種辦法，各種手段很容易的實現這個效果。這裡記錄下作者實現這個效果的過程及遇到的問題，僅供參考。 見下圖（注:因為是eclipse截圖，所以有點色差了，黃色變成藍色，不過暗亮的效果還是明顯的O(