android 梯形按钮_Android 自定义角标View

0

我们要实现的角标View的效果如上图所示。

怎么去做呢？当然需要自定义View了，角标的背景(三角形、梯形)可以先通过Path连接每一个边，然后绘制Path到画布上，最后再把文字绘制到画布上，接下来一步步看。

我们的角标View在画布上占据一个正方形区域(图1虚线区域)，初始状态如下图：

1

可以看到，初始状态下画布的坐标系原点在View的左上角，但是这样不方便进行数据计算，所以我们先将坐标系原点移动到画布正中心：

2

对应代码如下：

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

//角标View最小边长的一半

mHalfWidth = Math.min(w, h) / 2;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//将原点移动到画布中心

canvas.translate(mHalfWidth, mHalfWidth);

}

将原点移动到画布中心后，就可以愉快的绘制角标的背景区域了，我们以角标在右上角的情况为例：

3

只需要连接A、B、C、D四个点就可以了，剩下的事情就是计算四个点的坐标了，还是跟简单的嘛，只需要知道AB的长度，即角标的边长sideLength，还有正方形的边长即可，这两个值可以自行配置，关键代码如下

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//将原点移动到画布中心

canvas.translate(m