TextView 是我们最常用的View,经常使用它进行显示文字，但使用TextView来显示图片变显的不那么方便了,为此我们需要实现可用于处理要需要格式化TextView、可设置图片、文字的颜色，尺寸，及可点击的事件、简单的图文混排的TextView.
效果图
格式化需求
开发中常要使用文字组合来填充TextView，如金额：100元而经常变动的是TextView100数字这部分文字，并非全部的文字。这种场景下，标签化TextView十分必要。在没引入标签化之前对于这种需求我们需要格式化字串然后设置到TextView中。
//xml中的TextView
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
//设置文字
setText(String.format("金额：%1$S元","100"))
经常写格式化这部分代码，不适合聪明（懒惰）的你的设定，于是我们可以把格式这部分代码固定到TextView的xml中，然后实现setTextFormat()方法使用xml中的format字段去格式化字符再设置到TextView中，如下：
//xml中的标签化的TextView
<cn.ymex.view.label.TextLabel
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:format="金额：%1$s元" />
//设置文字
setTextFormat("100")
标签固定化
这里我们通过标签化基本上可以解决一部分这种需要求，但产品经理说我觉得这应该在金额后面加上个vip图标（金额: 假装vip图标 100元）
如果要实现这种加图标的需求，至少我们会在再增加一个TextView 到布局中，格式化的文字也要更改。像这样：
//xml 增加vip图标
<LinearLayout
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:text="金额"
android:drawableRight="@mipmap/ic_vip"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
//格式化文字改变。
textView.setText(String.format("：%1$s元"),"100)
小小的需求，我们至少要变动两个地方的代码,我的需求屏蔽这种变动，我们知道TextView 其实可以用SpannableString和ImageSpan设置图文的。我们可以尝试封装一个固定的头和尾部到TextView中，通过头部与尾部和中间文字的组合来屏蔽这种变动，于是我们可像下面这样写代码。
//xml中的标签化的TextView
<cn.ymex.view.label.TextLabel
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="100"
app:startDrawable="@mipmap/ic_vip"
app:startDrawableInLast="true"
app:startDrawableSize="24dp"
app:endText="元"
app:startText=" 金额：" />
//设置文字
setText("100")
SpanCell与文字事件
我们偶尔会遇到那种部分文字改变颜色和部分文字可点击。对于这种需求我们经常是通过textView组合或使用设置html代码来实现。
通过上面的种种对于文字与图片需求，归根是一种对于图文和文字排序的问题，是的，表象下隐藏的东西就这么明显。图片文字组合变化不外乎两种，图片在前文字在后 或文字在前图片在后。 于我们把图片和文字放在一块，这就是SpanCell。SpaaCell由一个文字单元和一个图片单元组成。一个图片单元只能放一张图片，文字单元实现了对文字设置颜色，大小，事件等。
所以对于文字点击的需求变的再简单不过。
SpanCell spanCell = SpanCell.build()
.textColor(Color.parseColor("#887acc"))
.text("《用户协议》");
spanCell.setClickableSpan(new SpanCell.OnClickListener() {
@Override
public void onClick(View view, SpanCell spanCell) {
//... 事件处理
}
});
textLabel.setText(spanCell);
TextView使用Spancell
普通的TextView 是可以使用Spancell 的，但注意的是如果 是ListView中的TextView使用Spancell,会有事件冲突的问题（使用TextLabel代替就能解决）。
SpanCell spanCell = SpanCell.build()
.textColor(Color.parseColor("#887acc"))
.text("《用户协议》");
spanCell.setClickableSpan(new SpanCell.OnClickListener() {
@Override
public void onClick(View view, SpanCell spanCell) {
//... 事件处理
}
});
//textview 设置 spanCell
textView.setText(spanCell.getSpannable());
图文混排
有SpanCell,我们只要组合多个SpanCell，那么这可实现基于的混排效果。
ImageSpannable forgimg = new ImageSpannable(context, R.mipmap.frog);
SpanCell span1 = SpanCell.build()
.text("一只小青蛙")
.imageSpanInLast(true)
.imageSpan(forgimg);
ImageSpannable deerimg = new ImageSpannable(context, R.mipmap.deer);
SpanCell span2 = SpanCell.build()
.text(",发现了一只受伤的小鹿")
.imageSpan(deerimg)
.imageSpanInLast(true);
ImageSpannable hippoimg = new ImageSpannable(context, R.mipmap.hippo, ImageSpannable.ALIGN_FONTCENTER);
hippoimg.setSize(64,64);
SpanCell span3 = SpanCell.build()
.text("于是它去寻求小牛")
.imageSpanInLast(true)
.imageSpan(hippoimg);
ImageSpannable owlimg = new ImageSpannable(context, R.mipmap.owl, ImageSpannable.ALIGN_FONTCENTER);
owlimg.setSize(160, 160);
SpanCell span4 = SpanCell.build()
.imageSpanInLast(true).
text("的帮助。小牛说，不帮不帮就不帮。。于是小青蛙又去向其他 动物寻求帮助。于是它找到了猫头鹰").imageSpan(owlimg);
SpanCell span5 = SpanCell.build()
.text(",于是他们一起愉快的喝可乐 ！呵呵");
textLabel.setText(span1,span2,span3,span4,span5);
总结：
TextLabel 虽然实现能应对图文排序的变化，但还是保留了一个固定的头片段（spancell）和一个尾片段及其他便利的特性。这样做的目的是方便有固定化标签、格式化的场景。这些设计都是无痛的，只要你愿意，完全可使用TextLabel代替TextView。
GitHub源码地址：github.com/ymex/textlabel
网友评论