Android：SpannableString使用詳解

在Android開發過程中，我們有時會需要TextView 顯示各種格式的文本，包括字體顏色，大小，下劃線，表情符號等等。對於這種需求，我們應該如何實現呢？答案是：SpannableString。
我們可以通過SpannableString來實現各種格式的文本。它的使用非常簡單，這裏不多介紹了。直接看代碼會更加的直觀。

效果

我們先來看一下運行的效果。

代碼如下

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.nxiangbo.spansdemo.MainActivity" >

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
       android:text="@string/content"/>

</RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {
    private static final String TAG = "MainActivity";

    private TextView mText;
    private SpannableString mSpannableString;

    private String mContent;

    private static final String itallic = "三月七日沙湖道中遇雨。雨具先去，同行皆狼狽，餘獨不覺。已而遂晴，故作此 ";
    private static final String bold = "誰怕？ 一蓑煙雨任平生";
    private static final String underline = "莫聽穿林打葉聲";
    private static final String subscript = "徐行";
    private static final String superscript = "輕勝馬";
    private static final String backgroundCorlor = "料峭春風吹酒醒";
    private static final String foregroundColor = "微冷";
    private static final String relativeSize = "山頭";
    private static final String maskFilter = "卻相迎";
    private static final String scaleX = "回首";
    private static final String strikeThrough = "蕭瑟處";
    private static final String blurMaskFilter = "歸去";
    private static final String image = "蘇軾";
    private static final String quote = "人間不可無一，難能有二";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mText = (TextView) findViewById(R.id.tv_content);
        mContent = getResources().getString(R.string.content);
        mSpannableString = new SpannableString(mContent);

        Log.e(TAG, mContent.length()+"mContent.length");

        setItallic(itallic);
        setBold(bold);
        setUnderLine(underline);
        setSubscript(subscript);
        setSuperscript(superscript);
        setBackgroundColor(backgroundCorlor);
        setForegroundColor(foregroundColor);
        setRelativeSize(relativeSize);
        setMaskFilter(maskFilter);
        setScaleX(scaleX);
        setStrikeThrough(strikeThrough);
        setBlurMaskFilter(blurMaskFilter);
        setImage(image);
        setQuote(quote);
        mText.setText(mSpannableString);

    }

    //將"蘇軾"替換成一張圖片
    @SuppressLint("NewApi")
    private void setImage(String text) {
        Object span = null;
        span = new ImageSpan(this,R.drawable.demo);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //將字體設置爲模糊效果
    private void setBlurMaskFilter(String text) {
        Object span = null;
        span = new MaskFilterSpan(new BlurMaskFilter(5, BlurMaskFilter.Blur.OUTER));
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置刪除線
    private void setStrikeThrough(String text) {
        Object span = null;
        span = new StrikethroughSpan();
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置字體在水平方向上放大兩倍
    private void setScaleX(String text) {
        Object span = null;
        span = new ScaleXSpan(2.0f);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置字體爲浮雕形式的
    private void setMaskFilter(String text) {
        Object span = null;
        span = new MaskFilterSpan(new EmbossMaskFilter(new float[] { 1, 5, 1 }, 0.4f, 6, 3.5f));
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;

        ForegroundColorSpan fg = new ForegroundColorSpan(Color.RED);
        StyleSpan style = new StyleSpan(android.graphics.Typeface.BOLD);
        mSpannableString.setSpan(fg, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        mSpannableString.setSpan(style, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置字體大小的原來大兩倍
    private void setRelativeSize(String text) {
        Object span = null;
        span = new RelativeSizeSpan(2.0f);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置前景顏色
    private void setForegroundColor(String text) {
        Object span = null;
        span = new ForegroundColorSpan(Color.BLUE);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置背景顏色
    private void setBackgroundColor(String text) {
        Object span = null;
        span = new BackgroundColorSpan(Color.YELLOW);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }



    //設置黑體
    private void setBold(String text){
        Object span = null;
        span = new StyleSpan(android.graphics.Typeface.BOLD);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置斜體
    private void setItallic(String text){
        Object span = null;
        span = new StyleSpan(android.graphics.Typeface.ITALIC);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;

        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置引用
    private void setQuote(String text){
        Object span = null;
        span = new CustomQuoteSpan(Color.BLUE);
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置下劃線
    private void setUnderLine(String text){
        Object span = new UnderlineSpan();
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置下標
    private void setSubscript(String text){
        Object span = new SubscriptSpan();
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }

    //設置上標
    private void setSuperscript(String text){
        Object span = new SuperscriptSpan();
        WordPosition position = getWordPosition(text);
        int textStart = position.start;
        int textEnd = position.end;
        mSpannableString.setSpan(span, textStart, textEnd, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
    }


    private WordPosition getWordPosition(String text) {
        int start = mContent.indexOf(text);
        int end = start + text.length();
        return new WordPosition(start, end);
    }

    private static final class WordPosition {
        int start;
        int end;

        private WordPosition(int start, int end) {
            this.start = start;
            this.end = end;
        }

        @Override
        public String toString() {
            return "WordPosition{" +
                    "start=" + start +
                    ", end=" + end +
                    '}';
        }
    }



}

源碼下載地址

參考文章

1. Spans, a Powerful Concept.
2. 【譯】Spans，一個強大的概念(上篇文章的中文譯文)