自定义控件 - 圈圈

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

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

控件 OptionCircle

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

  1. import android.content.Context;
  2. import android.graphics.Canvas;
  3. import android.graphics.Color;
  4. import android.graphics.Paint;
  5. import android.graphics.Typeface;
  6. import android.graphics.drawable.Drawable;
  7. import android.util.AttributeSet;
  8. import android.widget.ImageView;
  10. public class OptionCircle extends ImageView {
  12.     private final Paint paint;
  13.     private final Context context;
  14.     boolean clicked = false;// 是否被点击
  15.     boolean addBackground = false;
  16.     int radius = -1;      // 半径值初始化为-1
  17.     int centerOffsetX = 0;// 圆圈原点的偏移量x
  18.     int centerOffsetY = 0;// 偏移量y
  19.     int colorCircle;      // 圆圈颜色
  20.     int colorBackground;  // 背景填充颜色
  21.     int colorText;        // 文字颜色
  22.     String textCircle = "";
  24.     public OptionCircle(Context context) {
  25.         this(context, null);
  26.     }
  28.     public OptionCircle(Context context, AttributeSet attrs) {
  29.         super(context, attrs);
  30.         this.context = context;
  31.         this.paint = new Paint();
  32.         this.paint.setAntiAlias(true);
  33.         this.paint.setStyle(Paint.Style.STROKE);
  34.         colorCircle = Color.argb(205, 245, 2, 51);// 默认颜色
  35.         colorText = colorCircle;      // 字体颜色默认与圈圈颜色保持一致
  36.         colorBackground = colorCircle;// 设定默认参数
  37.     }
  38.     // 属性设置方法
  39.     public void setRadius(int r) {
  40.         this.radius = r;
  41.     }
  43.     public void setCenterOffset(int x, int y) {
  44.         this.centerOffsetX = x;
  45.         this.centerOffsetY = y;
  46.     }
  48.     public void setColorCircle(int c) {
  49.         this.colorCircle = c;
  50.     }
  52.     public void setColorText(int c) {
  53.         this.colorText = c;
  54.     }
  56.     public void setColorBackground(int c) {
  57.         this.colorBackground = c;
  58.     }
  60.     public void setText(String s) {
  61.         this.textCircle = s;
  62.     }
  64.     public void setClicked(boolean clicked) {
  65.         this.clicked = clicked;
  66.     }
  68.     public void setAddBackground(boolean add) {
  69.         this.addBackground = add;
  70.     }
  72.     @Override
  73.     protected void onDraw(Canvas canvas) {
  74.         int center = getWidth() / 2;// 当前宽度的一半
  75.         int innerCircle = 86;       // 默认半径为86
  76.         if (radius > 0) {
  77.             innerCircle = dip2px(context, radius); // 如果没有另外设置半径，取半径86
  78.         }
  80.         Drawable drawable = getDrawable();
  81.         if (addBackground) {
  82.         } else {
  83.             // 画圈圈；被点击后会变成实心的圈圈，默认是空心的
  84.             this.paint.setStyle(clicked ? Paint.Style.FILL : Paint.Style.STROKE);
  85.             this.paint.setColor(clicked ? colorBackground : colorCircle);
  86.             this.paint.setStrokeWidth(1.5f);
  87.             canvas.drawCircle(center + centerOffsetX, center + centerOffsetY,
  88.                     innerCircle, this.paint);// 画圆圈时带上偏移量
  89.         }
  91.         // 绘制文字
  92.         this.paint.setStyle(Paint.Style.FILL);
  93.         this.paint.setStrokeWidth(1);
  94.         this.paint.setTextSize(22);
  95.         this.paint.setTypeface(Typeface.MONOSPACE);// 设置一系列文字属性
  96.         this.paint.setColor(clicked ? Color.WHITE : colorText);
  97.         this.paint.setTextAlign(Paint.Align.CENTER);// 文字水平居中
  98.         Paint.FontMetricsInt fontMetrics = paint.getFontMetricsInt();
  99.         canvas.drawText(textCircle, center + centerOffsetX,
  100.                 center + centerOffsetY - (fontMetrics.top + fontMetrics.bottom) / 2, this.paint);// 设置文字竖直方向居中
  101.         super.onDraw(canvas);
  102.     }
  104.     /**
  105.      * convert dp to px
  106.      */
  107.     public static int dip2px(Context context, float dpValue) {
  108.         final float scale = context.getResources().getDisplayMetrics().density;
  109.         return (int) (dpValue * scale + 0.5f);
  110.     }
  111. }

配置 activity_circle_choose.xml

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

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  6.     <TextView
  7.         android:id="@+id/top_title"
  8.         android:layout_width="wrap_content"
  9.         android:layout_height="wrap_content"
  10.         android:layout_centerHorizontal="true"
  11.         android:layout_marginTop="5dp"
  12.         android:text="@string/circles_top_title"
  13.         android:textSize="26sp" />
  15.     <com.rust.aboutview.view.OptionCircle
  16.         android:id="@+id/center_circle"
  17.         android:layout_width="140dp"
  18.         android:layout_height="140dp"
  19.         android:layout_centerHorizontal="true"
  20.         android:layout_centerVertical="true" />
  22.     <com.rust.aboutview.view.OptionCircle
  23.         android:id="@+id/circle_0"
  24.         android:layout_width="200dp"
  25.         android:layout_height="200dp"
  26.         android:layout_marginStart="130dp"
  27.         android:layout_marginTop="53dp" />
  29.     <com.rust.aboutview.view.OptionCircle
  30.         android:id="@+id/circle_1"
  31.         android:layout_width="210dp"
  32.         android:layout_height="210dp"
  33.         android:layout_below="@+id/circle_0"
  34.         android:layout_toEndOf="@+id/center_circle" />
  36.     <com.rust.aboutview.view.OptionCircle
  37.         android:id="@+id/circle_2"
  38.         android:layout_width="210dp"
  39.         android:layout_height="210dp"
  40.         android:layout_below="@id/center_circle" />
  42. </RelativeLayout>

在 CirclesActivity.java 中使用圈圈

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

  1. import android.app.Activity;
  2. import android.graphics.Color;
  3. import android.os.Bundle;
  4. import android.os.Handler;
  5. import android.os.Message;
  6. import android.view.View;
  8. import com.rust.aboutview.view.OptionCircle;
  10. public class CirclesActivity extends Activity {
  12.     public static final String TAG = "CirclesActivity";
  13.     public static final int circle0_r = 88;
  15.     private static final int SLEEPING_PERIOD = 100; // 刷新UI间隔时间
  16.     private static final int UPDATE_ALL_CIRCLE = 99;
  17.     int circleCenter_r;
  18.     int circle1_r;
  19.     boolean circle0Clicked = false;
  20.     boolean circle1Clicked = false;
  22.     OptionCircle centerCircle;
  23.     OptionCircle circle0;
  24.     OptionCircle circle1;
  25.     OptionCircle circle2;
  27.     CircleHandler handler = new CircleHandler(this);
  29.     /**
  30.      * Handler : 用于更新UI
  31.      */
  32.     static class CircleHandler extends Handler {
  33.         CirclesActivity activity;
  34.         boolean zoomDir = true;
  35.         boolean circle2Shaking = false;
  36.         int r = circle0_r;
  37.         int moveDir = 0;  // 浮动方向
  38.         int circle1_x = 0;// 偏移量的值
  39.         int circle1_y = 0;
  40.         int circle2_x = 0;
  41.         int circle2ShakeTime = 0;
  42.         int circle2Offsets[] = {10, 15, -6, 12, 0};// 抖动偏移量坐标
  44.         CircleHandler(CirclesActivity a) {
  45.             activity = a;
  46.         }
  48.         @Override
  49.         public void handleMessage(Message msg) {
  50.             switch (msg.what) {
  51.                 case UPDATE_ALL_CIRCLE: {
  52.                     if (zoomDir) {// 用简单的办法实现半径变化
  53.                         r++;
  54.                         if (r >= 99) zoomDir = false;
  55.                     } else {
  56.                         r--;
  57.                         if (r <= circle0_r) zoomDir = true;
  58.                     }
  59.                     activity.circle0.invalidate();
  60.                     activity.circle0.setRadius(r);
  61.                     calOffsetX();// 计算圆心偏移量
  62.                     activity.circle1.invalidate();
  63.                     activity.circle1.setCenterOffset(circle1_x, circle1_y);
  65.                     if (circle2Shaking) {
  66.                         if (circle2ShakeTime < circle2Offsets.length - 1) {
  67.                             circle2ShakeTime++;
  68.                         } else {
  69.                             circle2Shaking = false;
  70.                             circle2ShakeTime = 0;
  71.                         }
  72.                         activity.circle2.invalidate();
  73.                         activity.circle2.setCenterOffset(circle2Offsets[circle2ShakeTime], 0);
  74.                     }
  75.                 }
  76.             }
  77.         }
  78.         // 计算circle1圆心偏移量；共有4个浮动方向
  79.         private void calOffsetX() {
  80.             if (moveDir == 0) {
  81.                 circle1_x--;
  82.                 circle1_y++;
  83.                 if (circle1_x <= -6) moveDir = 1;
  84.             }
  85.             if (moveDir == 1) {
  86.                 circle1_x++;
  87.                 circle1_y++;
  88.                 if (circle1_x >= 0) moveDir = 2;
  89.             }
  90.             if (moveDir == 2) {
  91.                 circle1_x++;
  92.                 circle1_y--;
  93.                 if (circle1_x >= 6) moveDir = 3;
  94.             }
  95.             if (moveDir == 3) {
  96.                 circle1_x--;
  97.                 circle1_y--;
  98.                 if (circle1_x <= 0) moveDir = 0;
  99.             }
  100.         }
  101.     }
  103.     class UpdateCircles implements Runnable {
  105.         @Override
  106.         public void run() {
  107.             while (true) {// 配合Handler，循环刷新UI
  108.                 Message message = new Message();
  109.                 message.what = UPDATE_ALL_CIRCLE;
  110.                 handler.sendEmptyMessage(message.what);
  111.                 try {
  112.                     Thread.sleep(SLEEPING_PERIOD); // 暂停
  113.                 } catch (InterruptedException e) {
  114.                     Thread.currentThread().interrupt();
  115.                 }
  116.             }
  117.         }
  118.     }
  120.     @Override
  121.     protected void onCreate(Bundle savedInstanceState) {
  122.         super.onCreate(savedInstanceState);
  123.         setContentView(R.layout.activity_circle_choose);
  124.         centerCircle = (OptionCircle) findViewById(R.id.center_circle);
  125.         circle0 = (OptionCircle) findViewById(R.id.circle_0);
  126.         circle1 = (OptionCircle) findViewById(R.id.circle_1);
  127.         circle2 = (OptionCircle) findViewById(R.id.circle_2);
  129.         circleCenter_r = 38;
  130.         circle1_r = 45;
  131.         // 设置圈圈的属性
  132.         centerCircle.setRadius(circleCenter_r);
  133.         centerCircle.setColorText(Color.BLUE);
  134.         centerCircle.setColorCircle(Color.BLUE);
  135.         centerCircle.setText("点击圈圈");
  137.         circle0.setColorText(Color.RED);
  138.         circle0.setRadius(circle0_r);
  139.         circle0.setText("RED");
  141.         circle1.setColorCircle(Color.GREEN);
  142.         circle1.setColorText(Color.GREEN);
  143.         circle1.setText("Green");
  144.         circle1.setRadius(circle1_r);
  146.         circle2.setColorCircle(getResources().getColor(R.color.colorMagenta));
  147.         circle2.setColorText(getResources().getColor(R.color.colorMagenta));
  148.         circle2.setText("Frozen!");
  150.         // 设定点击事件，可在这里改变控件的属性
  151.         circle0.setOnClickListener(new View.OnClickListener() {
  152.             @Override
  153.             public void onClick(View v) {
  154.                 circle0Clicked = !circle0Clicked;  // 每次点击都取反
  155.                 circle0.setClicked(circle0Clicked);
  156.             }
  157.         });
  159.         circle1.setOnClickListener(new View.OnClickListener() {
  160.             @Override
  161.             public void onClick(View v) {
  162.                 circle1Clicked = !circle1Clicked;
  163.                 circle1.setColorBackground(Color.GREEN);
  164.                 circle1.setClicked(circle1Clicked);
  165.             }
  166.         });
  168.         circle2.setOnClickListener(new View.OnClickListener() {
  169.             @Override
  170.             public void onClick(View v) {
  171.                 handler.circle2Shaking = true;// 颤抖吧！
  172.             }
  173.         });
  175.         Thread t = new Thread(new UpdateCircles());
  176.         t.start();// 开启子线程
  177.     }
  178. }

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

Android - 自定义控件之圆形控件的更多相关文章

  1. Android自定义控件之日历控件

      标签: android 控件 日历 应用 需求 2015年09月26日 22:21:54 25062人阅读 评论(109) 收藏 举报 分类: Android自定义控件系列(7) 版权声明:转载注 ...

  2. Android自定义控件1--自定义控件介绍

    Android控件基本介绍 Android本身提供了很多控件比如我们常用的有文本控件TextView和EditText:按钮控件Button和ImageButton状态开关按钮ToggleButton ...

  3. Android开发技巧——自定义控件之组合控件

    Android开发技巧--自定义控件之组合控件 我准备在接下来一段时间,写一系列有关Android自定义控件的博客,包括如何进行各种自定义,并分享一下我所知道的其中的技巧,注意点等. 还是那句老话,尽 ...

  4. 自定义圆形控件RoundImageView并认识一下attr.xml

    今天我们来讲一下有关自定义控件的问题,今天讲的这篇是从布局自定义开始的,难度不大,一看就明白,估计有的同学或者开发者看了说,这种方式多此一举,但是小编我不这么认为,多一种解决方式,就多一种举一反三的学 ...

  5. 自定义圆形控件RoundImageView并认识一下attr

    昨天我们学习了自定义带图片和文字的ImageTextButton,非常简单,我承诺给大家要讲一下用自定义属性的方式学习真正的实现自定义控件,在布局文件中使用属性的方式就需要用到attr.xml这个文件 ...

  6. Android常用酷炫控件(开源项目)github地址汇总

    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

  7. Android 常用炫酷控件（开源项目）git地址汇总

    第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.P ...

  8. 自定义圆形控件 RoundImageView

    1.自定义圆形控件 RoundImageView package com.ronye.CustomView; import android.content.Context; import androi ...

  9. CircleImageView自定义圆形控件的使用

    1.自定义圆形控件github地址: https://github.com/hdodenhof/CircleImageView 主要的类: package de.hdodenhof.circleima ...

随机推荐

  1. （转）java匿名内部类详解

    原文:http://android.blog.51cto.com/268543/384844/   内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. *内部类可以是静态static的 ...

  2. 互联网“剁手”新方向，VR全景购物忙——全景智慧城市常诚

    随着VR和AR技术的兴起,各行各业都在寻求VR+的对接方式,除了游戏和社交平台,另一大对VR有着浓厚兴趣的就是电商平台了,阿里.京东等电商巨头纷纷成立VR事业部,如何让亿万用户在VR中愉快的买买买,已 ...

  3. iOS地理围栏技术的应用

    遇到一个需求,要求监测若干区域,设备进入这些区域则要上传数据,且可以后台监测,甚至app被杀死也要监测.发现oc的地理围栏技术完美匹配这个需求,任务做完了,把遇到的坑记录下来,也许能帮到你呢. 要做这 ...

  4. 基于TF-IDF的新闻标签提取

    基于TF-IDF的新闻标签提取 1. 新闻标签 新闻标签是一条新闻的关键字,可以由编辑上传,或者通过机器提取.新闻标签的提取主要用于推荐系统中,所以,提取的准确性影响推荐系统的有效性.同时,对于将标签 ...

  5. es6之各种数据类型的扩展

    一. 字符串的扩展 为字符串添加了Iterator,可以被for...of遍历 includes.startsWith.endsWith都会返回布尔值,且支持第二个参数(开始搜索的位置),endsWi ...

  6. C#从基于FTPS的FTP server下载数据 (FtpWebRequest 的使用)SSL 加密

    FTPS,亦或是FTPES, 是FTP协议的一种扩展,用于对TLS和SSL协议的支持. 本文讲述了如何从一个基于FTPS的Server中下载数据的实例.   任何地方,如有纰漏,欢迎诸位道友指教.   ...

  7. ios移动端原生滚动条滚动不灵敏问题

    最近开发微信页面的时候遇到了这个问题, 因为移动端浏览器的原生滚动条样式很好,不像pc端那么难看,所以在页面需要滚动的地方用了原生的滚动条,这种滚动条在安卓浏览器中没有任何问题,但是在ios微信浏览器 ...

  8. Java基础——继承

    学习Java继承之前,我们想回忆一下Java面向对象需要特别注意的几个关键点. 面向对象是将复杂的事情简单化了,它通过封装的方式使得代码的重用性更高和安全性更强.平时我们要学会用面向对象的方式去思考, ...

  9. lftp的用法

    lftp是Linux下的一个ftp工具,支持ftp, ftps, http, https, hftp, fish, sftp, file, bittorrent等协议(支持https 和 ftps,必 ...

  10. 表连接查询的顺序和where子句条件的前后顺序会影响sql的性能么

    有好多时候,我们常听别人说大表在前,小表在后,包括现在好多百度出来的靠前的答案都有说数据库是从右到左加载的,所以from语句最后关联的那张表会先被处理.如果三表交叉,就选择交叉表来作为基础表.等等一些 ...