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, 0, -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, -dialRadius, 0, -dialRadius + scaleHeight, 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, 0, 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, width / 2, height / 2);
  canvas.drawText(maxTemp + "", (width - tempFlagWidth) / 2, height + dp2px(5), 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开发者们能有所帮助，如果有疑问大家可以留言交流。

# android  # 旋转按钮  # 按钮旋转动画  # 自定义控件  # Android自定义实现开关按钮代码  # Android自定义View实现拖动选择按钮  # Android自定义View制作动态炫酷按钮实例解析  # Android自定义控件之开关按钮学习笔记分享  # 自定义滑动按钮为例图文剖析Android自定义View绘制  # Android如何自定义按钮效果  # Android 自定义按钮点击事件和长按事件对比  # 求出  # 回调  # 最高温度  # 抗锯齿  # 这篇文章  # 移到  # 滑过  # 后期  # 圆点  # 最低温度  # 有疑问  # PaintFlagsDrawFilter 

相关文章： 免费公司网站制作软件,如何申请免费主页空间做自己的网站？  高端建站三要素：定制模板、企业官网与响应式设计优化  建站之星好吗？新手能否轻松上手建站？  网站制作免费,什么网站能看正片电影？  视频网站app制作软件,有什么好的视频聊天网站或者软件？  如何配置WinSCP新建站点的密钥验证步骤？  公司门户网站制作公司有哪些,怎样使用wordpress制作一个企业网站？  如何生成腾讯云建站专用兑换码？  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  唐山网站制作公司有哪些,唐山找工作哪个网站最靠谱？  建站主机默认首页配置指南：核心功能与访问路径优化  如何快速查询网址的建站时间与历史轨迹？  如何快速上传自定义模板至建站之星？  广州美橙建站如何快速搭建多端合一网站？  魔毅自助建站系统：模板定制与SEO优化一键生成指南  北京制作网站的公司,北京铁路集团官方网站？  婚礼视频制作网站,学习*后期制作的网站有哪些？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  如何快速查询域名建站关键信息？  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  实现虚拟支付需哪些建站技术支撑？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  如何设置并定期更换建站之星安全管理员密码？  建站之星安装需要哪些步骤及注意事项？  Android自定义listview布局实现上拉加载下拉刷新功能  如何解决ASP生成WAP建站中文乱码问题？  香港服务器租用费用高吗？如何避免常见误区？  怎么将XML数据可视化 D3.js加载XML  建站主机选哪家性价比最高？  *服务器网站为何频现安全漏洞？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  如何通过WDCP绑定主域名及创建子域名站点？  C++中引用和指针有什么区别？（代码说明）  如何做静态网页,sublimetext3.0制作静态网页？  制作网站的过程怎么写,用凡科建站如何制作自己的网站？  武汉网站如何制作,黄黄高铁武穴北站途经哪些村庄？  宝盒自助建站智能生成技巧：SEO优化与关键词设置指南  高性能网站服务器部署指南：稳定运行与安全配置优化方案  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  模具网站制作流程,如何找模具客户？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  网站设计制作公司地址,网站建设比较好的公司都有哪些？  Python路径拼接规范_跨平台处理说明【指导】  如何解决VPS建站LNMP环境配置常见问题？  网站app免费制作软件,能免费看各大网站视频的手机app？  全景视频制作网站有哪些,全景图怎么做成网页？  手机怎么制作网站教程步骤,手机怎么做自己的网页链接？  黑客入侵网站服务器的常见手法有哪些？  如何在阿里云虚拟主机上快速搭建个人网站？  如何快速建站并高效导出源代码？