基于TextView 实现标签化TextLabel及图文混排

TextView 是我们最常用的View,经常使用它进行显示文字，但使用TextView来显示图片变显的不那么方便了,为此我们需要实现可用于处理要需要格式化TextView、可设置图片、文字的颜色，尺寸，及可点击的事件、简单的图文混排的TextView.

效果图

格式化需求

开发中常要使用文字组合来填充TextView，如金额：100元而经常变动的是TextView100数字这部分文字，并非全部的文字。这种场景下，标签化TextView十分必要。在没引入标签化之前对于这种需求我们需要格式化字串然后设置到TextView中。

//xml中的TextView

//设置文字
setText(String.format("金额：%1$S元","100"))

经常写格式化这部分代码，不适合聪明（懒惰）的你的设定，于是我们可以把格式这部分代码固定到TextView的xml中，然后实现setTextFormat()方法使用xml中的format字段去格式化字符再设置到TextView中，如下：

//xml中的标签化的TextView

    
//设置文字
setTextFormat("100")

标签固定化

这里我们通过标签化基本上可以解决一部分这种需要求，但产品经理说我觉得这应该在金额后面加上个vip图标（金额: 假装vip图标 100元）
如果要实现这种加图标的需求，至少我们会在再增加一个TextView 到布局中，格式化的文字也要更改。像这样：

//xml 增加vip图标

    
    


//格式化文字改变。
textView.setText(String.format("：%1$s元"),"100)

小小的需求，我们至少要变动两个地方的代码,我的需求屏蔽这种变动，我们知道TextView 其实可以用SpannableString和ImageSpan设置图文的。我们可以尝试封装一个固定的头和尾部到TextView中，通过头部与尾部和中间文字的组合来屏蔽这种变动，于是我们可像下面这样写代码。

//xml中的标签化的TextView

    
//设置文字
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