Android自定义控件实现温度旋转按钮效果

首先看下效果图


温度旋转按钮

实现思路

  1. 初始化一些参数
  2. 绘制刻度盘
  3. 绘制刻度盘下的圆弧
  4. 绘制标题与温度标识
  5. 绘制旋转按钮
  6. 绘制温度
  7. 处理滑动事件
  8. 提供一些接口方法

实现方法

初始化一些参数

public class TempControlView extends View {

 // 控件宽
 private int width;
 // 控件高
 private int height;
 // 刻度盘半径
 private int dialRadius;
 // 圆弧半径
 private int arcRadius;
 // 刻度高
 private int scaleHeight = dp2px(10);
 // 刻度盘画笔
 private Paint dialPaint;
 // 圆弧画笔
 private Paint arcPaint;
 // 标题画笔
 private Paint titlePaint;
 // 温度标识画笔
 private Paint tempFlagPaint;
 // 旋转按钮画笔
 private Paint buttonPaint;
 // 温度显示画笔
 private Paint tempPaint;
 // 文本提示
 private String title = "最高温度设置";
 // 温度
 private int temperature;
 // 最低温度
 private int minTemp = 15;
 // 最高温度
 private int maxTemp = 30;
 // 四格(每格4.5度,共18度)代表温度1度
 private int angleRate = 4;
 // 按钮图片
 private Bitmap buttonImage = BitmapFactory.decodeResource(getResources(),R.mipmap.btn_rotate);
 // 按钮图片阴影
 private Bitmap buttonImageShadow = BitmapFactory.decodeResource(getResources(),R.mipmap.btn_rotate_shadow);
 // 抗锯齿
 private PaintFlagsDrawFilter paintFlagsDrawFilter;
 // 温度改变监听
 private OnTempChangeListener onTempChangeListener;

 // 以下为旋转按钮相关

 // 当前按钮旋转的角度
 private float rotateAngle;
 // 当前的角度
 private float currentAngle;

 ...

 @Override
 protected void onSizeChanged(int w,int h,int oldw,int oldh) {
  super.onSizeChanged(w,h,oldw,oldh);
  // 控件宽、高
  width = height = Math.min(h,w);
  // 刻度盘半径
  dialRadius = width / 2 - dp2px(20);
  // 圆弧半径
  arcRadius = dialRadius - dp2px(20);
 }

 ...
}

绘制刻度盘

以屏幕中心为画布原点,圆弧角度为270°,绘制未选中与选中状态的刻度盘。

旋转方法中多减的2°是后期调整所得,不用在意。

/**
 * 绘制刻度盘
 *
 * @param canvas 画布
 */
private void drawScale(Canvas canvas) {
 canvas.save();
 canvas.translate(getWidth() / 2,getHeight() / 2);
 // 逆时针旋转135-2度
 canvas.rotate(-133);
 dialPaint.setColor(Color.parseColor("#3CB7EA"));
 for (int i = 0; i < 60; i++) {
  canvas.drawLine(0,-dialRadius,-dialRadius + scaleHeight,dialPaint);
  canvas.rotate(4.5f);
 }

 canvas.rotate(90);
 dialPaint.setColor(Color.parseColor("#E37364"));
 for (int i = 0; i < (temperature - minTemp) * angleRate; i++) {
  canvas.drawLine(0,dialPaint);
  canvas.rotate(4.5f);
 }
 canvas.restore();
}


绘制刻度盘下的圆弧

/**
 * 绘制刻度盘下的圆弧
 *
 * @param canvas 画布
 */
private void drawArc(Canvas canvas) {
 canvas.save();
 canvas.translate(getWidth() / 2,getHeight() / 2);
 canvas.rotate(135 + 2);
 RectF rectF = new RectF(-arcRadius,-arcRadius,arcRadius,arcRadius);
 canvas.drawArc(rectF,265,false,arcPaint);
 canvas.restore();
}


绘制标题与温度标识

 /**
  * 绘制标题与温度标识
  *
  * @param canvas 画布
  */
 private void drawText(Canvas canvas) {
  canvas.save();

  // 绘制标题
  float titleWidth = titlePaint.measureText(title);
  canvas.drawText(title,(width - titleWidth) / 2,dialRadius * 2 + dp2px(15),titlePaint);

  // 绘制最小温度标识
  // 最小温度如果小于10,显示为0x
  String minTempFlag = minTemp < 10 ? "0" + minTemp : minTemp + "";
  float tempFlagWidth = titlePaint.measureText(maxTemp + "");
  canvas.rotate(55,width / 2,height / 2);
  canvas.drawText(minTempFlag,(width - tempFlagWidth) / 2,height + dp2px(5),tempFlagPaint);

  // 绘制最大温度标识
  canvas.rotate(-105,height / 2);
  canvas.drawText(maxTemp + "",tempFlagPaint);
  canvas.restore();
 }

绘制旋转按钮

/**
 * 绘制旋转按钮
 *
 * @param canvas 画布
 */
private void drawButton(Canvas canvas) {
 // 按钮宽高
 int buttonWidth = buttonImage.getWidth();
 int buttonHeight = buttonImage.getHeight();
 // 按钮阴影宽高
 int buttonShadowWidth = buttonImageShadow.getWidth();
 int buttonShadowHeight = buttonImageShadow.getHeight();

 // 绘制按钮阴影
 canvas.drawBitmap(buttonImageShadow,(width - buttonShadowWidth) / 2,(height - buttonShadowHeight) / 2,buttonPaint);

 Matrix matrix = new Matrix();
 // 设置按钮位置
 matrix.setTranslate(buttonWidth / 2,buttonHeight / 2);
 // 设置旋转角度
 matrix.preRotate(45 + rotateAngle);
 // 按钮位置还原,此时按钮位置在左上角
 matrix.preTranslate(-buttonWidth / 2,-buttonHeight / 2);
 // 将按钮移到中心位置
 matrix.postTranslate((width - buttonWidth) / 2,(height - buttonHeight) / 2);

 //设置抗锯齿
 canvas.setDrawFilter(paintFlagsDrawFilter);
 canvas.drawBitmap(buttonImage,matrix,buttonPaint);
}


绘制温度

/**
 * 绘制温度
 *
 * @param canvas 画布
 */
private void drawTemp(Canvas canvas) {
 canvas.save();
 canvas.translate(getWidth() / 2,getHeight() / 2);

 float tempWidth = tempPaint.measureText(temperature + "");
 float tempHeight = (tempPaint.ascent() + tempPaint.descent()) / 2;
 canvas.drawText(temperature + "°",-tempWidth / 2 - dp2px(5),-tempHeight,tempPaint);
 canvas.restore();
}


处理滑动事件

private boolean isDown;
private boolean isMove;

@Override
public boolean onTouchEvent(MotionEvent event) {
 switch (event.getAction()) {
  case MotionEvent.ACTION_DOWN:
   isDown = true;
   float downX = event.getX();
   float downY = event.getY();
   currentAngle = calcAngle(downX,downY);
   break;

  case MotionEvent.ACTION_MOVE:
   isMove = true;
   float targetX;
   float targetY;
   downX = targetX = event.getX();
   downY = targetY = event.getY();
   float angle = calcAngle(targetX,targetY);

   // 滑过的角度增量
   float angleIncreased = angle - currentAngle;

   // 防止越界
   if (angleIncreased < -270) {
    angleIncreased = angleIncreased + 360;
   } else if (angleIncreased > 270) {
    angleIncreased = angleIncreased - 360;
   }

   IncreaseAngle(angleIncreased);
   currentAngle = angle;
   invalidate();
   break;

  case MotionEvent.ACTION_CANCEL:
  case MotionEvent.ACTION_UP: {
   if (isDown && isMove) {
    // 纠正指针位置
    rotateAngle = (float) ((temperature - minTemp) * angleRate * 4.5);
    invalidate();
    // 回调温度改变监听
    onTempChangeListener.change(temperature);
    isDown = false;
    isMove = false;
   }
   break;
  }
 }
 return true;
}

/**
 * 以按钮圆心为坐标圆点,建立坐标系,求出(targetX,targetY)坐标与x轴的夹角
 *
 * @param targetX x坐标
 * @param targetY y坐标
 * @return (targetX,targetY)坐标与x轴的夹角
 */
private float calcAngle(float targetX,float targetY) {
 float x = targetX - width / 2;
 float y = targetY - height / 2;
 double radian;

 if (x != 0) {
  float tan = Math.abs(y / x);
  if (x > 0) {
   if (y >= 0) {
    radian = Math.atan(tan);
   } else {
    radian = 2 * Math.PI - Math.atan(tan);
   }
  } else {
   if (y >= 0) {
    radian = Math.PI - Math.atan(tan);
   } else {
    radian = Math.PI + Math.atan(tan);
   }
  }
 } else {
  if (y > 0) {
   radian = Math.PI / 2;
  } else {
   radian = -Math.PI / 2;
  }
 }
 return (float) ((radian * 180) / Math.PI);
}

/**
 * 增加旋转角度
 *
 * @param angle 增加的角度
 */
private void IncreaseAngle(float angle) {
 rotateAngle += angle;
 if (rotateAngle < 0) {
  rotateAngle = 0;
 } else if (rotateAngle > 270) {
  rotateAngle = 270;
 }
 temperature = (int) (rotateAngle / 4.5) / angleRate + minTemp;
}

提供一些接口方法

/**
 * 设置温度
 *
 * @param minTemp 最小温度
 * @param maxTemp 最大温度
 * @param temp 设置的温度
 */
public void setTemp(int minTemp,int maxTemp,int temp) {
 this.minTemp = minTemp;
 this.maxTemp = maxTemp;
 this.temperature = temp;
 this.angleRate = 60 / (maxTemp - minTemp);
 rotateAngle = (float) ((temp - minTemp) * angleRate * 4.5);
 invalidate();
}

/**
 * 设置温度改变监听
 *
 * @param onTempChangeListener 监听接口
 */
public void setOnTempChangeListener(OnTempChangeListener onTempChangeListener) {
 this.onTempChangeListener = onTempChangeListener;
}

/**
 * 温度改变监听接口
 */
public interface OnTempChangeListener {
 /**
  * 回调方法
  *
  * @param temp 温度
  */
 void change(int temp);
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能有所帮助,如果有疑问大家可以留言交流。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读8.8k次,点赞9次,收藏20次。本文操作环境:win10/Android studio 3.21.环境配置 在SDK Tools里选择 CMAKE/LLDB/NDK点击OK 安装这些插件. 2.创建CMakeLists.txt文件 在Project 目录下,右键app,点击新建File文件,命名为CMakeLists.txt点击OK,创建完毕! 3.配置文件 在CMa..._link c++ project with gradle
文章浏览阅读1.2w次,点赞15次,收藏69次。实现目的:由mainActivity界面跳转到otherActivity界面1.写好两个layout文件,activity_main.xml和otherxml.xmlactivity_main.xml&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;RelativeLayout ="http://schemas..._android studio 界面跳转
文章浏览阅读3.8w次。前言:最近在找Android上的全局代理软件来用,然后发现了这两款神作,都是外国的软件,而且都是开源的软件,因此把源码下载了下来,给有需要研究代理这方面的童鞋看看。不得不说,国外的开源精神十分浓,大家相互使用当前基础的开源软件,然后组合成一个更大更强的大开源软件。好吧,废话不多说,下面简单介绍一下这两款开源项目。一、ProxyDroid:ProxyDroid功能比较强大,用到的技术也比较多,源码也_proxydroid
文章浏览阅读2.5w次,点赞17次,收藏6次。创建项目后,运行项目时Gradle Build 窗口却显示错误:程序包R不存在通常情况下是不会出现这个错误的。我是怎么遇到这个错误的呢?第一次创建项目,company Domain我使用的是:aven.com,但是创建过程在卡在了Building 'Calculator' Gradle Project info这个过程中,于是我选择了“Cancel”第二次创建项目,我还是使用相同的项目名称和项目路_r不存在
文章浏览阅读8.9w次,点赞4次,收藏43次。前言:在Android上使用系统自带的代理,限制灰常大,仅支持系统自带的浏览器。这样像QQ、飞信、微博等这些单独的App都不能使用系统的代理。如何让所有软件都能正常代理呢?ProxyDroid这个软件能帮你解决!使用方法及步骤如下:一、推荐从Google Play下载ProxyDroid,目前最新版本是v2.6.6。二、对ProxyDroid进行配置(基本配置:) (1) Auto S_proxydroid使用教程
文章浏览阅读1.1w次,点赞4次,收藏17次。Android Studio提供了一个很实用的工具Android设备监视器(Android device monitor),该监视器中最常用的一个工具就是DDMS(Dalvik Debug Monitor Service),是 Android 开发环境中的Dalvik虚拟机调试监控服务。可以进行的操作有:为测试设备截屏,查看特定进程中正在运行的线程以及堆栈信息、Logcat、广播状态信息、模拟电话_安卓摄像头调试工具
文章浏览阅读2.1k次。初学Android游戏开发的朋友,往往会显得有些无所适从,他们常常不知道该从何处入手,每当遇到自己无法解决的难题时,又往往会一边羡慕于 iPhone下有诸如Cocos2d-iphone之类的免费游戏引擎可供使用,一边自暴自弃的抱怨Android平台游戏开发难度太高,又连个像样的游 戏引擎也没有,甚至误以为使用Java语言开发游戏是一件费力不讨好且没有出路的事情。事实上,这种想法完全是没有必_有素材的游戏引擎
文章浏览阅读3.2k次,点赞2次,收藏2次。2014年12月从csdn专家福利获得的一本书《Android游戏开发技术实战详解》,尘封了一年多的时间,今天才翻开来看。我认识中的Android,提到Android最先浮现在我脑海中的是那可爱的机器人图标:这个Logo是由Ascender公司设计的,诞生于2010年,其设计灵感源于男女厕所门上的图形符号(真的是灵感无处不在),于是布洛克绘制了一个简单的机器人,它的躯干就像锡罐的形状,头上还有两根_智能手机的特点有哪些?
文章浏览阅读8.1k次,点赞9次,收藏11次。首先,Android是不是真的找工作越来越难呢?这个可能是大家最关心的。这个受大的经济环境以及行业发展前景的影响,同时也和个人因素有关。2016-08-26近期一方面是所在的公司招聘Java开发人员很难招到合适的,投简历的人很少;而另一方面,经常听身边的人说Android、iOS方面找工作不好找,特别是没什么经验的,经验比较少的!说是不好找,但在我家所在的吉林省省会长春,会Unity3D+Maya_android 开发和asp.net哪个好 site:blog.csdn.net
文章浏览阅读6.1k次。在上篇“走进Android开发的世界,HelloWorld”,我们创建了一个Android 项目 HelloWorld,并演示了如何通过USB连接手机查看运行效果;而如果没有手机或没有对应型号的手机,又想做对应型号(屏幕尺寸、Android系统版本)的适配,应该怎么办呢?这时Android模拟器就派上用场了。Android模拟器Android SDK自带一个移动模拟器。它是一个可以运行在你电脑上的_安卓移动开发软件怎样预览
文章浏览阅读8.9k次。Google IO 2017 上宣布,将Kotlin语言作为安卓开发的官方语言。Kotlin由JetBrains公司开发,与Java 100%互通,并具备诸多Java尚不支持的新特性。谷歌称还将与JetBrains公司合作,为Kotlin设立一个非盈利基金会。Kotlin 是一个基于 JVM 的静态类型编程语言,Kotlin可以编译成Java字节码,也可以编译成JavaScript,方便在没有JV_kotlin为什么被嫌弃
文章浏览阅读9.6w次,点赞17次,收藏35次。有些情况下,不方便使用断点的方式来调试,而是希望在控制台打印输出日志,使用过Eclipse的同学都知道Java可以使用 System.out.println(""); 来在控制台打印输出日志,但是在android studio中却是不行的,还是有差别的,那应该用什么呢?android.util.Log在调试代码的时候我们需要查看调试信息,那我们就需要用Android Log类。android.ut_andirod.studio 为什么不在控制台打印输出
文章浏览阅读8.2k次,点赞2次,收藏8次。在上篇“走进Android开发的世界,HelloWorld”,我们创建了一个Android 项目 HelloWorld,并演示了如何通过USB连接手机查看运行效果;这里讲一下如何为应用添加一个按钮,并为按钮添加Click单击事件处理程序,显示/隐藏另一个按钮。添加按钮在HelloWorld项目的基础上,打开界面布局文件:activity_main.xml切换到Design(设计)模式;在组件But_activity_main.xml按钮隐藏
文章浏览阅读2.9k次,点赞3次,收藏9次。android 开发工具主流的还是Android Studio,当然也有很多人喜欢用Eclipse,也有人喜欢用IntelliJ IDEA ;还有Xamarin这种只需要编写一次代码,可以编译多种平台可运行的强大工具。但是它又真的强大吗?就我看来没有,身边很多人还是在用Android Studio、XCode开发应用,没见谁在用Xamarin之类的工具。系统要求WindowsMicrosoft®_android开发下载安装
文章浏览阅读4.2k次,点赞7次,收藏26次。你知道Hello World程序的由来吗?对于大多数编程语言的学习来说,真正入门的一课就是 Hello World!会而不难,难而不会。虽然很多人写过关于Android开发Hello World的文章,但随着时间的推移,开发工具、技术的进步,可能有些已经过时了。我就记录一下当下我所经历的第一个Android APP HelloWorld。一、准备1、开发环境参考:Android Studio 下载_android helloworld textview 句柄获取
这篇“android轻量级无侵入式管理数据库自动升级组件怎么实现”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定...
今天小编给大家分享一下Android实现自定义圆形进度条的常用方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文...
这篇文章主要讲解了“Android如何解决字符对齐问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Android...
这篇文章主要介绍“Android岛屿数量算法怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Android岛屿数量算...
本篇内容主要讲解“Android如何开发MQTT协议的模型及通信”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Andro...