Android中SpannableString學習以及實現自定義TextView的顯示更多（展開）和收起功能

基礎知識的學習

屬性學習

SpannableString和String一樣，都是字符串類型，TextView可以設置SpannableString作爲顯示文本，不同的是SpannableString可以通過使用其方法setSpan方法實現字符串各種形式風格的顯示,關鍵是可以指定設置的區間。

void setSpan (Object what, int start, int end, int flags)

函數意義：給SpannableString或SpannableStringBuilder特定範圍的字符串設定Span樣式，可以設置多個（比如同時加上下劃線和刪除線等），Falg參數標識了當在所標記範圍前和標記範圍後緊貼着插入新字符時的動作，即是否對新插入的字符應用同樣的樣式。

end - start 爲渲染的長度

參數說明：

object what ：對應的各種Span，後面會提到；
int start：開始應用指定Span的位置，索引從0開始
int end：結束應用指定Span的位置，特效並不包括這個位置。比如如果這裏數爲10（即第10個字符），第10個字符不會有任何特效。
int flags：取值有如下四個
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前後都不包括，即在指定範圍的前面和後面插入新字符都不會應用新樣式
Spannable.SPAN_EXCLUSIVE_INCLUSIVE ：前面不包括，後面包括。即僅在範圍字符的後面插入新字符時會應用新樣式
Spannable.SPAN_INCLUSIVE_EXCLUSIVE ：前面包括，後面不包括。
Spannable.SPAN_INCLUSIVE_INCLUSIVE ：前後都包括。

將TextView中的文本（Android）設置成其他顏色（前景色）

 private void setContent() {
        int color = getResources().getColor(R.color.colorPrimary);
        SpannableString txt = new SpannableString("學習Android很快樂!");
        txt.setSpan(new ForegroundColorSpan(color), 3, 10, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        tvTitle.setText(txt);
    }

將TextView中的文本（Android）設置成其（背景色）

 private void setContent() {
        int color = getResources().getColor(R.color.colorPrimary);
        SpannableString txt = new SpannableString("學習Android很快樂!");
        txt.setSpan(new BackgroundColorSpan(color), 3, 10, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        tvTitle.setText(txt);
    }

設置TextView中文本字體的相對大小(RelativeSizeSpan)

private void setContent() {
    SpannableString txt = new SpannableString("學習Android很快樂!");
    RelativeSizeSpan sizeSpan01 = new RelativeSizeSpan(1.2f);
    RelativeSizeSpan sizeSpan02 = new RelativeSizeSpan(1.4f);
    RelativeSizeSpan sizeSpan03 = new RelativeSizeSpan(1.6f);
    RelativeSizeSpan sizeSpan04 = new RelativeSizeSpan(1.8f);
    RelativeSizeSpan sizeSpan05 = new RelativeSizeSpan(1.6f);
    RelativeSizeSpan sizeSpan06 = new RelativeSizeSpan(1.4f);
    RelativeSizeSpan sizeSpan07 = new RelativeSizeSpan(1.2f);

    txt.setSpan(sizeSpan01, 3, 4, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    txt.setSpan(sizeSpan02, 4, 5, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    txt.setSpan(sizeSpan03, 5, 6, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    txt.setSpan(sizeSpan04, 6, 7, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    txt.setSpan(sizeSpan05, 7, 8, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    txt.setSpan(sizeSpan06, 8, 9, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    txt.setSpan(sizeSpan07, 9, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
    textView.setText(txt);
}

爲TextView中的的特定文本添加刪除線(StrikethroughSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂!");
spannableString.setSpan(new StrikethroughSpan(), 3, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(txt);
}

爲TextView中的的特定文本添加下劃線(StrikethroughSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂!");
spannableString.setSpan(new UnderlineSpan(), 3, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(txt);
}

爲TextView中的的特定文本添加上標(SuperscriptSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂*");
spannableString.setSpan(new SuperscriptSpan(), txt.length()-1, txt.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(txt);
}

notes:可用於實現2^2等特殊符號

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂*");
spannableString.setSpan(new SuperscriptSpan(), txt.length()-1, txt.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(txt);
}

爲TextView中的的特定文本添加下標(SubscriptSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂*");
spannableString.setSpan(new SubscriptSpan(), txt.length()-1, txt.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(txt);
}

爲TextView中的的特定文本設置字體風格(StyleSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂*");
StyleSpan styleSpan_B  = new StyleSpan(Typeface.BOLD);//粗體
StyleSpan styleSpan_I  = new StyleSpan(Typeface.ITALIC);//斜體
spannableString.setSpan(styleSpan_B , 3, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
spannableString.setSpan(styleSpan_I, txt.length()-3, txt.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setHighlightColor(Color.parseColor("#36969696"));
textView.setText(txt);
}

讓TextView的文本附帶圖標表情(StyleSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂*");
Drawable drawable = getResources().getDrawable(R.mipmap.f4);
drawable.setBounds(0, 0, 42, 42);
ImageSpan imageSpan = new ImageSpan(drawable);
spannableString.setSpan(new ImageSpan(drawable), txt.length()-1, txt.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(txt);
}

讓TextView附帶可點擊文本(ClickableSpan)

private void setContent() {
final SpannableString mSpanALL = new SpannableString("學習Android很快樂*");
        mSpanALL.setSpan(new ClickableSpan() {
            @Override
            public void updateDrawState(TextPaint ds) {
                super.updateDrawState(ds);
                ds.setColor(textView.getResources().getColor(R.color.colorPrimary));
                ds.setAntiAlias(true);
                ds.setUnderlineText(false);
            }

            @Override
            public void onClick(View widget) {
                //添加你想要的點擊處理

        }, 3, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
 }

讓TextView具有附帶超鏈接的功能(URLSpan)

private void setContent() {
SpannableString txt = new SpannableString("學習Android很快樂*");
spannableString.setSpan(new URLSpan("https://developers.google.cn/"), 3, 10, Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setMovementMethod(LinkMovementMethod.getInstance());
textView.setHighlightColor(Color.parseColor("#b0b0b0"));
textView.setText(txt);
}

notes：SpannableString同樣有SpannableStringBuilder，可使用append()方法實現字符串拼接。

更多基礎知識可參考

http://www.jianshu.com/p/84067ad289d2

自定義TextView控件關鍵代碼的解讀

通過傳入一個TextView及其寬度，然後獲得任意一行最末那個字符的下標如果傳入的文字不到最大行數限制，那麼就返回-1，這個函數一定要在主線程進行執行

/**
     * 返回最大行數限制的最後一個字符的下標，如果沒有達到限制則返回 - 1
     * @param textView textView控件
     * @param content 文本內容
     * @param width 寬度
     * @param maxLine 最大限制行數
     * @return 返回最大行數限制最後一個字符下標
     */
    public static int getLastCharIndexForLimitTextView(TextView textView, String content, int width, int maxLine){
        TextPaint textPaint  = textView.getPaint();
        StaticLayout staticLayout = new StaticLayout(content, textPaint, width, Layout.Alignment.ALIGN_NORMAL, 1, 0, false);
        if(staticLayout.getLineCount()>maxLine) return staticLayout.getLineStart(maxLine) - 1;//達到
        else return -1;//未達到
    }

實現原理

主要實現的功能：

1.當字數超過一定數量顯示 顯示更多

2.當行數超過一定數量顯示 顯示更多

3.顯示更多點擊後，文本顯示在正文後面

4.添加收起功能顯示在展開後文本的最後

實現步驟

1、首先判斷要處理段落的字數是否超過限制，如果超過就在後面綴上“顯示更多”；

2、判斷要處理段落在某個TextView上完整顯示的行數，如果行數超過限制，那麼就顯示“顯示全部”；

3、使用SpannableString，構造：削減後的段落+“…顯示更多”。然後將最後“…顯示更多”這個字使用ClickableSpan設置上點擊事件；

4.通過SpnnableString的clickSpannable方法的相互嵌套觸發TextView的onClickListener事件從而實現展開和收起功能。

自定義控件的實現

package com.example.glidetest;

import android.content.Context;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatTextView;
import android.text.Layout;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.text.method.LinkMovementMethod;
import android.text.style.ClickableSpan;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

/**
 * 作者:geminiyang on 2017/6/4.
 * 郵箱:[email protected]
 * github地址：https://github.com/geminiyang/ShareTransilation
 */

public class MySpannableTextView extends AppCompatTextView {

    public MySpannableTextView(Context context) {
        super(context,null);
    }

    public MySpannableTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        limitTextViewString(this.getText().toString(), 140, this, new OnClickListener() {
            @Override
            public void onClick(View v) {
                //設置監聽函數
            }
        });
    }


    /**
     * get the last char index for max limit row,if not exceed the limit,return -1
     * @param textView
     * @param content
     * @param width
     * @param maxLine
     * @return
     */
    private int getLastCharIndexForLimitTextView(TextView textView, String content, int width, int maxLine){
        TextPaint textPaint  = textView.getPaint();
        StaticLayout staticLayout = new StaticLayout(content, textPaint, width, Layout.Alignment.ALIGN_NORMAL, 1, 0, false);
        if(staticLayout.getLineCount()>maxLine) return staticLayout.getLineStart(maxLine) - 1;//exceed
        else return -1;//not exceed the max line
    }

    /**
     * 限制TextView顯示字符字符，並且添加showMore和show more的點擊事件
     * @param textString
     * @param textView
     * @param clickListener textView的點擊監聽器
     */
    private void limitTextViewString(String textString, int maxFirstShowCharCount,final TextView textView, final View.OnClickListener clickListener) {
    //計算處理花費時間
        final long startTime = System.currentTimeMillis();
        if(textView==null)return;
        int width = textView.getWidth();//在recyclerView和ListView中，由於複用的原因，這個TextView可能以前就畫好了，能獲得寬度
        if(width==0) width = 1000;//獲取textView的實際寬度，這裏可以用各種方式（一般是dp轉px寫死）填入TextView的寬度
        int lastCharIndex = getLastCharIndexForLimitTextView(textView,textString,width,10);
//返回-1表示沒有達到行數限制
        if(lastCharIndex<0 && textString.length() <= maxFirstShowCharCount) {
            //如果行數沒超過限制
            textView.setText(textString);
            return;
        }
        //如果超出了行數限制
        textView.setMovementMethod(LinkMovementMethod.getInstance());//this will deprive the recyclerView's focus
        if(lastCharIndex>maxFirstShowCharCount || lastCharIndex<0) {
            lastCharIndex=maxFirstShowCharCount;
        }
        //構造spannableString
        String explicitText = null;
        String explicitTextAll;
        if(textString.charAt(lastCharIndex)=='\n'){//manual enter
            explicitText = textString.substring(0,lastCharIndex);
        }else if(lastCharIndex > 12){
            //如果最大行數限制的那一行到達12以後則直接顯示 顯示更多
            explicitText = textString.substring(0,lastCharIndex-12);
        }
        int sourceLength = explicitText.length();
        String showMore = "顯示更多";
        explicitText = explicitText + "..." + showMore;
        final SpannableString mSpan = new SpannableString(explicitText);


        String dismissMore = "收起";
        explicitTextAll = textString + "..." + dismissMore;
        final SpannableString mSpanALL = new SpannableString(explicitTextAll);
        mSpanALL.setSpan(new ClickableSpan() {
            @Override
            public void updateDrawState(TextPaint ds) {
                super.updateDrawState(ds);
                ds.setColor(textView.getResources().getColor(R.color.colorPrimary));
                ds.setAntiAlias(true);
                ds.setUnderlineText(false);
            }

            @Override
            public void onClick(View widget) {
                textView.setText(mSpan);
                textView.setOnClickListener(null);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (clickListener != null)
                            textView.setOnClickListener(clickListener);//prevent the double click
                    }
                }, 20);
            }
        }, textString.length(), explicitTextAll.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

        mSpan.setSpan(new ClickableSpan() {
            @Override
            public void updateDrawState(TextPaint ds) {
                super.updateDrawState(ds);
                ds.setColor(textView.getResources().getColor(R.color.colorPrimary));
                ds.setAntiAlias(true);
                ds.setUnderlineText(false);
            }

            @Override
            public void onClick(View widget) {//"...show more" click event
                textView.setText(mSpanALL);
                textView.setOnClickListener(null);
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (clickListener != null)
                            textView.setOnClickListener(clickListener);//prevent the double click
                    }
                }, 20);
            }
        }, sourceLength, explicitText.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        //設置爲“顯示更多”狀態下的TextVie
        textView.setText(mSpan);



        Log.i("info", "字符串處理耗時" + (System.currentTimeMillis() - startTime) + " ms");
    }
}

使用方法

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <com.example.glidetest.MySpannableTextView
        android:id="@+id/tv"
         android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:text="@string/content"
        />

</LinearLayout>

實現效果