android強大的SpannableStringBuilder


SpannableStringBuilder和SpannableString的區別類似與StringBuilder、String,就是SpannableStringBuilder可以拼接,而SpannableString不可拼接。

主要的方法

SpannableStringBuilder和SpannableString主要通過使用setSpan(Object what, int start, int end, int flags)改變文本樣式。
對應的參數:

start: 指定Span的開始位置
end: 指定Span的結束位置,並不包括這個位置。
flags:取值有如下四個
Spannable. SPAN_INCLUSIVE_EXCLUSIVE:前面包括,後面不包括,即在文本前插入新的文本會應用該樣式,而在文本後插入新文本不會應用該樣式
Spannable. SPAN_INCLUSIVE_INCLUSIVE:前面包括,後面包括,即在文本前插入新的文本會應用該樣式,而在文本後插入新文本也會應用該樣式
Spannable. SPAN_EXCLUSIVE_EXCLUSIVE:前面不包括,後面不包括
Spannable. SPAN_EXCLUSIVE_INCLUSIVE:前面不包括,後面包括
what: 對應的各種Span,不同的Span對應不同的樣式。已知的可用類有:
BackgroundColorSpan : 文本背景色
ForegroundColorSpan : 文本顏色
MaskFilterSpan : 修飾效果,如模糊(BlurMaskFilter)浮雕
RasterizerSpan : 光柵效果
StrikethroughSpan : 刪除線
SuggestionSpan : 相當於佔位符
UnderlineSpan : 下劃線
AbsoluteSizeSpan : 文本字體(絕對大小)
DynamicDrawableSpan : 設置圖片,基於文本基線或底部對齊。
ImageSpan : 圖片
RelativeSizeSpan : 相對大小(文本字體)
ScaleXSpan : 基於x軸縮放
StyleSpan : 字體樣式:粗體、斜體等
SubscriptSpan : 下標(數學公式會用到)
SuperscriptSpan : 上標(數學公式會用到)
TextAppearanceSpan : 文本外貌(包括字體、大小、樣式和顏色)
TypefaceSpan : 文本字體
URLSpan : 文本超鏈接
ClickableSpan : 點擊事件
用法

先在xml中創建一個TextView:

<TextView
    android:id="@+id/mode1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="18dp" />

SpannableStringBuilder和SpannableString的用法差不多,這邊先舉一個SpannableString的例子

SpannableString
修改字體顏色

 /**
     * 使用SpannableString設置樣式——字體顏色
     */
    private void mode1() {
        SpannableString spannableString = new SpannableString("暗影IV已經開始暴走了");
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(colorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode1)).setText(spannableString);
    }
創建SpannableString的時候,傳入需要顯示的字符串。使用ForegroundColorSpan爲文字設置顏色。
效果:
字體顏色

後面都以SpannableStringBuilder爲例子

SpannableStringBuilder

修改字體顏色
    /**
     * 使用SpannableStringBuilder設置樣式——字體顏色
     */
    private void mode2() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV");
        spannableString.append("已經開始暴走了");
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(colorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode2)).setText(spannableString);
    }
這裏就可以看出SpannableStringBuilder的可拼接性,這裏同樣採用了ForegroundColorSpan爲文本設置顏色。
 /**
     * 使用SpannableStringBuilder設置樣式——背景顏色
     */
    private void mode3() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(bgColorSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode3)).setText(spannableString);
    }
使用BackgroundColorSpan設置背景顏色。
 /**
     * 使用SpannableStringBuilder設置樣式——字體大小
     */
    private void mode4() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        AbsoluteSizeSpan absoluteSizeSpan = new AbsoluteSizeSpan(20);
        spannableString.setSpan(absoluteSizeSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode4)).setText(spannableString);
    }
使用AbsoluteSizeSpan設置字體大小。
  /**
     * 使用SpannableStringBuilder設置樣式——粗體\斜體
     */
    private void mode5() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        //setSpan可多次使用
        StyleSpan styleSpan = new StyleSpan(Typeface.BOLD);//粗體
        spannableString.setSpan(styleSpan, 0, 3, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        StyleSpan styleSpan2 = new StyleSpan(Typeface.ITALIC);//斜體
        spannableString.setSpan(styleSpan2, 3, 6, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        StyleSpan styleSpan3 = new StyleSpan(Typeface.BOLD_ITALIC);//粗斜體
        spannableString.setSpan(styleSpan3, 6, 9, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode5)).setText(spannableString);
    }
粗體\斜體
刪除線
 /**
     * 使用SpannableStringBuilder設置樣式——刪除線
     */
    private void mode6() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
        spannableString.setSpan(strikethroughSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode6)).setText(spannableString);
    }
StrikethroughSpa使用StrikethroughSpan設置刪除線。

刪除線
下劃線
  /**
     * 使用SpannableStringBuilder設置樣式——下劃線
     */
    private void mode7() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        UnderlineSpan underlineSpan = new UnderlineSpan();
        spannableString.setSpan(underlineSpan, 0, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode7)).setText(spannableString);
    }
使用UnderlineSpan設置下劃線。

下劃線
不僅支持文字樣式,還可以插入圖片。厲害了我的SpannableStringBuilder~~
 /**
     * 使用SpannableStringBuilder設置樣式——圖片
     */
    private void mode8() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        ImageSpan imageSpan = new ImageSpan(this, R.mipmap.ic_launcher);
        //也可以這樣
        //Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher);
        //drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
        //ImageSpan imageSpan1 = new ImageSpan(drawable);
        //將index爲6、7的字符用圖片替代
        spannableString.setSpan(imageSpan, 6, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        ((TextView)findViewById(R.id.mode8)).setText(spannableString);
    }
使用ImageSpan設置圖片,將index爲6、7的字符替換成了圖片,也就是說,該圖片佔有index6和7的位置。
點擊事件
插入圖片就已經很變態了,居然還支持點擊事件。
    /**
     * 使用SpannableStringBuilder設置點擊事件
     */
    private void mode9() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "請不要點我", Toast.LENGTH_SHORT).show();
            }
        };
        spannableString.setSpan(clickableSpan, 5, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        TextView textView = (TextView)findViewById(R.id.mode9);
        textView.setText(spannableString);
        textView.setMovementMethod(LinkMovementMethod.getInstance());
    }
使用ClickableSpan設置點擊事件,最後還需要加上textView.setMovementMethod(LinkMovementMethod.getInstance());。代碼中指定index爲5、6、7的字符都成了可點擊的文本,其他區域還是不可點擊的。

點擊事件

有同學反映設置部分點擊事件後,還需要給真整個TextView單獨設置點擊事件時會出問題。想知道什麼問題?自己去試試看,哈哈哈~~
這邊有一個我在CSDN上看到的解決方法,可以從另一個角度來解決這個問題。——解決方案

組合使用
 /**
     * 使用SpannableStringBuilder事件組合使用
     */
    private void mode10() {
        SpannableStringBuilder spannableString = new SpannableStringBuilder();
        spannableString.append("暗影IV已經開始暴走了");
        //圖片
        ImageSpan imageSpan = new ImageSpan(this, R.mipmap.ic_launcher);
        spannableString.setSpan(imageSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        //點擊事件
        ClickableSpan clickableSpan = new ClickableSpan() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "請不要點我", Toast.LENGTH_SHORT).show();
            }
        };
        spannableString.setSpan(clickableSpan, 2, 4, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        //文字顏色
        ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#FFFFFF"));
        spannableString.setSpan(colorSpan,5, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        //文字背景顏色
        BackgroundColorSpan bgColorSpan = new BackgroundColorSpan(Color.parseColor("#009ad6"));
        spannableString.setSpan(bgColorSpan, 5, 8, Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
        TextView textView = (TextView)findViewById(R.id.mode10);
        textView.setText(spannableString);
        textView.setMovementMethod(LinkMovementMethod.getInstance());
    }
例子中將ImageSpan、 ClickableSpan、 ForegroundColorSpan、BackgroundColorSpan 進行了組合使用,大家可以根據自己的需求,來隨意搭配。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章