Android实现指针刻度转盘

本文实例为大家分享了Android实现指针刻度转盘的具体代码,供大家参考,具体内容如下

一. 先上个效果图,实现如图所示刻度转盘和2个文本的绘制,最后1个刻度绘制的比较长一些(后期会添加动画效果,未完待续…):

二. 话不多说,上代码,Timber可使用Log代替,也可根据自身需求将配置属性放到attrs.xml中去:

package com.landleaf.householdtype.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;

import timber.log.Timber;

public class PanelTempCircle extends View {
 private static final String TAG = PanelTempCircle.class.getSimpleName();
 //#EFEFEF
 //#47C496
 private Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
 //画笔宽度,线段长度,最后一条大线条的长度 比其他线段长的长度
 private int strokeWidth = 7, lineLength = 40, maxLineLength = 10;

 //绘制文本距离圆
 private int txtMargin = 10;

 //中心点坐标
 private int centerX, centerY;

 //内圆半径,外圆半径
 private int innerRadius, outRadius;

 //绘制文本
 private String leftText = "0", rightText = "30";

 //绘制文本的字体大小
 private int textSize = 25;

 //背景 or 进度条颜色
 private int colorBackground = Color.parseColor("#EFEFEF");
 private int colorProgress = Color.parseColor("#18C8C7");
 private int colorText = Color.parseColor("#999999");

 float fullAngle = 180f;
 float cutAngle = 90f;

 //每个线段相隔的宽度
 private static final int perAngle = 6;

 private int startAngle = -12;

 public PanelTempCircle(Context context) {
  super(context);
  initPaint(context, null);
 }

 public PanelTempCircle(Context context, @Nullable AttributeSet attrs) {
  super(context, attrs);
  initPaint(context, attrs);
 }

 private void initPaint(Context context, AttributeSet attrs) {
  paint.setStrokeCap(Paint.Cap.ROUND);
  paint.setTextSize(textSize);
  paint.setStrokeWidth(strokeWidth);
  paint.setTextAlign(Paint.Align.CENTER);
  paint.setColor(colorBackground);
 }

 public PanelTempCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initPaint(context, attrs);
 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  drawCircle(startAngle, 60, canvas, paint);
 }

 private void drawCircle(float startAngle, float endAngle, Canvas canvas, Paint paint) {

  for (float i = startAngle; i <= fullAngle - startAngle; i = i + perAngle) {
   //-12.-6,0,6....180,186,192
   //得出坐标
   int startM, startN, endM, endN, startX, startY, endX, endY;
   int startPaintRadius = innerRadius;
   int endPaintRadius = outRadius;
   float currentAngle = i;
   if (i <= 0) {
    currentAngle = Math.abs(i);
   } else if (currentAngle > fullAngle) {
    currentAngle = i - fullAngle;
   }
   //当前进度=结束进度
   if (i == endAngle) {
    startPaintRadius = innerRadius - maxLineLength;
    endPaintRadius = outRadius + maxLineLength;
   }
   //起始点
   double angleSin = Math.sin(Math.PI * (Math.abs(currentAngle) / fullAngle));
   //起始点 高度 宽度
   startM = (int) (angleSin * startPaintRadius);
   startN = (int) Math.sqrt(Math.pow(startPaintRadius, 2) - Math.pow(startM, 2));
   //结束点 高度 宽度
   endM = (int) (angleSin * endPaintRadius);
   endN = (int) Math.sqrt(Math.pow(endPaintRadius, 2) - Math.pow(endM, 2));
//   Log.i(TAG, startM + "," + startN + "," + endM + "," + endN);
   //获得起始点和结束点的坐标
   if (i < 0) {
    //第三象限
    startX = centerX - startN;
    endX = centerX - endN;

    startY = centerY + startM;
    endY = centerY + endM;
   } else if (i > fullAngle) {
    //第二象限
    startX = centerX + startN;
    endX = centerX + endN;

    startY = centerY + startM;
    endY = centerY + endM;
   } else {
    if (i < cutAngle) {
     //第四象限
     startX = centerX - startN;
     endX = centerX - endN;

     startY = centerY - startM;
     endY = centerY - endM;
    } else {
     //第一象限
     startX = centerX + startN;
     endX = centerX + endN;

     startY = centerY - startM;
     endY = centerY - endM;
    }
   }
   //设置线条绘制颜色
   if (i <= endAngle) {
    paint.setColor(colorProgress);
   } else {
    paint.setColor(colorBackground);
   }
   canvas.drawLine(startX, startY, endX, endY, paint);
   //判断是否需要绘制文本
   if (i == startAngle) {
    int textWidth = getTextWidth(paint, leftText);
    paint.setColor(colorText);
    canvas.drawText(leftText, startX + textWidth + txtMargin, startY, paint);
    Timber.tag(TAG).i("绘制左侧文本:" + (startX + textWidth + txtMargin) + "," + startY);
   }
   if (i == fullAngle - startAngle) {
    int textWidth = getTextWidth(paint, rightText);
    paint.setColor(colorText);
    canvas.drawText(rightText, startX - textWidth - txtMargin, startY, paint);
    Timber.tag(TAG).i("绘制右侧文本:" + (startX - textWidth - txtMargin) + "," + startY);
   }
  }
 }

 public int getTextWidth(Paint paint, String str) {
  int iRet = 0;
  if (str != null && str.length() > 0) {
   int len = str.length();
   float[] widths = new float[len];
   paint.getTextWidths(str, widths);
   for (int j = 0; j < len; j++) {
    iRet += (int) Math.ceil(widths[j]);
   }
  }
  return iRet;
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  innerRadius = (getMeasuredWidth() - lineLength * 2 - maxLineLength * 2) / 2;
  outRadius = lineLength + innerRadius;
  Timber.tag(TAG).i("内圈半径:" + innerRadius + ",外圈半径:" + outRadius);
  centerX = outRadius + maxLineLength;
  centerY = outRadius + maxLineLength;
  Timber.tag(TAG).i("中心坐标:(x=" + centerX + ",y=" + centerY + ")");

  int heightMode = MeasureSpec.getMode(heightMeasureSpec);
  if (heightMode == MeasureSpec.AT_MOST) {
   double angleSin = Math.sin(Math.PI * (Math.abs(startAngle) / fullAngle));
   int endPaintRadius = outRadius + maxLineLength;
   int height = (int) (endPaintRadius + angleSin * endPaintRadius);
   setMeasuredDimension(widthMeasureSpec, height);
  }
 }
}

三. xml中使用方式:

说明:主要申明宽度即可,高度会在代码中进行计算;

<com.landleaf.householdtype.widget.PanelTempCircle
  android:id="@+id/mptc_set_temp"
  android:layout_width="270dp"
  android:layout_height="wrap_content"
  app:layout_constraintBottom_toTopOf="@+id/tvHumidity"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.3" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 8.1 Launcher3实现动态指针时钟功能

    本文主要实现功能,可能有不合理的地方 首先创建一个实现功能的工具里,直接上代码: import android.content.Context; import android.graphics.Bitmap; import android.os.Handler; import android.os.Message; import com.android.launcher3.ItemInfo; import com.android.launcher3.LauncherSettings; impor

  • Android自定义View实现抽奖转盘

    本文实例为大家分享了Android自定义View实现抽奖转盘的具体代码,供大家参考,具体内容如下 public class LuckCircle extends SurfaceView implements SurfaceHolder.Callback,Runnable { private SurfaceHolder mHolder; private Canvas mCanvas; //用于绘制的线程 private Thread mThread; //线程开关的控制 private boole

  • Android实现可点击的幸运大转盘

    之前的项目有一个幸运大转盘的功能,在网上找了很久,都没有合适的方法. 这是效果图,实现目标:十二星座的图片可点击切换选中效果,根据选择不同的星座,实现不同的 方法.之前网上的都是带有指针的,或者可点击改变效果,但是并不知道选择的到底是哪个,即虚拟选择. 实现该功能的主要代码如下: 1.自定义一个布局,存放图片,实现圆形布局. /** * * * CircleMenuLayout.java * * @author wuxiaosu * */ public class CircleMenuLayou

  • Android中利用SurfaceView制作抽奖转盘的全流程攻略

    一.概述 今天给大家带来SurfaceView的一个实战案例,话说自定义View也是各种写,一直没有写过SurfaceView,这个玩意是什么东西?什么时候用比较好呢? 可以看到SurfaceView也是继承了View,但是我们并不需要去实现它的draw方法来绘制自己,为什么呢? 因为它和View有一个很大的区别,View在UI线程去更新自己:而SurfaceView则在一个子线程中去更新自己:这也显示出了它的优势,当制作游戏等需要不断刷新View时,因为是在子线程,避免了对UI线程的阻塞. 知

  • Android使用surfaceView自定义抽奖大转盘

    使用surfaceView自定义抽奖大转盘 话不多说,先上效果图 完整代码地址欢迎start 实现思路以及过程 1.首先了解SurfaceView的基本用法,它跟一般的View不太一样,采用的双缓存机制,可以在子线程中绘制View,不会因为绘制耗时而失去流畅性,这也是选择使用SurfaceView去自定义这个抽奖大转盘的原因,毕竟绘制这个转盘的盘块,奖项的图片和文字以及转动都是靠绘制出来的,是一个比较耗时的绘制过程. 2.使用SurfaceView的一般模板样式 一般会用到的成员变量 priva

  • Android自定义view制作抽奖转盘

    本文实例为大家分享了Android自定义view制作抽奖转盘的具体代码,供大家参考,具体内容如下 效果图 TurntableActivity package com.bawei.myapplication.turntable; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; im

  • 基于Android实现转盘按钮代码

    先给大家展示下效果图: package com.lixu.circlemenu; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.TextView; import android.widget.Toast; import com.lixu.circlemenu.view.CircleImageView; import com.lixu.ci

  • Android实现抽奖转盘实例代码

    本文详述了android抽奖程序的实现方法,程序为一个抽奖大转盘代码,里面定义了很多图形方法和动画. 实现主要功能的SlyderView.java源代码如下: import android.app.Activity; import android.content.Context; import android.graphics.BlurMaskFilter; import android.graphics.Canvas; import android.graphics.Color; import

  • Android自定义View实现QQ运动积分转盘抽奖功能

    因为偶尔关注QQ运动, 看到QQ运动的积分抽奖界面比较有意思,所以就尝试用自定义View实现了下,原本想通过开发者选项查看下界面的一些信息,后来发现积分抽奖界面是在WebView中展示的,应该是在H5页面中用js代码实现的,暂时不去管它了. 这里的自定义View针对的是继承自View的情况,你可以将Canvas想象为画板, Paint为画笔,自定义View的过程和在画板上用画笔作画其实类似,想象在画板上作画的过程,你要画一个多大图形(对应View的测量 onMeasure方法),你要画什么样的图

  • android中实现指针滑动的动态效果方法

    复制代码 代码如下: <FrameLayout            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="#fff"            android:paddingBottom="5dp"            android

随机推荐