如何自定义圆弧按钮？

Android

番茄时钟工作法，有没有人认识这小不点的，哈哈，我来给大家解释下什么叫番茄时钟工作法。不过一看就知道是和番茄有关的，什么，你不信，哈哈，我也不信，告诉大家吧！简单来说嘛就是一套时间管理方法，选择一个一个你待完成的任务，例如打飞机。。。（嘘嘘嘘。。。），将番茄时钟，也就是一个计时器而已，设为25分钟，专注打飞机，专注打飞机。。。（打飞机这活中途不能停哦）直到番茄时钟响起就ok了。就这么简单。

喂喂喂，跑题啦！这次我们说的是圆弧按钮哦，也就图1-1这叼样。好，那咋们就进入正题，再说多一句，这番茄时钟工作法挺有用的，对于小编我这种定力不足的人来说，哈哈，犹如看着打码的片子突然变无码了，哈哈哈哈。。。

图1-1

咋们先来分析下。。。

咋一看去这东西是不是一个圆环呢，啊啊啊，五环，你比四环多一环，哈哈，小岳岳的歌终于被我用上了。既然是一个圆环，那肯定是由一个外圆和一个内圆组成的吧，中间呢，就是一个类似textView的东西吗？好，有这思路，那我们可以这样弄，先画两个半径不一的圆，再重叠在一起，（可以通过ImageView来弄），让后添加一个textView就大功告成了，这就是自定义控件中通过组合已有的控件来达到自定义控件的效果，这种方法比较简单，哈哈，都说程序员追求简单，但这也太没技术含量了，咱也是想装B的人，好下面就介绍点有技术含量的东西。

这东西所包含的元素，什么外圆，内圆，文字，咱们统统通过android的canvas画出来，哈哈，够逼格没，不过喜欢装逼的人，得先承受得起挫折，鄙视。。。

好，开始了！

咱们把上面一整块东西就看成个变了模样的Button，本来是眉清目秀的小姑娘，要变得如此惊艳，那得彻头彻尾地变啊，哈哈，那咱就自定义一个Button嘛，想她变成哪个美女据变成哪个美女，嘻嘻嘻。。。什么，自定义控件，搞啥子勒，别慌别慌，这东西入门是相当容易的，好，咱就开始入门自定义控件。

什么是自定义控件呢？

根据我的经验，虽然我没啥经验哈，这东西还是挺有用的，你要在手机上弄一些酷炫叼炸天的控件时，那大部分得用到自定义控件的，这东西呢，说复杂，那可以复杂到你头痛，复杂到你要去乖乖地拿起大学的高数，线性代数好好学；说简单呢，就简单的继承、重写，照着模板来就好，还是能弄个不错的东西出来的，拿来骗骗学弟学妹也是可以的哦！

控件的简单继承关系

控件继承

由上图可知，所有的控件都是继承自View 的，也就是说，View 是鼻祖，对于自定义控件来说，继承的祖先越大，灵活性就越好，越能创造出酷炫叼炸天的控件，但同时，难度也会有所增加，这次咱们就继承View ，然后开始酷炫叼炸天之旅行。

自定义控件的三种形式

  1. 继承已有的控件来实现自定义控件；
  2. 通过继承一个布局文件来实现自定义控件；
  3. 通过继承View类来实现自定义控件。
  • 新建CircleButton并继承View，并添加三个构造方法，重写OnDraw（） 方法：
 /*构造方法*/
    public CircleButton(Context context) {
        this(context, null);
    }

    public CircleButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);//初始化界面，后面有具体实现
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
  • 既然是自定义控件，那归根到底，它还是一个控件嘛，和Button、TextView 可都是亲兄弟嘛，兄弟间必然是有相似的特征的，例如属性，点击事件。。。那下面咱们就来自定义属性先。咱们最终做出来的结果就是下图这逼：
效果图

那这里包括哪些自定义属性呢？一个是：中间文字的颜色（textColor）、文字的大小（textSize）、文字的内容（text）；另一个是：圆环的颜色（backgroundColor）。

好，那咱们就自定义这些属性，该如何定义呢？别急，首先在res/values 下新建atts.xml 文件（前提是该目录下不存在该文件），然后就开始自定义上面的属性了

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--name：属性的名字  format：该属性可以拥有的数据类型-->
    <declare-styleable name="CircleButton">
        <attr name="backgroundColor" format="color"/>
        <attr name="textSize" format="dimension"/>
        <attr name="text" format="string"/>
        <attr name="textColor" format="color"/>
    </declare-styleable>
</resources>

既然定义好了属性，那就得用他们，接下来就是获取自定义属性并赋值，在这里可以通过上下文的obtainStyledAttributes（） 方法获取 ：

private int backgroundColor;
private float textSize;
private String text;
private int textColor;
......
......
......

 /*获取自定义属性并赋值*/
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleButton);

        backgroundColor = typedArray.getColor(R.styleable.CircleButton_backgroundColor, Color.RED);
        textColor = typedArray.getColor(R.styleable.CircleButton_textColor, Color.WHITE);
        textSize = typedArray.getDimension(R.styleable.CircleButton_textSize, 80);
        text = typedArray.getString(R.styleable.CircleButton_text);

这里需要注意的是通过R.styleable.xxx 来找到属性的，因为在定义属性的时候就声明了
<declare-styleable name="CircleButton">

在获取完后，可以通过typedArray.recycle();进行回收，优化性能。

  • 定义完属性又获取到属性了，那下面就是去应用这些属性了。好，那咱们就先画圆，这得在OnDraw（） 内画了，开始展示泡妞的功力了。

既然要画画，那是不是得需要画笔和画纸啊，总不能在哪淫想嘛，那样妹子早就跟别人跑了，这画笔和画纸就是传说中的Paint 和Canvas 了。好，咱们就拿来一根画笔Paint mPaint = new Paint()，先挑个颜色先mPaint.setColor(backgroundColor)，为了画出细节，咱们需要挑一个笔尖比较细的画笔mPaint.setStrokeWidth(4)，这画笔还分风格的，mPaint.setStyle(Paint.Style.STROKE)，好了，画笔搞好了，接下来就是在画纸上画画了canvas.drawArc(10, 10, getWidth()-10, getHeight()-10, -90, -360+mAngle, true, mPaint)， OK，打工搞成，详细代码在后面会给出。

这样就把圆给画出来了，下面就是画中间的文字了，同理，需要先配置好画笔，然后再在画纸上画画，不过这里需要注意的是，我们的先确认文字的起始点和长度，这样才能画出好看的文字可通过以下代码获取：

mPaint.getTextBounds(text, 0, text.length(), mRect);
int textWidth = mRect.width();
int textHeight = mRect.height();

接下来就是在画纸上画画
canvas.drawText(text, (getWidth()-textWidth) / 2, (getHeight()+textHeight) / 2, mPaint);

好，到这里为止，已经把一个静态的控件构建好了，接下来就可以在布局中调用了，咱们在acytivity_main.xml 调用吧：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:circleBtn="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.nlte.test_diyview.MainActivity">

    <com.nlte.test_diyview.CircleButton
        android:id="@+id/btn_circle_gray"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        circleBtn:backgroundColor="#b0adad"
        circleBtn:textSize="30dp"
        circleBtn:textColor="@android:color/holo_red_light" />

    <com.nlte.test_diyview.CircleButton
        android:id="@+id/btn_circle_red"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        circleBtn:backgroundColor="#ff0202"
        circleBtn:text="20"
        circleBtn:textSize="30dp"
        circleBtn:textColor="@android:color/holo_red_light" />

</FrameLayout>

为了后面的方便，在这里我们用FrameLayout， 并在里面添加的颜色不同的两个CircleButton控件，在这里需要注意的是，引用自定义控件是需要添加下面代码：xmlns:circleBtn="http://schemas.android.com/apk/res-auto"， circleBtn 可以自由定义。

到这里可以说是大功告成了，但这只是一个静态的就控件，没有交互能力，既然如此，那我们还不如用张图片代替就ok了，还高搞这么麻烦干嘛，别急别急，咱们接下来开始让他活起来，简单粗暴点，给他添加一个点击事件，当点击按钮一次，就让里面的数字减一。

好的，接下来开始了！。。。

简单够粗暴，咱们可以直接在CircleButton添加点击事件，并将里面的数字减一，然后再重新刷新视图（修改视图时，一般需要刷新视图），代码如下（在initView（）方法内添加）：

this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
               number--;
                //刷新视图
               invalidate();
            }
        });

但咱们不能这样子做，咱们是懒人，为了下次在其他地方也能够用这样一个控件，并根据需要来进行不同的时间处理，咱们可以通过接口回调的方法来实现调用者对控件事件的出处理，什么，接口回调，不懂啊，哈哈，悄悄告诉你，我也是半懂半懂，也是套着模板来的：

    private CirclebuttonClickListener mListener;
    public interface CirclebuttonClickListener{
        void circleButtonClick();
    }
    public void setOnCirclebuttonClickListener(CirclebuttonClickListener listener){
        mListener = listener;
    }
  1. 首先定义一个接口 interface CirclebuttonClickListener
  2. 创建接口变量 CirclebuttonClickListener mListener
  3. 暴露一个方法给调用者来注册接口回调，通过接口来获得回调者对接口方法的实现

然后刚才的代码就可以改成：

        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.circleButtonClick();
            }
        });

是不是没那么复杂呢？

接下来就就交给别人处理了，自己的任务完成了，（听着咋那么像卖身呢）

好，别人该如何用呢，其实和普通控件添加事件一样，该怎么弄就怎么弄：

private CircleButton mCircleButtonRed;
mCircleButtonRed = (CircleButton) findViewById(R.id.btn_circle_red);
mCircleButtonRed.setOnCirclebuttonClickListener(new CircleButton.CirclebuttonClickListener() {
            @Override
            public void circleButtonClick() {
               //事件处理
            }
        });

ok，大功告成，l来个效果图

效果图

接下来就是完整的代码

MainActivity.java

package com.nlte.test_diyview;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private CircleButton mCircleButtonGray;
    private CircleButton mCircleButtonRed;
    private static int number = 69;
    private float angle = 0;
    private float EachAngle = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mCircleButtonRed = (CircleButton) findViewById(R.id.btn_circle_red);
        mCircleButtonRed.setText(number+"");

        //必须要将360*1.0 / number转为float或者double，这样可以避免因为取整的问题而导致没有完全平分360度
        EachAngle = Float.parseFloat(String.valueOf(360*1.0 / number));

        mCircleButtonRed.setOnCirclebuttonClickListener(new CircleButton.CirclebuttonClickListener() {
            @Override
            public void circleButtonClick() {
                mCircleButtonRed.setText(--number+"");
                angle += EachAngle;
                System.out.println(angle);
                mCircleButtonRed.setAngle(angle);
            }
        });

    }
}

CircleButton

package com.nlte.test_diyview;

import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;

/**
 * Founction：
 * NLTE
 * 2016/5/15 0015
 */
public class CircleButton extends View {

    private Paint mPaint;
    private Rect mRect;
    private float mAngle;//弧的角度

    private int backgroundColor;
    private float textSize;
    private String text;
    private int textColor;

    /*通过接口回调的方式实现控件的点击事件添加和处理
   * 步骤：
   *   1.首先定义一个接口 interface CirclebuttonClickListener
   *   2.创建接口变量  CirclebuttonClickListener mListener
   *   3.暴露一个方法给调用者来注册接口回调，通过接口来获得回调者对接口方法的实现
   *   */
    private CirclebuttonClickListener mListener;
    public interface CirclebuttonClickListener{
        void circleButtonClick();
    }
    public void setOnCirclebuttonClickListener(CirclebuttonClickListener listener){
        mListener = listener;
    }

    /*构造方法*/
    public CircleButton(Context context) {
        this(context, null);
    }

    public CircleButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CircleButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    /**
     * Founction：Init the View
     * NLTE
     * 2016/5/15
     * @param context
     * @param attrs
     */
    private void initView(Context context, AttributeSet attrs) {
        mPaint = new Paint();
        //给Paint加上抗锯齿标志
        mPaint.setAntiAlias(true);
        mRect = new Rect();
        this.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //方法一：
               /* number--;
                //刷新视图
                invalidate();*/

                //方法二：
                mListener.circleButtonClick();
            }
        });

        /*获取自定义属性并赋值*/
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleButton);

        backgroundColor = typedArray.getColor(R.styleable.CircleButton_backgroundColor, Color.RED);
        textColor = typedArray.getColor(R.styleable.CircleButton_textColor, Color.WHITE);
        textSize = typedArray.getDimension(R.styleable.CircleButton_textSize, 80);
        text = typedArray.getString(R.styleable.CircleButton_text);
        if (text == null){
            text = "";
        }
        //回收，避免浪费
        typedArray.recycle();

    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //画圆
        mPaint.setColor(backgroundColor);
        mPaint.setStrokeWidth(4); //设置圆弧的宽度
        mPaint.setStyle(Paint.Style.STROKE); //设置圆弧
//        canvas.drawCircle(getWidth()/2, getHeight()/2, getWidth()/2-15, mPaint);
        /*
        * 第一 二个参数：暂且理解为圆的外切正方形左上角的坐标
        * 第三 四个参数：暂且理解为圆的外切正方形右下角的坐标
        * 第五 六个参数：绘制的起始点和终点
        * 第七个参数：是否绘制扇形
        * 第八个参数：画笔
        * */
        canvas.drawArc(10, 10, getWidth()-10, getHeight()-10, -90, -360+mAngle, true, mPaint);

        //中间有一个白色的数字 mRect是数字四周的边距
        mPaint.setColor(textColor);
        mPaint.setTextSize(textSize);
        mPaint.setTypeface(Typeface.DEFAULT);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setStrokeWidth(0.1f);
        mPaint.getTextBounds(text, 0, text.length(), mRect);
        int textWidth = mRect.width();
        int textHeight = mRect.height();
        canvas.drawText(text, (getWidth()-textWidth) / 2, (getHeight()+textHeight) / 2, mPaint);
    }

    public int getBackgroundColor() {
        return backgroundColor;
    }

    @Override
    public void setBackgroundColor(int backgroundColor) {
        invalidate();
        this.backgroundColor = backgroundColor;
    }

    public float getTextSize() {
        return textSize;
    }

    public void setTextSize(float textSize) {
        invalidate();
        this.textSize = textSize;
    }

    public String getText() {
        return text;
    }

    public void setText(String text) {
        invalidate();
        this.text = text;
    }

    public int getTextColor() {
        return textColor;
    }

    public void setTextColor(int textColor) {
        invalidate();
        this.textColor = textColor;
    }

    public void setAngle(float angle) {
        mAngle = angle;
        invalidate();
    }
}

atts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--name：属性的名字  format：该属性可以拥有的数据类型-->
    <declare-styleable name="CircleButton">
        <attr name="backgroundColor" format="color"/>
        <attr name="textSize" format="dimension"/>
        <attr name="text" format="string"/>
        <attr name="textColor" format="color"/>
    </declare-styleable>
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:circleBtn="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.nlte.test_diyview.MainActivity">

    <com.nlte.test_diyview.CircleButton
        android:id="@+id/btn_circle_gray"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        circleBtn:backgroundColor="#b0adad"
        circleBtn:textSize="30dp"
        circleBtn:textColor="@android:color/holo_red_light" />

    <com.nlte.test_diyview.CircleButton
        android:id="@+id/btn_circle_red"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        circleBtn:backgroundColor="#ff0202"
        circleBtn:text="20"
        circleBtn:textSize="30dp"
        circleBtn:textColor="@android:color/holo_red_light" />

</FrameLayout>

ps：如有错误或不足或需要优化的地方，请多多指教，不胜感激！！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 157,924评论 4赞 360
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 66,902评论 1赞 290
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 107,716评论 0赞 239
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,783评论 0赞 203
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,166评论 3赞 286
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,510评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,784评论 2赞 311
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,476评论 0赞 196
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,196评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,459评论 2赞 243
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,978评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,321评论 2赞 252
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 32,964评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,046评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,803评论 0赞 193
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,530评论 2赞 271
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,420评论 2赞 265

推荐阅读更多精彩内容