自定义扇形按钮

原创 2018年04月17日 18:20:45

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

大致需求如下:
其一:分为四个模块,可以点击任何模块,然后进行不同业务操作
其二:点击时,文字随之变化

效果如下:
这里写图片描述

实现思路及其简要代码:

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;
}

C/C++的思索 C++之父访谈录 [上帝的玩笑吗?]

C/C++的思索 C++之父访谈录 作者:佚名 翻译整理:pigprince -------------------------------------------------------------...
  • ghj1976
  • ghj1976
  • 2000-12-26 16:02:00
  • 2144

浮动按钮、扇形按钮、EasyThouch

1、本章博客主要实现几个不同类型的浮动框。第一种:EasyThouch (苹果的小白点):功能近是苹果。第二种:是一种不可移动的浮动按钮,就一个单一的点击事件。第三:是扇形按钮浮动。这是公司App里面...
  • zhoushuangjian511
  • zhoushuangjian511
  • 2016-11-07 18:36:32
  • 1230

android扇形按钮

  • 2014年12月27日 10:14
  • 1.39MB
  • 下载

Android 自定义view之扇形菜单(中)

一个扇形菜单,可以滑动切换,添加删除,拖动排序等炫酷的菜单
  • jeden
  • jeden
  • 2017-04-11 20:15:12
  • 447

自定义View:饼图/扇形图(PieView)

前两天看到朱凯大神发表了酝酿一整年的新作:《HenCoder:给高级 Android 工程师的进阶手册》,作为一个码农不敢妄看高级之物,但看在朱凯大神久处于朱大嫂淫威之下,关顾一下以示支持,不曾想到大...
  • zeqiao
  • zeqiao
  • 2017-07-13 15:06:15
  • 227

Android 自定义view之扇形菜单(上)

一个扇形菜单,可以滑动切换,添加删除,拖动排序等炫酷的菜单
  • jeden
  • jeden
  • 2017-04-11 15:23:00
  • 1285

Android开发-自定义View-AndroidStudio(三)扇形多级菜单

转载请注明出处:http://blog.csdn.net/iwanghang/我正在参加CSDN 2016博客之星评选,希望得到您的宝贵一票~http://blog.csdn.net/vote/can...
  • iwanghang
  • iwanghang
  • 2016-12-16 15:19:58
  • 915

Android自定义View之扇形饼状图

前言:继上次写了自定义圆形进度条后,今天给大家带来自定义扇形饼状图。先上效果图: 是不是很炫?看上去还有点立体感。下面带大家一起来瞧一瞧吧。一、定义成员变量,重写构造方法看着这个效果图,我们可以...
  • u012209506
  • u012209506
  • 2016-11-24 15:20:36
  • 6237

iOS自定义组件-扇形进度视图

iOS自定义组件-扇形进度视图   前言: 平时候我们在用Apple设备下载App的时候,就会看见扇形的进度,为了增强更好的用户体验,本人心血来潮写了个自定义组件-扇形进度视图,废话不多说,开始介绍,...
  • u012209436
  • u012209436
  • 2016-06-24 20:38:48
  • 1145

Android 一个炫酷的扇形菜单

效果演示如何使用1、布局
  • u010688729
  • u010688729
  • 2016-12-22 14:13:15
  • 2076
收藏助手
不良信息举报
您举报文章:自定义扇形按钮
举报原因:
原因补充:

(最多只允许输入30个字)