EditText实现标签显示样式优化

在前面中讲过一篇怎么在<a href="http://www.jianshu.com/p/67543f129a15">EditText中实现空格标签的效果</a>
这里就是基于上篇的文章优化标签（之前实现很丑，所以不能忍），之前文章末尾提过优化还是在SpannableString上面做处理，它可以针对同一段文本显示出不同的文字样式，具体的需要自己去官网查看或者自行百度（这不是我们的重点）。
今天要说的就是通过setSpan可以实现高度定制化的ReplacementSpan，实现可以设置圆角，以及标签字体的颜色，字体的内边距等定制。
1.ReplacementSpan是一个抽象类，所以不能直接使用，需要我们自己实现，首先创建我们自定义的类：

package com.tangyx.home.factory;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.text.style.ReplacementSpan;

/**
 * Created by tangyx on 2016/12/13.
 *
 */

public class RadiusSpan extends ReplacementSpan {
    /**
     * 需要设置span的宽度
     */
    private int mSize;
    /**
     * 背景颜色
     */
    private int mBackgroundColor;
    /**
     * 字体颜色
     */
    private int mTextColor;
    /**
     * 圆角
     */
    private int mRadius;
    /**
     * 设置左右内边距
     * 默认2
     */
    private int mPaddingLR=2;
    /**
     * 设置上下边距
     */
    private int mPaddingTB=2;

    /**
     * @param backgroundColor  背景颜色
     * @param radius 圆角半径
     */
    public RadiusSpan(int backgroundColor, int textColor,int radius) {
        this.mBackgroundColor = backgroundColor;
        this.mTextColor = textColor;
        this.mRadius = radius;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        //根据传入起始截至位置获得截取文字的宽度，最后加上左右两个圆角的半径得到span宽度
        mSize = (int) (paint.measureText(text,start,end) + mPaddingLR * mRadius);
        return mSize;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        paint.setColor(mBackgroundColor);//设置背景颜色
        paint.setAntiAlias(true);// 设置画笔的锯齿效果
        RectF oval = new RectF(x, y + paint.ascent(),x + mSize,y + paint.descent()+mPaddingTB);
        //设置文字背景矩形，
        // x为span其实左上角相对整个TextView的x值，
        // y为span左上角相对整个View的y值。
        // paint.ascent()获得文字上边缘，paint.descent()获得文字下边缘
        canvas.drawRoundRect(oval, mRadius, mRadius, paint);
        paint.setColor(mTextColor);
        //绘制文字
        canvas.drawText(text, start, end, x + mRadius * mPaddingLR / 2 , y+mPaddingTB/2, paint);
    }

    public int getPaddingLR() {
        return mPaddingLR;
    }

    public void setPaddingLR(int mPaddingLR) {
        this.mPaddingLR = mPaddingLR;
    }

    public int getPaddingTB() {
        return mPaddingTB;
    }

    public void setPaddingTB(int mPaddingTB) {
        this.mPaddingTB = mPaddingTB;
    }
}

2.内容简单明确，就是主要通过实现draw方法来绘制需要的样式，主要实现两个主要的方法：

Paste_Image.png

getSize这里就是告诉span需要的宽度，明白一点就是标签的宽度，这里的计算方式，就是空格分割出来每段文字的宽度加上左右内边距的间距以及圆角需要的空间，自己可以通过代码测试。

Paste_Image.png

draw就是主要显示文本内容和文本的背景绘制，关于canvas的使用这里就不详细说，因为它也是一个很重要的类，平时大部分自定义的控件都需要用到，以后可能我会单独写一些关于canvas的使用，这里就简单说一下
首先设置画笔Paint的颜色绘制背景，一定按照顺序绘制，不然你会看不见文本内容，（请自行百度canvas画布原理）。
RectF设置矩形的高宽，第一个参数起点x的位置，第二个参数起点y的位置，第三个参数x线结束的位置，第四个参数y结束的位置，最后可以想象一下四点连接就是一个矩形，
canvas.drawRoundRect把矩形绘制到画布上，背景就绘制结束了，然后修改画笔颜色为字体颜色进行文本内容绘制，这里的文本内容就是每个标签的内容。
canvas.drawText把文字绘制到画布上，这样字体就在矩形的上面，保证字体能够看见。
修改onSetSpan方法：

Paste_Image.png device-2016-12-13-125125.png

如果EditText标签内容超过一行了 为了美观需要设置
android:lineSpacingExtra="10dp"

device-2016-12-13-170609.png

总结：通过继承ReplacementSpan就能实现在一段文本上随心所欲的定制自己的任何样式，包括图片也能画上去，canvas可以绘制很多东西，所以canvas是前往超神之路必须要掌握的。