支持定義前后綴文字和文字顏色的TextView
MultipleTextView介紹
MultipleTextView是一個支持定義前后綴文字和文字顏色的TextView,效果圖如下:
其中,數字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: 前綴文字顏色(若沒有設置,默認和內容的顏色一樣)
contentText: 內容文字
contentTextColor: 內容文字顏色
suffixText: 后綴文字
suffixTextColor: 后綴文字顏色(若沒有設置,默認和內容的顏色一樣)
在代碼中
MultipleTextView multipleTextView = (MultipleTextView) findViewById(R.id.multiple_text_view);
multipleTextView.setPrefixText("您消費了: "); //設置前綴文字
multipleTextView.setPrefixTextColor(Color.parseColor("#424242")); //設置前綴文字顏色
multipleTextView.setContentText("200"); //設置內容文字
multipleTextView.setContentTextColor(Color.parseColor("#ff0000")); //設置內容文字顏色
multipleTextView.setSuffixText(" 元"); //設置后綴文字
multipleTextView.setSuffixTextColor(Color.parseColor("#424242")); //設置后綴文字顏色
源碼解析
MultipleTextView繼承TextView,自定義了一些屬性,主要有這些屬性:
<declare-styleable name="MultipleTextView">
<!--前綴文字-->
<attr name="prefixText" format="string"/>
<!--前綴文字顏色-->
<attr name="prefixTextColor" format="color"/>
<!--內容文字-->
<attr name="contentText" format="string"/>
<!--內容文字顏色-->
<attr name="contentTextColor" format="color"/>
<!--后綴文字-->
<attr name="suffixText" format="string"/>
<!--后綴文字顏色-->
<attr name="suffixTextColor" format="color"/>
</declare-styleable>
在構造方法中接收這些屬性
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); //內容文字
suffixText = ta.getString(R.styleable.MultipleTextView_suffixText); //后綴
prefixTextColor = ta.getColor(R.styleable.MultipleTextView_prefixTextColor, getCurrentTextColor()); //前綴文字顏色,默認值為內容文字的顏色
contentTextColor = ta.getColor(R.styleable.MultipleTextView_contentTextColor, getCurrentTextColor()); //內容文字顏色默認值為TextView默認的顏色
suffixTextColor = ta.getColor(R.styleable.MultipleTextView_suffixTextColor, getCurrentTextColor()); //默認值為內容文字的顏色,默認值為內容文字的顏色
ta.recycle();
updateUI();
}
最主要的文字處理在updateUI這個方法里面
private void updateUI() {
if (builder == null) {
builder = new SpannableStringBuilder();
}
if (!TextUtils.isEmpty(prefixText)) { //前綴不為空
SpannableString prefixSpannableString = new SpannableString(prefixText);
//設置前綴文字顏色
colorSpan = new ForegroundColorSpan(prefixTextColor);
prefixSpannableString.setSpan(colorSpan, 0, prefixText.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
//添加到builder
builder.append(prefixSpannableString);
}
if (!TextUtils.isEmpty(contentText)) { //內容文字不為空
SpannableString contentSpannableString = new SpannableString(contentText);
//設置內容文字顏色
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);
//設置后綴文字顏色
colorSpan = new ForegroundColorSpan(suffixTextColor);
suffixSpannableString.setSpan(colorSpan, 0, suffixText.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
//添加到builder
builder.append(suffixSpannableString);
}
setText(builder);
builder.clear();
}
SpannableString : Android系統通過這個類來對指定文本進行相關處理
在這里我們用它來定義前綴和后綴的顏色,
SpannableString的setSpan方法參數說明:
object what :對應的Span
int start:開始應用指定Span的位置,索引從0開始
int end:結束應用指定Span的位置,特效并不包括這個位置
int flags:取值有如下四個
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE:前后都不包括,即在指定范圍的前面和后面插入新字符都不會應用新樣式
Spannable.SPAN_EXCLUSIVE_INCLUSIVE :前面不包括,后面包括。即僅在范圍字符的后面插入新字符時會應用新樣式
Spannable.SPAN_INCLUSIVE_EXCLUSIVE :前面包括,后面不包括。
Spannable.SPAN_INCLUSIVE_INCLUSIVE :前后都包括。
思路:把三部分文字用SpannableString來設置各自的顏色,然后通過SpannableStringBuilder來拼接,最后在setText方法中傳入SpannableStringBuilder
導入
在項目根目錄下的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