支持定义前后缀文字和文字颜色的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 :对应的Spanint 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