支持定義前后綴文字和文字顏色的TextView

MultipleTextView介紹

MultipleTextView是一個支持定義前后綴文字和文字顏色的TextView,效果圖如下：

其中，數(shù)字200的左邊文字是MultipleTextView的前綴,右邊文字是MultipleTextView的后綴,一般前綴后綴都是寫死的,你可以在xml里面定義前綴和后綴,也可以在代碼中修改前綴后綴

使用

在布局文件中，使用MultipleTextView，代碼如下：

 <com.jaychan.view.MultipleTextView
    android:id="@+id/multiple_text_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    app:prefixText="您消費了 : "
    app:prefixTextColor="#424242"
    app:contentText="200"
    app:contentTextColor="#ff0000"
    app:suffixText=" 元"
    app:suffixTextColor="#424242"/>

其中

prefixText: 前綴文字
prefixTextColor: 前綴文字顏色(若沒有設(shè)置,默認和內(nèi)容的顏色一樣)
contentText： 內(nèi)容文字
contentTextColor: 內(nèi)容文字顏色
suffixText： 后綴文字
suffixTextColor： 后綴文字顏色(若沒有設(shè)置,默認和內(nèi)容的顏色一樣)

在代碼中

MultipleTextView multipleTextView = (MultipleTextView) findViewById(R.id.multiple_text_view);

multipleTextView.setPrefixText("您消費了: "); //設(shè)置前綴文字
multipleTextView.setPrefixTextColor(Color.parseColor("#424242")); //設(shè)置前綴文字顏色
multipleTextView.setContentText("200");   //設(shè)置內(nèi)容文字
multipleTextView.setContentTextColor(Color.parseColor("#ff0000"));   //設(shè)置內(nèi)容文字顏色
multipleTextView.setSuffixText(" 元");  //設(shè)置后綴文字
multipleTextView.setSuffixTextColor(Color.parseColor("#424242")); //設(shè)置后綴文字顏色

源碼解析

MultipleTextView繼承TextView,自定義了一些屬性,主要有這些屬性:

 <declare-styleable name="MultipleTextView">

    <!--前綴文字-->
    <attr name="prefixText" format="string"/>
    <!--前綴文字顏色-->
    <attr name="prefixTextColor" format="color"/>

    <!--內(nèi)容文字-->
    <attr name="contentText" format="string"/>
    <!--內(nèi)容文字顏色-->
    <attr name="contentTextColor" format="color"/>

    <!--后綴文字-->
    <attr name="suffixText" format="string"/>
    <!--后綴文字顏色-->
    <attr name="suffixTextColor" format="color"/>

</declare-styleable>

在構(gòu)造方法中接收這些屬性

public MultipleTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.MultipleTextView);

    prefixText = ta.getString(R.styleable.MultipleTextView_prefixText);  //前綴文字
    contentText = ta.getString(R.styleable.MultipleTextView_contentText);    //內(nèi)容文字
    suffixText = ta.getString(R.styleable.MultipleTextView_suffixText);  //后綴

    prefixTextColor = ta.getColor(R.styleable.MultipleTextView_prefixTextColor, getCurrentTextColor());  //前綴文字顏色,默認值為內(nèi)容文字的顏色
    contentTextColor = ta.getColor(R.styleable.MultipleTextView_contentTextColor, getCurrentTextColor());  //內(nèi)容文字顏色默認值為TextView默認的顏色
    suffixTextColor = ta.getColor(R.styleable.MultipleTextView_suffixTextColor, getCurrentTextColor()); //默認值為內(nèi)容文字的顏色,默認值為內(nèi)容文字的顏色

    ta.recycle();


    updateUI();
}

最主要的文字處理在updateUI這個方法里面

  private void updateUI() {

        if (builder == null) {
            builder = new SpannableStringBuilder();
        }


        if (!TextUtils.isEmpty(prefixText)) {  //前綴不為空
            SpannableString prefixSpannableString = new SpannableString(prefixText);
            
            //設(shè)置前綴文字顏色
            colorSpan = new ForegroundColorSpan(prefixTextColor);
            prefixSpannableString.setSpan(colorSpan, 0, prefixText.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
            
            //添加到builder
            builder.append(prefixSpannableString);
        }


        if (!TextUtils.isEmpty(contentText)) {   //內(nèi)容文字不為空
            SpannableString contentSpannableString = new SpannableString(contentText);
            
            //設(shè)置內(nèi)容文字顏色
            colorSpan = new ForegroundColorSpan(contentTextColor);
            contentSpannableString.setSpan(colorSpan, 0, contentText.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
            
            //添加到builder
            builder.append(contentSpannableString);
        }

        if (!TextUtils.isEmpty(suffixText)) {  //后綴不為空
            SpannableString suffixSpannableString = new SpannableString(suffixText);
            
            //設(shè)置后綴文字顏色
            colorSpan = new ForegroundColorSpan(suffixTextColor);
            suffixSpannableString.setSpan(colorSpan, 0, suffixText.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
            
            //添加到builder
            builder.append(suffixSpannableString);
        }

        setText(builder);
        builder.clear();
}

SpannableString ： Android系統(tǒng)通過這個類來對指定文本進行相關(guān)處理
在這里我們用它來定義前綴和后綴的顏色,

SpannableString的setSpan方法參數(shù)說明：

object what ：對應(yīng)的Span
int start：開始應(yīng)用指定Span的位置，索引從0開始
int end：結(jié)束應(yīng)用指定Span的位置，特效并不包括這個位置
int flags：取值有如下四個
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE：前后都不包括，即在指定范圍的前面和后面插入新字符都不會應(yīng)用新樣式
Spannable.SPAN_EXCLUSIVE_INCLUSIVE ：前面不包括，后面包括。即僅在范圍字符的后面插入新字符時會應(yīng)用新樣式
Spannable.SPAN_INCLUSIVE_EXCLUSIVE ：前面包括，后面不包括。
Spannable.SPAN_INCLUSIVE_INCLUSIVE ：前后都包括。

思路：把三部分文字用SpannableString來設(shè)置各自的顏色,然后通過SpannableStringBuilder來拼接，最后在setText方法中傳入SpannableStringBuilder

導(dǎo)入

在項目根目錄下的build.gradle中的allprojects{}中，添加jitpack倉庫地址，如下：

allprojects {
    repositories {
        jcenter()
        maven { url 'https://jitpack.io' }//添加jitpack倉庫地址
    }
}

打開app的module中的build.gradle，在dependencies{}中，添加依賴，如下：

dependencies {
    ......
     compile 'com.github.JayChan95318:MultipleTextView:1.0'
}  

github地址：https://github.com/JayChan95318/MultipleTextView.git