基于TextView实现的SemiCircleRectView<热门标签>

前言

相信大家都在网上见过热门标签的View是长什么样子，此文章就带大家在Android上实现

效果图

看了上面的效果图后，可能有的同学就会有疑问了，这些效果，不都可以通过shape来实现吗？还用得着大动干戈来自定义一个控件吗？

这里说下实现这种背景的几种方式：.9图、shape、svg，当然还有我们这次要说的代码的灵活实现

大伙莫急，好说我也是有一点安卓开发经验的人，不会做这种无聊的事的，我们想想如下几个问题：
1. 一个shape能适配任何大小的View吗
2. 一个shape能实现不同颜色的背景吗
3. 一个shape能实现根据View的实际长与宽的情况来画吗
答案肯定是不能实现

实现思路

其实实现方式很简单，和shape一个意思，只是我们是动态根据情况来实现一个Drawable对象背景，所以我们主要工作就是实现一个我们想要的图形Drawable

实现背景Drawable对象

直接上实现代码，代码量并不多

class SemiCircleRectDrawable extends Drawable {
    private final Paint mPaint;
    private RectF rectF;

    public SemiCircleRectDrawable() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(backgroundColor);
    }

    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        if (rectF == null) {
            rectF = new RectF(left, top, right, bottom);
        } else {
            rectF.set(left, top, right, bottom);
        }
    }

    @Override
    public void draw(Canvas canvas) {
        float R = rectF.bottom / 2;
        if (rectF.right < rectF.bottom) {
            R = rectF.right / 2;
        }
        canvas.drawRoundRect(rectF, R, R, mPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        mPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {
        mPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSPARENT;
    }
}

mPaint.setColor(backgroundColor)这里的backgroundColor来自SemiCircleRectView自定义属性的值，默认为透明的。
SemiCircleRectDrawable主要两个方法：setBounds确定矩形大小,draw画圆角矩形
我们重点来分析下draw方法的实现

public void draw(Canvas canvas) {
    float R = rectF.bottom / 2;
    if (rectF.right < rectF.bottom) {
        R = rectF.right / 2;
    }
    canvas.drawRoundRect(rectF, R, R, mPaint);
}

变量R代表圆的半径，这里就要思考下矩形的宽度与高度的大小，根据情况来计算R的值，一点就是，始终以小的为准来计算R

给View设置Background

设置背景是肯定的，但我们什么情况下去设置了？不可能在View创建的时候，因为这个时候可能View在大小还没确认，View的大小还没确认那么我们创建的Drawable对象的大小就不能确认，所以我们需要在一个完全已经能确定View的大小的条件下去调用setBackground()或setBackgroundDrawable()方法，两者的区别是前者是sdk version level 16的API，所以我们需要根据系统版本来使用不同的API，所以我思考了1000ms的时间，确定了在View的onSizeChanged方法来设置Background，代码如下：

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        setBackground(new SemiCircleRectDrawable());
    } else {
        setBackgroundDrawable(new SemiCircleRectDrawable());
    }
}

为SemiCircleRectView自定义属性attr:backgroundColor

此属性在画矩形时Paint对象的颜色值

    <declare-styleable name="SemiCircleRectView">
        <attr name="backgroundColor" format="color" />
    </declare-styleable>

public SemiCircleRectView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SemiCircleRectView, defStyleAttr, 0);
    backgroundColor = typedArray.getColor(R.styleable.SemiCircleRectView_backgroundColor, Color.TRANSPARENT);
    typedArray.recycle();
}

布局xml中的使用

<com.jay.semicirclerectview.widget.SemiCircleRectView
    android:gravity="center"
    android:layout_width="150dp"
    android:layout_height="50dp"
    android:text="SemiCircleRectView"
    app:backgroundColor="@color/colorAccent"/>

注意事项

• 此控件是继承于TextView，所以拥有TextView所有的特性
• 当View的宽与高相等时，就会实现一个圆的背景效果，这属正常行为
• 当View的高 < 宽时，画的是View的左右两端的半圆弧
• 当View的高 > 宽时，画的是View的上下两端的半圆弧

Github

https://github.com/JaySong/SemiCircleRectView