天天看点

自定义扇形按钮

最近公司需要做一个扇形按钮,没有现成的控件,所以只能自己去自定义。

大致需求如下:

其一:分为四个模块,可以点击任何模块,然后进行不同业务操作

其二:点击时,文字随之变化

效果如下:

自定义扇形按钮

实现思路及其简要代码:

1,绘制背景 :

//定义画笔

paint.setColor(circleColor);

paint.setStrokeWidth(circleWidth);

paint.setAntiAlias(true);

paint.setStyle(Paint.Style.STROKE);

float x = (getWidth() - getHeight() / 2) / 2;

float y = getHeight() / 4;

//绘制半圆

RectF oval = new RectF(x, y, getWidth() - x, getHeight() - y);

canvas.drawArc(oval, 90, -180, false, paint);

//绘制隔线

paint.setColor(backgroundColor);

paint.setStyle(Paint.Style.FILL);

paint.setStrokeWidth(5);//圆环隔线的宽度

canvas.drawLine(center, center, center, 0, paint);

canvas.drawLine(center, center, (float) (center + 0.5 * center * Math.sqrt(3)), center * 1 / 2, paint);

canvas.drawLine(center, center, (float) (center + 0.5 * center * Math.sqrt(3)), center * 3 / 2, paint);

canvas.drawLine(center, center, center, center * 2, paint);

//绘制文字

paint.setColor(Color.WHITE);

paint.setTextSize(banciTextSize);

canvas.drawText(“一班”, (float) (center + 0.25 * center), (float) 0.4 * center, paint);

canvas.drawText(“二班”, (float) (center + 0.6 * center), center, paint);

canvas.drawText(“三班”, (float) (center + 0.3 * center), (float) (center + 0.7 * center), paint);

2,定义点击事件,

this.setOnTouchListener(onTouchListener);

1)定义关于方向枚举

public enum Dir {

FIRST, SECOND, THIRD, UNDEFINE, CENTER
}
  2)检测点击方向和范围
  private Dir checkDir(float x, float y) {

        Dir dir = Dir.CENTER;
        if (Math.pow(y - center, 2) + Math.pow(x - center, 2) < Math.pow(center / 2, 2)) {// 判断在中心圆圈内
            dir = Dir.CENTER;
        } else if (Math.pow(y - center, 2) + Math.pow(x - center, 2) > Math.pow(center, 2)) {// 判断在最大的圆弧外
            dir = Dir.UNDEFINE;
        } else if (y < x && y + x < 2 * center) {
            dir = Dir.FIRST;
        } else if (y < x && y + x > 2 * center) {
            dir = Dir.SECOND;
        } else if (y > x) {
            dir = Dir.THIRD;
        }
        return dir;
    }
           

3)绘制点击的扇形

private void drawOnclikColor(Canvas canvas, Dir dir) {

float x = (getWidth() - getHeight() / 2) / 2;
    float y = getHeight() / 4;
    paint.setColor(Color.BLACK);
    paint.setTextSize(banciTextSize);
    RectF oval = new RectF(x, y, getWidth() - x, getHeight() - y);
    switch (dir) {
        case FIRST:
            canvas.drawText("一班", (float) (center + 0.25 * center), (float) 0.4 * center, paint);
            if (onChooseListener != null) {
                onChooseListener.setChooseFirst(1);
            }
            break;
        case SECOND:
            canvas.drawText("二班", (float) (center + 0.6 * center), center, paint);
            if (onChooseListener != null) {
                onChooseListener.setChooseFirst(2);
            }
            break;
        case THIRD:
            canvas.drawText("三班", (float) (center + 0.3 * center), (float) (center + 0.7 * center), paint);
            if (onChooseListener != null) {
                onChooseListener.setChooseFirst(3);
            }

            break;
        case CENTER:
            if (onChooseListener != null) {
                onChooseListener.setChooseFirst(0);
            }
            break;

        default:
            break;
    }

    paint.setStyle(Paint.Style.FILL);
}
           

3,定义接口,供外部调用

public interface OnChooseListener {

void setChooseFirst(int type);

}

public void setOnChooseListener(OnChooseListener onChooseListener) {

this.onChooseListener = onChooseListener;

}

继续阅读