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开发者们能有所帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • Android 自定义按钮点击事件和长按事件对比

     Android 自定义按钮点击事件和长按事件对比 一个按钮同时实现点击和长按事件,有时候会有冲突,我们针对这一现象来自定义按钮来区分点击和长按事件 1.xml中 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="mat

  • Android自定义View制作动态炫酷按钮实例解析

    普通按钮也就那么几种样式,看着都审美疲劳,先放效果图: 你会不会以为这个按钮是集结了很多动画的产物,我告诉你,并没有.所有的实现都是基于自定义View,采用最底层的onDraw一点一点的画出来的.没有采用一丁点的动画.虽然演示时间很短,但是要完成这么多变化,还是挺吃力. 首先讲解用法: public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState)

  • Android自定义实现开关按钮代码

    我们在应用中经常看到一些选择开关状态的配置文件,做项目的时候用的是android的Switch控件,但是感觉好丑的样子子 个人认为还是自定义的比较好,先上个效果图: 实现过程: 1.准备开关不同状态的两张图片放入drawable中. 2.xml文件中添加代码: <ToggleButton android:id="@+id/switch1" android:layout_width="wrap_content" android:layout_height=&qu

  • Android自定义View实现拖动选择按钮

    本文为大家分享了Android实现拖动选择按钮的具体代码,供大家参考,具体内容如下 效果图 View代码 第一步:自定义属性 <declare-styleable name="DragView"> <attr name="icon_drag" format="reference"/> <attr name="color_circle" format="color"/> &

  • 自定义滑动按钮为例图文剖析Android自定义View绘制

    自定义View一直是横在Android开发者面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看,ViewGroup继承View. View的子类,多是功能型的控件,提供绘制的样式,比如imageView,TextView等,而ViewGroup的子类,多用于管理控件的大小,位置,如LinearLayout,RelativeLayout等,从下图可以看出 从实际应用中看,他们又是组合关系,我们在布局中,常常是一个ViewGroup嵌套多个ViewGro

  • Android自定义控件之开关按钮学习笔记分享

    今天来讲讲自定义单个控件,就拿开关按钮来讲讲,相信大家见了非常多这样的了,先看看效果: 我们可以看到一个很常见的开关按钮,那就来分析分析. 首先: 这是由两张图片构成: ①一张为有开和关的背景图片 ②一张为控制开和关的滑动按钮 第一步: 写个类继承View,并重写几个方法: 第一个为构造函数,重写一个参数的函数和两个参数的函数就够了,因为两个参数的函数能够使用自定义属性 第二个为控制控件的大小–>protected void onMeasure(int widthMeasureSpec, int

  • Android如何自定义按钮效果

    安卓原生的按钮是多么丑,效果是多么单调,大家也是有目共睹的. 要做一个APP少不了使用按钮,一个好看的按钮少不了好看的效果和外表,这次主要跟大家讲讲如何用drawable的xml文件弄一些好看的自定义样式. 首先是外表 在APP中四四方方,灰色底黑色字的按钮是很难看的,我们希望看到的是圆角,彩色,白字(根据你的个人审美也可以是其他样式). 首先是在layout里新建一个按钮 ,然后在drawable文件夹里新建一个drawable resource file ,不妨起名为shape ,加一个se

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

    首先看下效果图 温度旋转按钮 实现思路 初始化一些参数 绘制刻度盘 绘制刻度盘下的圆弧 绘制标题与温度标识 绘制旋转按钮 绘制温度 处理滑动事件 提供一些接口方法 实现方法 初始化一些参数 public class TempControlView extends View { // 控件宽 private int width; // 控件高 private int height; // 刻度盘半径 private int dialRadius; // 圆弧半径 private int arcRa

  • Android自定义控件eBook实现翻书效果实例详解

    本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; public class Book extend

  • Android SeekBar 自定义thumb旋转动画效果

    目录 简介 示例 dimens.xml drawable shape_thumb_round_1.xml layers_thumb_ring_sweep_1.xml rotate_thumb_1.xml layers_seek_bar_progress_1.xml layout Activity中调用 小结 简介 某些音乐播放或者视频播放的界面上,资源还在加载时,进度条的原点(thumb)会显示一个转圈的效果. 资源加载完成后,又切换回静态效果.这个效果增强了用户体验. 一般来说有美术人员负责设

  • Android自定义控件之三点循环缩放效果

    本文实例为大家分享了Android自定义控件之三点循环缩放的具体代码,供大家参考,具体内容如下 效果图如上,就是三点循环的变大.变小 package com.example.dotdemo; import java.util.ArrayList; import java.util.List; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.ani

  • 基于Android自定义控件实现刮刮乐效果

    只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧, 其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main 上代码!! 主activity: package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; imp

  • Android自定义控件简单实现侧滑菜单效果

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android自定义控件实现下拉刷新效果

    app开发中下拉刷新是最常接触到的一个功能,也有很多开源的框架,封装的非常棒.前段时间了解了一下ViewDragHelper,遂用它实现了下拉刷新的功能. 大概和我之前的ViewDragHelper之拖动加载(类似淘宝)这篇代码类似.只是做了相关改动.具体的可以看一下那篇博文了解一下用到的ViewDragHelper的一些知识点.该界面主要是一个LinearLayout,上面的下拉刷新是一个textview(用TV代替),当然这个可以定制,在此只是用一个textview代替,实现简单的功能,下面

  • Android自定义控件之广告条滚动效果

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

  • Android自定义控件实现球赛比分条效果

    本文实例为大家分享了Android实现球赛比分条效果的具体代码,供大家参考,具体内容如下 效果图如下所示: 该控件需要输入两个参数,左边的得分数和右边的的分数 然后根据两边的得分的比例绘制中间的比分条 首先将控件的宽度平均分配为10分,第一份和最后一份分别绘制左边的比分数字和右边的比分数字 中间的8分宽度绘制比分条 根据左右两个比分所占的比例,绘制两个两条首位相连的线段即可 完整代码如下: public class CustomScoreBar extends View { private Co

  • Android实现带有进度条的按钮效果

    本文实例为大家分享了Android实现带有进度条按钮效果的具体代码,供大家参考,具体内容如下 安卓中带有进度条效果的按钮,如下图: 1.布局文件如下activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_wid

随机推荐