前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android开发笔记(九十九)圆形转盘

Android开发笔记(九十九)圆形转盘

作者头像
aqi00
发布2019-01-18 14:04:57
1.8K0
发布2019-01-18 14:04:57
举报
文章被收录于专栏:老欧说安卓老欧说安卓

圆形转盘的实现思想

圆形转盘的运用场景常见的有:抽奖转盘、圆形菜单列表、热点客户端环状列表等等。对于圆形转盘的编码实现,主要难点除了手势的触摸控制之外,就在于旋转角度的计算了。下面是旋转角度计算的解决办法: 一、运用Math类的三角函数,计算视图旋转到某个角度时的x坐标和y坐标,此时旋转的圆心是转盘的中心点; 二、运用Path类和Matrix类,对指定文本或图像做旋转操作,此时旋转的圆心是文本或图像的中心点; 三、刷新整个转盘的视图,对于继承自View的视图,直接调用postInvalidate方法即可。对于继承自ViewGroup的视图容器,情况要复杂些,大致得进行以下步骤处理: 1、先删除下面的所有视图,然后添加新的视图,最后请求刷新布局。具体代码示例如下:

代码语言:javascript
复制
		removeAllViews();
		addView(mImageView);
		requestLayout();

2、重写onMeasure函数,该函数原本只测量容器;对于新加入的子视图,我们要手工测量子视图。即先调用MeasureSpec.makeMeasureSpec方法获得测量的描述,然后调用子视图的measure方法完成测量。具体代码示例如下:

代码语言:javascript
复制
		int mode = MeasureSpec.EXACTLY;
		int makeMeasureSpec = MeasureSpec.makeMeasureSpec(300, mode);
		mImageView.measure(makeMeasureSpec, makeMeasureSpec);

3、重写onLayout函数,该函数原本只指定整个容器的位置;对于新加入的子视图,我们要手工指定子视图的位置,即调用子视图的layout方法完成布局。具体代码示例如下:

代码语言:javascript
复制
		if (mImageView != null) {
			//这里要设置子控件的位置,另外子控件的位置为相对位置不是绝对位置
			mImageView.layout(0, 0, 500, 500);
		}

圆形转盘的知识准备

Math

Math类是java的数学计算工具类,常用的方法如下所示: 取整与比较函数 random : 取0-1之间的纯小数 abs : 取绝对值 round : 四舍五入取整,返回整型数。 rint : 小数位四舍五入,返回双精度数。 ceil : 向上取整。若是负数,则往数值大的方向取整。 floor : 向下取整。若是负数,则往数值小的方向取整。 max : 取两个数字中的较大值 min : 取两个数字中的较小值 科学计算函数 sqrt : 求平方根 cbrt : 求立方根 exp : 计算e的n次幂 log : 求自然对数值(底数为e) log10 : 求底数为10的对数值 pow : 求n次方根 三角函数 sin : 求正弦函数值 cos : 求余弦函数值 tan : 求正切函数值 asin : 求反正弦函数值 acos : 求反余弦函数值 atan : 求反正切函数值

Path

Path类是android用于定义画笔路径的工具类,常用的方法如下所示: reset : 重置路径 moveTo : 移动到指定位置 lineTo : 定义与之前路径无关的直线 quadTo : 定义与之前路径衔接的平滑曲线 cubicTo : 定义平滑曲线。cubicTo与quadTo的区别在于:quadTo要与moveTo配合使用才能实现平滑效果,而cubicTo多了两个参数,相当于内部已经包含了moveTo的功能。 arcTo : 定义弧线 addRect : 添加矩形路径 addOval : 添加椭圆路径 addCircle : 添加圆形路径 addArc : 添加弧形路径 addRoundRect : 添加圆角矩形路径 addPath : 添加现有路径

Matrix

Matrix类是android用于定义图像矩阵的工具类,常用的方法如下所示: setTranslate : 设置平移参数 setScale : 设置缩放参数 setRotate : 设置旋转参数 setSkew : 设置倾斜参数 postTranslate : 发送平移动作 postScale : 发送缩放动作 postRotate : 发送旋转动作 postSkew : 发送倾斜动作

Canvas

Canvas画布的详细用法参见《Android开发笔记(十三)视图绘制的几个方法》,下面列出的是用到Path和Matrix的方法: clipPath : 根据指定Path路径裁剪画布 drawPath : 在指定Path路径上绘画 drawTextOnPath : 在指定Path路径上写文本 drawBitmap : 根据指定矩阵画图 Bitmap.createBitmap : 根据指定矩阵创建图像

代码示例

限于篇幅,这里就不贴出圆形转盘的源码了,有需要的朋友可留下邮箱,我看到后把工程打包用邮件发过去。下面列出文本旋转和图像旋转的代码例子。

文本旋转

旋转文本先调用Path类的addArc方法添加一段弧形路径,再调用Canvas的drawTextOnPath方法在该弧形路径上画出文本。下面是一个可旋转文本的自定义控件代码:

代码语言:javascript
复制
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class RotateTextView extends View {

	private Context mContext;
	private Paint mTextPaint;
	private String mText;
	private int mDegree;

	public RotateTextView(Context context) {
		this(context, null);
	}
	
	public RotateTextView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		mTextPaint = new Paint();
		mTextPaint.setColor(0xFF000000);
		mTextPaint.setTextSize(35);
	}

	@SuppressLint("DrawAllocation")
	@Override
	protected void onDraw(Canvas canvas) {
		Path path = new Path();
		RectF oval = new RectF(50, 50, 300, 300);
		path.addArc(oval, mDegree, mDegree+60);
		canvas.drawTextOnPath(mText, path, 0, 0, mTextPaint);
	}

	public void setDegree(String text, int degree) {
		mText = text;
		mDegree = degree;
		postInvalidate();
	}

}

图像旋转

旋转图像有两种办法: 1、先调用Matrix类的postRotate方法设置旋转角度,再根据设置好的Matrix调用Bitmap的createBitmap方法创建旋转后的图像; 2、先调用Matrix类的setRotate方法设置旋转角度,再根据设置好的Matrix调用Canvas的drawBitmap方法创建旋转后的图像; 下面是一个可旋转图像的自定义控件代码:

代码语言:javascript
复制
import com.example.exmturntable.util.BitmapUtil;
import com.example.exmturntable.util.MetricsUtil;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.os.Build;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class RotateImageView extends ViewGroup {

	private final static String TAG = "RotateImageView";
	private Context mContext;
	private ImageView mImageView;
	private int dip_50;
	
	public RotateImageView(Context context) {
		this(context, null);
	}

	public RotateImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		mContext = context;
		dip_50 = MetricsUtil.dip2px(mContext, 50);
	}
	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//		设置测量尺寸
//		int mode = MeasureSpec.EXACTLY;
//		int makeMeasureSpec = MeasureSpec.makeMeasureSpec(300, mode);
//		mImageView.measure(makeMeasureSpec, makeMeasureSpec);
//		Log.d(TAG, "onMeasure getMeasuredWidth()="+mImageView.getMeasuredWidth()+", onMeasure getMeasuredHeight()="+mImageView.getMeasuredHeight());
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		if (mImageView != null) {
			//这里要设置子控件的位置,另外子控件的位置为相对位置不是绝对位置
			mImageView.layout(0, 0, 500, 500);
		}
	}
	
	@TargetApi(Build.VERSION_CODES.JELLY_BEAN)
	public void setDegree(int img_res, int degree, int type) {
		removeAllViews();
		mImageView = new ImageView(mContext);
		Bitmap bitmap;
		if (type == 0) {
			bitmap = BitmapUtil.getRotateBitmap(
					BitmapFactory.decodeResource(getResources(), img_res), degree%360);
		} else {
			bitmap = BitmapUtil.getRotateBitmap2(
					BitmapFactory.decodeResource(getResources(), img_res), degree%360);
		}
		mImageView.setVisibility(View.VISIBLE);
		mImageView.setImageBitmap(bitmap);
		mImageView.setScaleType(ScaleType.FIT_CENTER);
		mImageView.setPadding(0, dip_50, dip_50, dip_50);
		addView(mImageView);
		
		requestLayout();
	}

	public static Bitmap getRotateBitmap(Bitmap b, float rotateDegree) {
		Matrix matrix = new Matrix();
		matrix.postRotate((float)rotateDegree);
		Bitmap rotaBitmap = Bitmap.createBitmap(b, 0, 0, b.getWidth(), b.getHeight(), matrix, false);
		return rotaBitmap;
	}

	public static Bitmap getRotateBitmap2(Bitmap bm, float rotateDegree) {
		Matrix m = new Matrix();
		m.setRotate(rotateDegree, (float)bm.getWidth()/2, (float)bm.getHeight()/2);
		Bitmap bm_new = Bitmap.createBitmap(bm.getHeight(), bm.getWidth(), Bitmap.Config.ARGB_8888);
		Paint paint = new Paint();
		Canvas canvas = new Canvas(bm_new);
		canvas.drawBitmap(bm, m, paint);
		return bm_new;
	}

}

下面是热点客户端环状列表的效果截图

点击下载本文用到的圆形转盘的工程代码 点此查看Android开发笔记的完整目录

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年05月11日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 圆形转盘的实现思想
  • 圆形转盘的知识准备
    • Math
      • Path
        • Matrix
          • Canvas
          • 代码示例
            • 文本旋转
              • 图像旋转
              相关产品与服务
              容器服务
              腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档