SpannableString 你應(yīng)該知道的那些效果顯示

一個人需要隱藏多少秘密才能巧妙地度過一生 — 倉央嘉措

前言

上次看到一款學(xué)習的 App，有這樣一個功能，在一個 TextView 中有一段英文，點擊英文單詞通過語音朗讀出來。語音先不考慮，怎么去實現(xiàn) TextView 點擊獲取每個單詞的內(nèi)容的呢？

肯定是用SpannableString去實現(xiàn)的唄，不然你今天講它干嘛。嘿嘿，我說的對不對？

答案是肯定的，由于慣性我們先來看看效果圖：

sp

我這里沒有獲取每個單詞，而是獲取的每段句子。效果圖上也展示了一些其他的SpannableString效果，大多數(shù)可能你已經(jīng)見過了。那么你肯定會問SpannableString是什么，SpannableString是一種字符串類型，可以通過使用其方法setSpan方法實現(xiàn)字符串各種形式風格的顯示。

具體案例

setSpan方法預(yù)覽：

setSpan(Object what, int start, int end, int flags)
  • what ： 文本格式，可以設(shè)置成前景色，背景色，下劃線，中劃線，模糊等
  • start ： 字符串設(shè)置格式的起始下標
  • end ： 字符串設(shè)置格式結(jié)束下標
  • flags ： 標識

flags 常用的幾種屬性：

  • Spanned.SPAN_INCLUSIVE_EXCLUSIVE 從起始下標到結(jié)束下標，包括起始下標不包含結(jié)束坐標
  • Spanned.SPAN_EXCLUSIVE_EXCLUSIVE 從起始下標到結(jié)束下標，但都不包括起始下標和結(jié)束下標
  • Spanned.SPAN_INCLUSIVE_INCLUSIVE 從起始下標到終了下標，同時包括起始下標和結(jié)束下標
  • Spanned.SPAN_EXCLUSIVE_INCLUSIVE 從起始下標到終了下標，包括結(jié)束下標不包含起始坐標

TextView點擊獲取部分內(nèi)容

首先我們先來看TextView點擊獲取部分內(nèi)容，對TextView設(shè)置Spannable，設(shè)置每段單詞的響應(yīng)方法getEachParagraph()

 testText.setText(getResources().getString(R.string.text), TextView.BufferType.SPANNABLE);
 getEachParagraph(testText);
 testText.setMovementMethod(LinkMovementMethod.getInstance());

點擊響應(yīng)方法getEachParagraph()：

//paragraph
public void getEachParagraph(TextView textView) {
    Spannable spans = (Spannable) textView.getText();
    Integer[] indices = getIndices(
            textView.getText().toString().trim(), ',');
    int start = 0;
    int end = 0;
    // recycle
    for (int i = 0; i <= indices.length; i++) {
        ClickableSpan clickSpan = getClickableSpan();
       //setspan
        end = (i < indices.length ? indices[i] : spans.length());
        spans.setSpan(clickSpan, start, end,
                Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        start = end + 1;
    }
    //改變選中文本的高亮顏色
    textView.setHighlightColor(Color.BLUE);
}

//click
private ClickableSpan getClickableSpan() {
    return new ClickableSpan() {
        @Override
        public void onClick(View widget) {
            TextView tv = (TextView) widget;
            String s = tv
                    .getText()
                    .subSequence(tv.getSelectionStart(),
                            tv.getSelectionEnd()).toString();
            Log.e("onclick--:", s);
        }
        @Override
        public void updateDrawState(TextPaint ds) {
            ds.setColor(Color.BLACK);
            ds.setUnderlineText(false);
        }
    };
}

//array
public static Integer[] getIndices(String s, char c) {
        int pos = s.indexOf(c, 0);
        List<Integer> indices = new ArrayList<Integer>();
        while (pos != -1) {
            indices.add(pos);
            pos = s.indexOf(c, pos + 1);
        }
        return (Integer[]) indices.toArray(new Integer[0]);
    }

首先將TextView內(nèi)容轉(zhuǎn)換為Spannable對象；然后通過getIndices方法將文本內(nèi)容通過字符c獲取每段索引數(shù)組；然后為每段添加ClickableSpan；最后onClick方法里面獲取每段內(nèi)容。

前景色ForegroundColorSpan

前景色等同于setTextColor，具體實現(xiàn)如下：

SpannableString spannableString = new SpannableString("設(shè)置文字的前景色");
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#0099EE"));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
mTv.setText(spannableString);

看看效果展示：

sp

起始下標包含5，結(jié)束下標spannableString長度不包含。

背景色BackgroundColorSpan

背景色等同于setBackgroundColor，具體實現(xiàn)如下：

SpannableString spannableString = new SpannableString("設(shè)置文字的背景色");
BackgroundColorSpan colorSpan = new BackgroundColorSpan(Color.parseColor("#AC00FF30"));
spannableString.setSpan(colorSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

效果圖展示：

sp

RelativeSizeSpan

先來看看效果圖：

sp

我還清晰的記得剛開始做項目那會，做出這樣的效果圖需要2個TextView，9月一個；22日一個，現(xiàn)在想想真憋屈，要是相對字體大小在文本中間我不是要3個TextView，那真的要崩潰。

接著看看具體實現(xiàn)：

 SpannableString spannableString = new SpannableString("9月22日");
 RelativeSizeSpan sizeSpan = new RelativeSizeSpan(2.0f);
 spannableString.setSpan(sizeSpan, 0, 2, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
 mTv.setText(spannableString);

中劃線StrikethroughSpan

中劃線用得比較多的就是過時的價格，看看它的具體實現(xiàn)：

方法一：

SpannableString spannableString = new SpannableString("我是文本中劃線");
StrikethroughSpan strikethroughSpan = new StrikethroughSpan();
spannableString.setSpan(strikethroughSpan, 3, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

方法二：


  mTv.getPaint().setFlags(Paint.STRIKE_THRU_TEXT_FLAG | Paint.ANTI_ALIAS_FLAG);  // 設(shè)置中劃線并加清晰

我們可以通過調(diào)用mTv.getPaint().setFlags(0); // 取消設(shè)置的的劃線

效果圖登場：

sp

下滑線UnderlineSpan

實現(xiàn)下滑線也有兩種方法，同上：

方法一：


SpannableString spannableString = new SpannableString("我是文本下劃線");
UnderlineSpan underlineSpan = new UnderlineSpan();
spannableString.setSpan(underlineSpan, 4, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

方法二：


 mTv.getPaint().setFlags(Paint.UNDERLINE_TEXT_FLAG); //下劃線

效果圖奉上：

sp

上標SuperscriptSpan

上標加上前景色可以設(shè)計出未讀消息效果，我們一起來看看它的實現(xiàn)：


SpannableString spannableString = new SpannableString("你有新消息了" + "●");
SuperscriptSpan superscriptSpan = new SuperscriptSpan();
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.parseColor("#FF0000"));
spannableString.setSpan(colorSpan, 6, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(superscriptSpan, 6, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

以前看看文本未讀消息感覺很高大上，還在苦苦追尋是怎么實現(xiàn)的，其實它非常easy下標還可以用于數(shù)學(xué)公式。

效果圖：

sp

下標SubscriptSpan

當然有了上標就會出現(xiàn)下標：


SpannableString spannableString = new SpannableString("注釋1");
SubscriptSpan subscriptSpan = new SubscriptSpan();
spannableString.setSpan(subscriptSpan, 2, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

效果圖：

sp

設(shè)置風格（粗體、斜體）StyleSpan

直接上代碼：


SpannableString spannableString = new SpannableString("為文字設(shè)置粗體,斜體風格");
StyleSpan styleSpan_B = new StyleSpan(Typeface.BOLD);
StyleSpan styleSpan_I = new StyleSpan(Typeface.ITALIC);
spannableString.setSpan(styleSpan_B, 5, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(styleSpan_I, 8, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

效果圖貼上：

sp

ImageSpan

做過IM相關(guān)需求的童鞋，都對這個不會陌生，它的身影在聊天App軟件中隨處可見：


SpannableString spannableString = new SpannableString("在文本中添加xx");
Drawable drawable = getResources().getDrawable(R.drawable.mini_face_nine);
int drawHeight = drawable.getMinimumHeight();
drawable.setBounds(0, 0, drawHeight, drawHeight);
ImageSpan imageSpan = new ImageSpan(drawable);
spannableString.setSpan(imageSpan, 6, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

setBounds方法設(shè)置圖片的邊框大小，使圖片與文本居中對齊。

效果圖一覽：

sp

ClickableSpan

從名字上就可以知道和點擊響應(yīng)相關(guān)的：


SpannableString spannableString = new SpannableString("為文字設(shè)置點擊事件");
spannableString.setSpan(new ClickableSpan() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "你點擊了我", Snackbar.LENGTH_SHORT).show();
        Uri uri = Uri.parse("http://www.baidu.com");
        Intent intent = new Intent(Intent.ACTION_VIEW, uri);
        intent.putExtra(Browser.EXTRA_APPLICATION_ID, _mActivity.getPackageName());
        try {
            _mActivity.startActivity(intent);
        } catch (ActivityNotFoundException e) {
            Log.e("--ClickableSpan--", "Actvity was not found for intent, " + intent.toString());
        }
    }
    @Override
    public void updateDrawState(TextPaint ds) {
        ds.setColor(Color.parseColor("#abc123"));
        ds.setUnderlineText(true);
    }
}, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setMovementMethod(LinkMovementMethod.getInstance());
mTv.setHighlightColor(Color.parseColor("#abc123"));
mTv.setText(spannableString);

為文本設(shè)置點擊事件并且跳轉(zhuǎn)網(wǎng)址。

效果圖：

sp

URLSpan

URLSpan跳轉(zhuǎn)網(wǎng)址：


SpannableString spannableString = new SpannableString("為文字設(shè)置超鏈接");
URLSpan urlSpan = new URLSpan("http://www.baidu.com/");
spannableString.setSpan(urlSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setMovementMethod(LinkMovementMethod.getInstance());
mTv.setHighlightColor(Color.parseColor("#ff0000"));
mTv.setText(spannableString);

效果圖：

sp

模糊BlurMaskFilter

比較簡單的用法，直接上代碼：


SpannableString spannableString = new SpannableString("為文字設(shè)置模糊");
MaskFilterSpan maskFilterSpan = new MaskFilterSpan(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));
spannableString.setSpan(maskFilterSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);

mTv.setText(spannableString);

構(gòu)造方法：


BlurMaskFilter(float radius, Blur style)
  • radius 模糊半徑
  • style 風格

style為枚舉類型：

BlurMaskFilter.Blur.NORMAL 默認類型，模糊內(nèi)外邊界

sp

BlurMaskFilter.Blur.INNER 內(nèi)部模糊

sp

BlurMaskFilter.Blur.OUTER 外部模糊

sp

BlurMaskFilter.Blur.SOLID 在邊界內(nèi)繪制固體，模糊

sp

浮雕EmbossMaskFilter


SpannableString spannableString = new SpannableString("為文字設(shè)置浮雕");
MaskFilterSpan maskFilterSpan = new MaskFilterSpan(
        new EmbossMaskFilter(new float[]{10, 10, 10}, 0.5f, 1f, 1f));
spannableString.setSpan(maskFilterSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

構(gòu)造方法：

/**
     * Create an emboss maskfilter
     *
     * @param direction  array of 3 scalars [x, y, z] specifying the direction of the light source
     * @param ambient    0...1 amount of ambient light
     * @param specular   coefficient for specular highlights (e.g. 8)
     * @param blurRadius amount to blur before applying lighting (e.g. 3)
     * @return           the emboss maskfilter
     */
    public EmbossMaskFilter(float[] direction, float ambient, float specular, float blurRadius)

//direction 是float數(shù)組，定義長度為3的數(shù)組標量[x,y,z]，來指定光源的方向
// ambient 取值在0到1之間，定義背景光 或者說是周圍光
// specular 定義鏡面反射系數(shù)。
// blurRadius 模糊半徑。

效果圖：

sp

光柵LayerRasterizer


SpannableString spannableString = new SpannableString("為文字設(shè)置光柵");
LayerRasterizer layerRasterizer = new LayerRasterizer();
layerRasterizer.addLayer(new Paint(Color.CYAN), 10, 10);
RasterizerSpan rasterizerSpan = new RasterizerSpan(layerRasterizer);
spannableString.setSpan(rasterizerSpan, 5, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
mTv.setText(spannableString);

addLayer方法：


addLayer(Paint paint, float dx, float dy) //dx,dy便宜位置

效果圖：

sp

看了這么多效果，你應(yīng)該知道的這些效果顯示。

后續(xù)

String有StringBuilder用于字符串的拼接；那么SpannableString也有SpannableStringBuilder用于拼接SpannableString，可以把各種風格效果拼接在一起。

當然文中有什么描述錯誤，不當?shù)牡胤?，還請指出，歡迎關(guān)注后續(xù)博客交流，謝謝大家。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容