原文:Android笔记--自定义控件仿遥控器的圆形上下左右OK圆盘按钮

上面就是几张预览图！代码在最底下

主要就两个步骤，画图、监听点击

1、整个控件基本上是一步步画出来的，重写onDraw方法开始for循环画扇形出来，画扇形的时候同时画扇形内的图标，扇形画完了之后画中心圆按钮，中心画了圆之后吧OK按钮画上。

2、重写onTouch方法监听手指触发的位置，根据按下的位置确定按钮在哪个扇形的范围上，然后重绘一下onDraw把按下的灰色背景绘制出来。难点在于如何确定按下的位置是否处于扇形范围，换了好几种方案，奈何数学不好，最后选了现在使用的方案。

  1. package com.imxiaoyu.common.widget;
  3. import android.content.Context;
  4. import android.graphics.Bitmap;
  5. import android.graphics.Canvas;
  6. import android.graphics.Matrix;
  7. import android.graphics.Paint;
  8. import android.graphics.RectF;
  9. import android.util.AttributeSet;
  10. import android.view.MotionEvent;
  11. import android.view.View;
  13. import java.util.ArrayList;
  14. import java.util.Date;
  15. import java.util.List;
  17. /**
  18.  * 仿遥控器上下左右ok圆形菜单
  19.  * Created by 庞光渝 on 2017/3/9.博客：https://my.oschina.net/u/1462828/blog
  20.  */
  22. public class RoundMenuView extends View {
  24.     /**
  25.      * 变量
  26.      */
  27.     private int coreX;//中心点的坐标X
  28.     private int coreY;//中心点的坐标Y
  30.     private List<RoundMenu> roundMenus;//菜单列表
  32.     private boolean isCoreMenu = false;//是否有中心按钮
  33.     private int coreMenuColor;//中心按钮的默认背景--最好不要透明色
  34.     private int coreMenuStrokeColor;//中心按钮描边颜色
  35.     private int coreMenuStrokeSize;//中心按钮描边粗细
  36.     private int coreMenuSelectColor;//中心按钮选中时的背景颜色
  37.     private Bitmap coreBitmap;//OK图片
  38.     private OnClickListener onCoreClickListener;//中心按钮的点击回调
  40.     private float deviationDegree;//偏移角度
  41.     private int onClickState = -2;//-2是无点击，-1是点击中心圆，其他是点击菜单
  42.     private int roundRadius;//中心圆的半径
  43.     private double radiusDistance;//半径的长度比（中心圆半径=大圆半径*radiusDistance）
  44.     private long touchTime;//按下时间，抬起的时候判定一下，超过300毫秒算点击
  46.     public RoundMenuView(Context context) {
  47.         super(context);
  48.     }
  50.     public RoundMenuView(Context context, AttributeSet attrs) {
  51.         super(context, attrs);
  52.     }
  54.     public RoundMenuView(Context context, AttributeSet attrs, int defStyle) {
  55.         super(context, attrs, defStyle);
  56.     }
  58.     @Override
  59.     protected void onDraw(Canvas canvas) {
  60.         coreX = getWidth() / 2;
  61.         coreY = getHeight() / 2;
  62.         roundRadius = (int) (getWidth()/2 * radiusDistance);//计算中心圆圈半径
  64.         RectF rect = new RectF(0, 0, getWidth(), getHeight());
  65.         if (roundMenus != null && roundMenus.size() > 0) {
  66.             float sweepAngle = 360 / roundMenus.size();//每个弧形的角度
  67.             deviationDegree = sweepAngle / 2;//其实的偏移角度，如果4个扇形的时候是X形状，而非+,设为0试试就知道什么意思了
  68.             for (int i = 0; i < roundMenus.size(); i++) {
  69.                 RoundMenu roundMenu = roundMenus.get(i);
  70.                 //填充
  71.                 Paint paint = new Paint();
  72.                 paint.setAntiAlias(true);
  73.                 if (onClickState == i) {
  74.                     //选中
  75.                     paint.setColor(roundMenu.selectSolidColor);
  76.                 } else {
  77.                     //未选中
  78.                     paint.setColor(roundMenu.solidColor);
  79.                 }
  80.                 canvas.drawArc(rect, deviationDegree + (i * sweepAngle), sweepAngle, true, paint);
  82.                 //画描边
  83.                 paint = new Paint();
  84.                 paint.setAntiAlias(true);
  85.                 paint.setStrokeWidth(roundMenu.strokeSize);
  86.                 paint.setStyle(Paint.Style.STROKE);
  87.                 paint.setColor(roundMenu.strokeColor);
  88.                 canvas.drawArc(rect, deviationDegree + (i * sweepAngle), sweepAngle, roundMenu.useCenter, paint);
  90.                 //画图案
  91.                 Matrix matrix = new Matrix();
  92.                 matrix.postTranslate((float) ((coreX + getWidth() / 2 * roundMenu.iconDistance) - (roundMenu.icon.getWidth() / 2)), coreY - (roundMenu.icon.getHeight() / 2));
  93.                 matrix.postRotate(((i + 1) * sweepAngle), coreX, coreY);
  94.                 canvas.drawBitmap(roundMenu.icon, matrix, null);
  95.             }
  96.         }
  98.         //画中心圆圈
  99.         if (isCoreMenu) {
  100.             //填充
  101.             RectF rect1 = new RectF(coreX - roundRadius, coreY - roundRadius, coreX + roundRadius, coreY + roundRadius);
  102.             Paint paint = new Paint();
  103.             paint.setAntiAlias(true);
  104.             paint.setStrokeWidth(coreMenuStrokeSize);
  105.             if (onClickState == -1) {
  106.                 paint.setColor(coreMenuSelectColor);
  107.             } else {
  108.                 paint.setColor(coreMenuColor);
  109.             }
  110.             canvas.drawArc(rect1, 0, 360, true, paint);
  112.             //画描边
  113.             paint = new Paint();
  114.             paint.setAntiAlias(true);
  115.             paint.setStrokeWidth(coreMenuStrokeSize);
  116.             paint.setStyle(Paint.Style.STROKE);
  117.             paint.setColor(coreMenuStrokeColor);
  118.             canvas.drawArc(rect1, 0, 360, true, paint);
  119.             if (coreBitmap != null) {
  120.                 //画中心圆圈的“OK”图标
  121.                 canvas.drawBitmap(coreBitmap, coreX - coreBitmap.getWidth() / 2, coreY - coreBitmap.getHeight() / 2, null);//在 0，0坐标开始画入src
  122.             }
  123.         }
  124.     }
  126.     public boolean onTouchEvent(MotionEvent event) {
  127.         switch (event.getAction()) {
  128.             case MotionEvent.ACTION_DOWN:
  129.                 touchTime = new Date().getTime();
  130.                 float textX = event.getX();
  131.                 float textY = event.getY();
  132.                 int distanceLine = (int) getDisForTwoSpot(coreX, coreY, textX, textY);//距离中心点之间的直线距离
  133.                 if (distanceLine <= roundRadius) {
  134.                     //点击的是中心圆；按下点到中心点的距离小于中心园半径，那就是点击中心园了
  135.                     onClickState = -1;
  136.                 } else if (distanceLine <= getWidth() / 2) {
  137.                     //点击的是某个扇形；按下点到中心点的距离大于中心圆半径小于大圆半径，那就是点击某个扇形了
  138.                     float sweepAngle = 360 / roundMenus.size();//每个弧形的角度
  139.                     int angle = getRotationBetweenLines(coreX, coreY, textX, textY);
  140.                     //这个angle的角度是从正Y轴开始，而我们的扇形是从正X轴开始，再加上偏移角度，所以需要计算一下
  141.                     angle = (angle + 360 - 90 - (int) deviationDegree) % 360;
  142.                     onClickState = (int) (angle / sweepAngle);//根据角度得出点击的是那个扇形
  143.                 } else {
  144.                     //点击了外面
  145.                     onClickState = -2;
  146.                 }
  147.                 invalidate();
  148.                 break;
  149.             case MotionEvent.ACTION_UP:
  150.                 if ((new Date().getTime() - touchTime) < 300) {
  151.                     //点击小于300毫秒算点击
  152.                     OnClickListener onClickListener = null;
  153.                     if (onClickState == -1) {
  154.                         onClickListener = onCoreClickListener;
  155.                     } else if (onClickState >= 0 && onClickState < roundMenus.size()) {
  156.                         onClickListener = roundMenus.get(onClickState).onClickListener;
  157.                     }
  158.                     if (onClickListener != null) {
  159.                         onClickListener.onClick(this);
  160.                     }
  161.                 }
  162.                 onClickState = -2;
  163.                 invalidate();
  164.                 break;
  165.         }
  166.         return true;
  167.     }
  169.     /**
  170.      * 添加菜单
  171.      *
  172.      * @param roundMenu
  173.      */
  174.     public void addRoundMenu(RoundMenu roundMenu) {
  175.         if (roundMenu == null) {
  176.             return;
  177.         }
  178.         if (roundMenus == null) {
  179.             roundMenus = new ArrayList<>();
  180.         }
  181.         roundMenus.add(roundMenu);
  182.         invalidate();
  183.     }
  185.     /**
  186.      * 添加中心菜单按钮
  187.      *
  188.      * @param coreMenuColor
  189.      * @param coreMenuSelectColor
  190.      * @param onClickListener
  191.      */
  192.     public void setCoreMenu(int coreMenuColor, int coreMenuSelectColor, int coreMenuStrokeColor,
  193.                             int coreMenuStrokeSize, double radiusDistance,Bitmap bitmap, OnClickListener onClickListener) {
  194.         isCoreMenu = true;
  195.         this.coreMenuColor = coreMenuColor;
  196.         this.radiusDistance = radiusDistance;
  197.         this.coreMenuSelectColor = coreMenuSelectColor;
  198.         this.coreMenuStrokeColor = coreMenuStrokeColor;
  199.         this.coreMenuStrokeSize = coreMenuStrokeSize;
  200.         coreBitmap = bitmap;
  201.         this.onCoreClickListener = onClickListener;
  202.         invalidate();
  203.     }
  205.     /**
  206.      * 获取两条线的夹角
  207.      *
  208.      * @param centerX
  209.      * @param centerY
  210.      * @param xInView
  211.      * @param yInView
  212.      * @return
  213.      */
  214.     public static int getRotationBetweenLines(float centerX, float centerY, float xInView, float yInView) {
  215.         double rotation = 0;
  217.         double k1 = (double) (centerY - centerY) / (centerX * 2 - centerX);
  218.         double k2 = (double) (yInView - centerY) / (xInView - centerX);
  219.         double tmpDegree = Math.atan((Math.abs(k1 - k2)) / (1 + k1 * k2)) / Math.PI * 180;
  221.         if (xInView > centerX && yInView < centerY) {  //第一象限
  222.             rotation = 90 - tmpDegree;
  223.         } else if (xInView > centerX && yInView > centerY) //第二象限
  224.         {
  225.             rotation = 90 + tmpDegree;
  226.         } else if (xInView < centerX && yInView > centerY) { //第三象限
  227.             rotation = 270 - tmpDegree;
  228.         } else if (xInView < centerX && yInView < centerY) { //第四象限
  229.             rotation = 270 + tmpDegree;
  230.         } else if (xInView == centerX && yInView < centerY) {
  231.             rotation = 0;
  232.         } else if (xInView == centerX && yInView > centerY) {
  233.             rotation = 180;
  234.         }
  235.         return (int) rotation;
  236.     }
  238.     /**
  239.      * 求两个点之间的距离
  240.      *
  241.      * @return
  242.      */
  243.     public static double getDisForTwoSpot(float x1, float y1, float x2, float y2) {
  244.         float width, height;
  245.         if (x1 > x2) {
  246.             width = x1 - x2;
  247.         } else {
  248.             width = x2 - x1;
  249.         }
  251.         if (y1 > y2) {
  252.             height = y2 - y1;
  253.         } else {
  254.             height = y2 - y1;
  255.         }
  256.         return Math.sqrt((width * width) + (height * height));
  257.     }
  259.     /**
  260.      * 扇形的对象类
  261.      */
  262.     public static class RoundMenu {
  263.         public boolean useCenter = true;//扇形是否画连接中心点的直线
  264.         public int solidColor = 0x00000000;//背景颜色,默认透明
  265.         public int selectSolidColor = 0x00000000;//背景颜色,默认透明
  266.         public int strokeColor = 0x00000000;//描边颜色,默认透明
  267.         public int strokeSize = 1;//描边的宽度,默认1
  268.         public Bitmap icon;//菜单的图片
  269.         public OnClickListener onClickListener;//点击监听
  270.         public double iconDistance = 0.63;//图标距离中心点的距离
  271.     }
  272. }

然后是调用，调用代码就简单的放几句吧，应该看得懂的

  1. RoundMenuView.RoundMenu roundMenu = new RoundMenuView.RoundMenu();
  2.         roundMenu.selectSolidColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  3.         roundMenu.strokeColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  4.         roundMenu.icon=ImageUtils.drawable2Bitmap(getActivity(),R.drawable.ic_right);
  5.         roundMenu.onClickListener=new OnClickListener() {
  6.             @Override
  7.             public void onClick(View view) {
  8.                 ToastUtils.showToast(getActivity(),"点击了1");
  9.             }
  10.         };
  11.         roundMenuView.addRoundMenu(roundMenu);
  13.         roundMenu = new RoundMenuView.RoundMenu();
  14.         roundMenu.selectSolidColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  15.         roundMenu.strokeColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  16.         roundMenu.icon=ImageUtils.drawable2Bitmap(getActivity(),R.drawable.ic_right);
  17.         roundMenu.onClickListener=new OnClickListener() {
  18.             @Override
  19.             public void onClick(View view) {
  20.                 ToastUtils.showToast(getActivity(),"点击了2");
  21.             }
  22.         };
  23.         roundMenuView.addRoundMenu(roundMenu);
  25.         roundMenu = new RoundMenuView.RoundMenu();
  26.         roundMenu.selectSolidColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  27.         roundMenu.strokeColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  28.         roundMenu.icon=ImageUtils.drawable2Bitmap(getActivity(),R.drawable.ic_right);
  29.         roundMenu.onClickListener=new OnClickListener() {
  30.             @Override
  31.             public void onClick(View view) {
  32.                 ToastUtils.showToast(getActivity(),"点击了3");
  33.             }
  34.         };
  35.         roundMenuView.addRoundMenu(roundMenu);
  37.         roundMenu = new RoundMenuView.RoundMenu();
  38.         roundMenu.selectSolidColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  39.         roundMenu.strokeColor = ColorUtils.getColor(getActivity(), R.color.gray_9999);
  40.         roundMenu.icon=ImageUtils.drawable2Bitmap(getActivity(),R.drawable.ic_right);
  41.         roundMenu.onClickListener=new OnClickListener() {
  42.             @Override
  43.             public void onClick(View view) {
  44.                 ToastUtils.showToast(getActivity(),"点击了4");
  45.             }
  46.         };
  47.         roundMenuView.addRoundMenu(roundMenu);
  49.         roundMenuView.setCoreMenu(ColorUtils.getColor(getActivity(), R.color.gray_f2f2),
  50.                 ColorUtils.getColor(getActivity(), R.color.gray_9999), ColorUtils.getColor(getActivity(), R.color.gray_9999)
  51.                 , 1, 0.43,ImageUtils.drawable2Bitmap(getActivity(),R.drawable.ic_ok), new OnClickListener() {
  52.                     @Override
  53.                     public void onClick(View view) {
  54.                         ToastUtils.showToast(getActivity(),"点击了中心圆圈");
  55.                     }
  56.                 });

 

http://doutugongchang.com

Android笔记--自定义控件仿遥控器的圆形上下左右OK圆盘按钮的更多相关文章

  1. Android笔记(六十七) 自定义控件

    实际编程中,系统提供的控件往往无法满足我们的需求,一来是样子丑陋,二来是一些复杂的组合需要多次使用的话,每次都写一堆控件的组合会很耗费时间,所以我们将这些组件的组合自定义为一个新的控件,以后使用的时候 ...

  2. Android中自定义控件TextSize属性问题

    本文主要说明一个自定义控件添加TextSize属性的坑,刚刚从坑里面爬出来,写个随笔,记录一下: *************************************************** ...

  3. android版高仿淘宝客户端源码V2.3

    android版高仿淘宝客户端源码V2.3,这个版本我已经更新到2.3了,源码也上传到源码天堂那里了,大家可以看一下吧,该应用实现了我们常用的购物功能了,也就是在手机上进行网购的流程的,如查看产品(浏 ...

  4. Android笔记——Android中数据的存储方式（二）

    我们在实际开发中,有的时候需要储存或者备份比较复杂的数据.这些数据的特点是,内容多.结构大,比如短信备份等.我们知道SharedPreferences和Files(文本文件)储存这种数据会非常的没有效 ...

  5. Android笔记:触摸事件的分析与总结----TouchEvent处理机制

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://glblong.blog.51cto.com/3058613/1559320   ...

  6. [Android] Android 手机下 仿 微信 客户端 界面 -- 微聊

    Android 手机下 仿 微信 客户端 界面 -- 微聊 (包括聊天列表 + 聊天对话页 + 朋友圈列表页 + 我的/发现 列表页) 项目演示: 功能说明: 1)底部标签切换 (TabHost + ...

  7. Android 笔记之 R 文件

    Android笔记之R文件 h2{ color: #4abcde; } a{ color: blue; text-decoration: none; } a:hover{ color: red; te ...

  8. Android 笔记之 Android 系统架构

    Android笔记之Android系统架构 h2{ color: #4abcde; } a{ color: blue; text-decoration: none; } a:hover{ color: ...

  9. Android动画之仿美团加载数据等待时，小人奔跑进度动画对话框（附顺丰快递员奔跑效果）

    Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...

随机推荐

  1. hive SQL优化之distribute by和sort by

    近期在优化hiveSQL. 以下是一段排序,分组后取每组第一行记录的SQL INSERT OVERWRITE TABLE t_wa_funnel_distinct_temp PARTITION (pt ...

  2. 【b702】字符串的展开

    Time Limit: 1 second Memory Limit: 50 MB [问题描述] 在初赛普及组的"阅读程序写结果"的问题中,我们曾给出一个字符串展开的例子:如果在输入 ...

  3. AE开发概念辨析

    樱木 原文 AE开发之概念辨析2,AE开发涉及相关概念,AE开发相关概念 1 AE中的类库 AE总共包括了21个子库,分别是SYSTEM,SYSTEMUI,GEOMETRY,DISPLAY,SERVE ...

  4. github-vimium-compile-crx

    chrome-62.x版本上安装vimium 1.61.1 https://blog.csdn.net/ZHUJIANWEILI4/article/details/78385346

  5. 学习金字塔 分类： T_TALENT 2014-05-21 09:25 331人阅读 评论(0) 收藏

    学习金字塔是美国缅因州的国家训练实验室研究成果,它用数字形式形象显示了:采用不同的学习方式,学习者在两周以后还能记住内容(平均学习保持率)的多少.它是一种现代学习方式的理论.最早它是由美国学者.著名的 ...

  6. TextView之一：子类的常用属性 分类： H1_ANDROID 2013-10-30 15:14 770人阅读 评论(0) 收藏

    TextView常见的子类包括EditText,Button,CheckBox, RadioButton等. 1.EditText EditText继承自TextView,因此TextView所有属性 ...

  7. 段的创建表user_segments 分类： H2_ORACLE 2013-08-10 11:13 714人阅读 评论(0) 收藏

    1.段的定义及类型 Oracle中的段(segment)是占用磁盘空间的一个对象,最常见的段类型包括: l  聚簇cluster l  表table l  表分区 tablepartition l  ...

  8. php面试题8

    php面试题8 一.总结 二.php面试题8 1.表单数据提交方式 POST 和 GET 的区别,URL 地址传递的数据最大长度是多少?$_GET 传参是请求 HTTP 协议通过 url 参数传递和接 ...

  9. jquery ajax跨域 thinkphp getjson

    jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈 js处写作 $.getJSON( "/index.p ...

  10. event.relatedTarget、event.fromElement、event.toElement

    在标准DOM中,mouseover和mouseout所发生的元素可以通过event.target来访问,相关元素通过event.relatedTarget属性来访问.event.relatedTarg ...