开发者社区> rustfisher> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android - 自定义控件之圆形控件

简介: 自定义控件 - 圈圈 Android L; Android Studio 效果:能够自定义圆圈半径和位置;设定点击效果;改变背景颜色 下面是demo图 点击前: 点击后: 自定义控件一般要继承View;写出构造方法,并设定属性;复写onDraw方法 并在xml中配置一下 例子:OptionCircle.
+关注继续查看

自定义控件 - 圈圈

Android L; Android Studio
效果:能够自定义圆圈半径和位置;设定点击效果;改变背景颜色

下面是demo图
点击前: 1 点击后: circles_rendering2.png
自定义控件一般要继承View;写出构造方法,并设定属性;复写onDraw方法
并在xml中配置一下
例子:OptionCircle.java CirclesActivity.java activity_circle_choose.xml
这个例子没有使用attrs.xml

控件 OptionCircle

这里继承的是ImageView;设定了多个属性,有半径,圆心位置,背景颜色和字体颜色等等
针对这些属性,开放set方法;方便设置属性;可以改变这些属性来做出一些动画效果
构造方法中预设几个属性,设置画笔,背景颜色和圆圈的半径
onDraw方法中开始绘制控件;先画圆形,在圆形中心画上文字;文字中心定位需要特别计算一下

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class OptionCircle extends ImageView {

    private final Paint paint;
    private final Context context;
    boolean clicked = false;// 是否被点击
    boolean addBackground = false;
    int radius = -1;      // 半径值初始化为-1
    int centerOffsetX = 0;// 圆圈原点的偏移量x
    int centerOffsetY = 0;// 偏移量y
    int colorCircle;      // 圆圈颜色
    int colorBackground;  // 背景填充颜色
    int colorText;        // 文字颜色
    String textCircle = "";

    public OptionCircle(Context context) {
        this(context, null);
    }

    public OptionCircle(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        this.paint = new Paint();
        this.paint.setAntiAlias(true);
        this.paint.setStyle(Paint.Style.STROKE);
        colorCircle = Color.argb(205, 245, 2, 51);// 默认颜色
        colorText = colorCircle;      // 字体颜色默认与圈圈颜色保持一致
        colorBackground = colorCircle;// 设定默认参数
    }
    // 属性设置方法
    public void setRadius(int r) {
        this.radius = r;
    }

    public void setCenterOffset(int x, int y) {
        this.centerOffsetX = x;
        this.centerOffsetY = y;
    }

    public void setColorCircle(int c) {
        this.colorCircle = c;
    }

    public void setColorText(int c) {
        this.colorText = c;
    }

    public void setColorBackground(int c) {
        this.colorBackground = c;
    }

    public void setText(String s) {
        this.textCircle = s;
    }

    public void setClicked(boolean clicked) {
        this.clicked = clicked;
    }

    public void setAddBackground(boolean add) {
        this.addBackground = add;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int center = getWidth() / 2;// 当前宽度的一半
        int innerCircle = 86;       // 默认半径为86
        if (radius > 0) {
            innerCircle = dip2px(context, radius); // 如果没有另外设置半径,取半径86
        }

        Drawable drawable = getDrawable();
        if (addBackground) {
        } else {
            // 画圈圈;被点击后会变成实心的圈圈,默认是空心的
            this.paint.setStyle(clicked ? Paint.Style.FILL : Paint.Style.STROKE);
            this.paint.setColor(clicked ? colorBackground : colorCircle);
            this.paint.setStrokeWidth(1.5f);
            canvas.drawCircle(center + centerOffsetX, center + centerOffsetY,
                    innerCircle, this.paint);// 画圆圈时带上偏移量
        }

        // 绘制文字
        this.paint.setStyle(Paint.Style.FILL);
        this.paint.setStrokeWidth(1);
        this.paint.setTextSize(22);
        this.paint.setTypeface(Typeface.MONOSPACE);// 设置一系列文字属性
        this.paint.setColor(clicked ? Color.WHITE : colorText);
        this.paint.setTextAlign(Paint.Align.CENTER);// 文字水平居中
        Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
        canvas.drawText(textCircle, center + centerOffsetX,
                center + centerOffsetY - (fontMetrics.top + fontMetrics.bottom) / 2, this.paint);// 设置文字竖直方向居中
        super.onDraw(canvas);
    }

    /**
     * convert dp to px
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

配置 activity_circle_choose.xml

控件文件定义完毕,在activity_circle_choose.xml中配置一下
定义4个圈圈;center_circle定位在中心;circle_0是红色的;circle_1是绿色的;circle_2是洋红色的

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/top_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp"
        android:text="@string/circles_top_title"
        android:textSize="26sp" />

    <com.rust.aboutview.view.OptionCircle
        android:id="@+id/center_circle"
        android:layout_width="140dp"
        android:layout_height="140dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <com.rust.aboutview.view.OptionCircle
        android:id="@+id/circle_0"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="130dp"
        android:layout_marginTop="53dp" />

    <com.rust.aboutview.view.OptionCircle
        android:id="@+id/circle_1"
        android:layout_width="210dp"
        android:layout_height="210dp"
        android:layout_below="@+id/circle_0"
        android:layout_toEndOf="@+id/center_circle" />

    <com.rust.aboutview.view.OptionCircle
        android:id="@+id/circle_2"
        android:layout_width="210dp"
        android:layout_height="210dp"
        android:layout_below="@id/center_circle" />

</RelativeLayout>

在 CirclesActivity.java 中使用圈圈

圈圈类OptionCircle.java已经开放了设置属性的方法,我们可以利用这些方法来调整圈圈的样式,比如半径,颜色,圆心偏移量
center_circle固定在屏幕中间不动
circle_0仿造一个放大缩小的效果,改变半径值即可实现
circle_1仿造一个浮动的效果,改变圆心偏移量来实现
circle_2仿造抖动效果,也是改变圆心偏移量
这些圈圈都可以自定义背景颜色

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;

import com.rust.aboutview.view.OptionCircle;

public class CirclesActivity extends Activity {

    public static final String TAG = "CirclesActivity";
    public static final int circle0_r = 88;

    private static final int SLEEPING_PERIOD = 100; // 刷新UI间隔时间
    private static final int UPDATE_ALL_CIRCLE = 99;
    int circleCenter_r;
    int circle1_r;
    boolean circle0Clicked = false;
    boolean circle1Clicked = false;

    OptionCircle centerCircle;
    OptionCircle circle0;
    OptionCircle circle1;
    OptionCircle circle2;

    CircleHandler handler = new CircleHandler(this);

    /**
     * Handler : 用于更新UI
     */
    static class CircleHandler extends Handler {
        CirclesActivity activity;
        boolean zoomDir = true;
        boolean circle2Shaking = false;
        int r = circle0_r;
        int moveDir = 0;  // 浮动方向
        int circle1_x = 0;// 偏移量的值
        int circle1_y = 0;
        int circle2_x = 0;
        int circle2ShakeTime = 0;
        int circle2Offsets[] = {10, 15, -6, 12, 0};// 抖动偏移量坐标

        CircleHandler(CirclesActivity a) {
            activity = a;
        }

        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
                case UPDATE_ALL_CIRCLE: {
                    if (zoomDir) {// 用简单的办法实现半径变化
                        r++;
                        if (r >= 99) zoomDir = false;
                    } else {
                        r--;
                        if (r <= circle0_r) zoomDir = true;
                    }
                    activity.circle0.invalidate();
                    activity.circle0.setRadius(r);
                    calOffsetX();// 计算圆心偏移量
                    activity.circle1.invalidate();
                    activity.circle1.setCenterOffset(circle1_x, circle1_y);

                    if (circle2Shaking) {
                        if (circle2ShakeTime < circle2Offsets.length - 1) {
                            circle2ShakeTime++;
                        } else {
                            circle2Shaking = false;
                            circle2ShakeTime = 0;
                        }
                        activity.circle2.invalidate();
                        activity.circle2.setCenterOffset(circle2Offsets[circle2ShakeTime], 0);
                    }
                }
            }
        }
        // 计算circle1圆心偏移量;共有4个浮动方向
        private void calOffsetX() {
            if (moveDir == 0) {
                circle1_x--;
                circle1_y++;
                if (circle1_x <= -6) moveDir = 1;
            }
            if (moveDir == 1) {
                circle1_x++;
                circle1_y++;
                if (circle1_x >= 0) moveDir = 2;
            }
            if (moveDir == 2) {
                circle1_x++;
                circle1_y--;
                if (circle1_x >= 6) moveDir = 3;
            }
            if (moveDir == 3) {
                circle1_x--;
                circle1_y--;
                if (circle1_x <= 0) moveDir = 0;
            }
        }
    }

    class UpdateCircles implements Runnable {

        @Override
        public void run() {
            while (true) {// 配合Handler,循环刷新UI
                Message message = new Message();
                message.what = UPDATE_ALL_CIRCLE;
                handler.sendEmptyMessage(message.what);
                try {
                    Thread.sleep(SLEEPING_PERIOD); // 暂停
                } catch (InterruptedException e) {
                    Thread.currentThread().interrupt();
                }
            }
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circle_choose);
        centerCircle = (OptionCircle) findViewById(R.id.center_circle);
        circle0 = (OptionCircle) findViewById(R.id.circle_0);
        circle1 = (OptionCircle) findViewById(R.id.circle_1);
        circle2 = (OptionCircle) findViewById(R.id.circle_2);

        circleCenter_r = 38;
        circle1_r = 45;
        // 设置圈圈的属性
        centerCircle.setRadius(circleCenter_r);
        centerCircle.setColorText(Color.BLUE);
        centerCircle.setColorCircle(Color.BLUE);
        centerCircle.setText("点击圈圈");

        circle0.setColorText(Color.RED);
        circle0.setRadius(circle0_r);
        circle0.setText("RED");

        circle1.setColorCircle(Color.GREEN);
        circle1.setColorText(Color.GREEN);
        circle1.setText("Green");
        circle1.setRadius(circle1_r);

        circle2.setColorCircle(getResources().getColor(R.color.colorMagenta));
        circle2.setColorText(getResources().getColor(R.color.colorMagenta));
        circle2.setText("Frozen!");

        // 设定点击事件,可在这里改变控件的属性
        circle0.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circle0Clicked = !circle0Clicked;  // 每次点击都取反
                circle0.setClicked(circle0Clicked);
            }
        });

        circle1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circle1Clicked = !circle1Clicked;
                circle1.setColorBackground(Color.GREEN);
                circle1.setClicked(circle1Clicked);
            }
        });

        circle2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                handler.circle2Shaking = true;// 颤抖吧!
            }
        });

        Thread t = new Thread(new UpdateCircles());
        t.start();// 开启子线程
    }
}

至此,圈圈demo结束。通过简单的计算,模拟出浮动,抖动,缩放的效果
以上的代码,复制粘贴进工程里就能使用。圆心移动的轨迹,用三角函数来计算会更好
这里继承的是ImageView,应该有办法在圈内动态添加背景Bitmap,效果更好看

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Android App开发超实用实例 | ​Broadcast
介绍Broadcast的静态注册、动态注册及有序广播。 Broadcast(广播)分为发送者和接收者,可实现跨应用的消息传递。重启手机、闹钟、来电、接收短信等都会发出广播,通过BroadcastReceiver就可以接收广播并进行相应处理。
0 0
Android程序猿从零开发小程序项目(二)
Android程序猿从零开发小程序项目(二)
0 0
Android程序猿从零开发小程序项目(一)
Android程序猿从零开发小程序项目(一)
0 0
Android 蓝牙BLE开发从官方源码demo开始(二)
Android 蓝牙BLE开发从官方源码demo开始(二)
0 0
Android 蓝牙BLE开发从官方源码demo开始(一)
Android 蓝牙BLE开发从官方源码demo开始(一)
0 0
Android开发:获取安卓App版本号的方法步骤
在Android开发过程中,想要开发一个完整功能的App,各个地方的内容都要涉及到,比如获取App的系统版本号就是必须要有的功能。Android的App版本号相关内容比iOS的App版本号内容要多,而且iOS版的App版本信息跟Android的还不一样。本篇文章就来介绍一下Android开发中获取App版本号的方法步骤,方便以后使用。获取App版本号常用的有两个方法,这两种方式都能获取到系统版本号,请根据实际需求或者偏好来选择任何一种方法即可。
0 0
Android开发:往项目工程里面新引入工具包的步骤
在Android开发过程中,有些时候会根据实际需要,要往项目里面引入工具包,作为初级开发者或者刚开始入门的Android开发者来说会不太熟练怎么引入,所以往项目工程里面新引入工具包也是必备技能。那么本篇博文就来分享一下给项目工程里面引入工具包的步骤,只分享给有需要的人。
0 0
Android开发:Android Studio同时打开多个项目的正确打开姿势
刚接触Android开发的初级程序猿比较实用,比如在开发过程中,已经通过Android Studio打开了一个项目工程之后,还想重新再打开一个另外的项目工程,这种解决方法,一般资深的Android开发工程师不屑于看,但是对于不知道的小白程序猿来说却是很实用,而且网上也没有太多的基础知识点的介绍,所以还是那句话,只分享给有需要的人,只要能帮到一个人,这篇博文就有存在的意义。
0 0
+关注
rustfisher
https://github.com/RustFisher https://rustfisher.github.io/about/
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
Android插件化:从入门到放弃
立即下载
复杂环境下的视觉同时定位与地图构建
立即下载