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