圆形动态分配图

最新推荐文章于 2024-03-05 14:41:29 发布
最新推荐文章于 2024-03-05 14:41:29 发布
阅读量1k 收藏
点赞数
分类专栏： Android自学 文章标签： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012892687/article/details/50678088
版权

昨天项目中需要让我来做个动态分布图

效果如图：

在网上也查了很多，但发现大多数都是使用的第三方工具包。虽然都不错，但个人还是想通过自定义来实现一个，如有不足多多指教

先自定义了个继承SurfaceView的View

package com.haolixin.view;

import java.util.Timer;
import java.util.TimerTask;

import com.haolixin.activity.R;
import com.haolixin.models.Trading;
import com.haolixin.models.TradingList;
import com.haolixin.utils.DensityUtil;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;
import android.view.View;

/**
 * 多个扇形百分比View
 * @author linking
 */
public class DataCircleView extends SurfaceView implements Callback {

	private Canvas mCanvas;
	private Paint mPaint;
	private SurfaceHolder holder;
	private Timer drawTimer, moveTimer;// 绘制圆的线程和转动圆的线程
	private DrawTimerTask drawTimerTask;
	private MoveTimerTask moveTimerTask;
	private float radius;// 圆的的半径
	private float x0, y0;// 圆心的坐标
	private TradingList list;// 数据百分比的数组
	private int height, width;
	private String total = "";
	private boolean canClick = false;
	private int totalAngle = 0;
	private int position;// 标记点击的是哪个position

	public DataCircleView(Context context, AttributeSet attrs) {
		super(context, attrs);

		// 使surfaceview设置的背景有效
		setLayerType(View.LAYER_TYPE_SOFTWARE, null);
		setZOrderOnTop(true);
		getHolder().setFormat(PixelFormat.TRANSPARENT);
		getHolder().addCallback(this);
	}

	public void init() {

		this.holder = getHolder();
		drawTimer = new Timer();
		mPaint = new Paint();
		mPaint.setColor(Color.BLUE);
		mPaint.setAntiAlias(true);

		// 绘制圆环
		drawTimerTask = new DrawTimerTask();
		drawTimer.schedule(drawTimerTask, 150, 1);

	}

	class DrawTimerTask extends TimerTask {
		public void run() {
			if (list == null) {
				drawTimer.cancel();
				return;
			}

			if (totalAngle < 360) {
				// 开启一个线程，每一毫秒执行一次绘制，慢慢增加ANGLE
				// 循环绘制，每次绘制的圆环角度不一样，慢慢增加至360，模拟缩放效果
				drawRectF(totalAngle, list.getStart());
				totalAngle += 12;

			} else {
				// 最终绘制一个360度的圆
				drawRectF(360, list.getStart());
				cancelTimer();
			}
		}
	};

	private float start;
	class MoveTimerTask extends TimerTask {

		public void run() {
			float moveAngle = list.getStartAngle();
			if (Math.abs(start - moveAngle) > 180)
				start -= 360;
			try {
				// 转动
				if (start < moveAngle) {
					drawRectF(360, start);
					start += 8;

				} // 转动
				else if (start > moveAngle) {
					drawRectF(360, start);
					start -= 8;

				}
				if (Math.abs(start - moveAngle) <= 10) {
					drawRectF(360, moveAngle);
					post(new Runnable() {
						public void run() {
							if (onCircleItemClickListener != null)
								onCircleItemClickListener.OnItemSelected(position);
						}
					});
					cancelTimer();
					// 当转完之后可以点击
					canClick = true;
				}
			} catch (Exception e) {
				e.printStackTrace();
				cancelTimer();
			}
		}

	}

	/*
	 * /* (non-Javadoc)
	 * 
	 * @see android.view.View#onTouchEvent(android.view.MotionEvent)
	 */
	public boolean onTouchEvent(MotionEvent event) {
		if (event.getAction() == MotionEvent.ACTION_DOWN && canClick) {
			float x = event.getX() - x0;
			float y = y0 - event.getY();

			position = list.getWhichClicked(x, y, radius);
			if (position >= 0) {
				list.sort(position);
				start = list.getStart();
				cancelTimer();
				moveTimer = new Timer();
				moveTimer.schedule(new MoveTimerTask(), 200, 1);
				canClick = false;
			}
		}

		return true;
	}

	/**
	 * 根据百分比绘制一个扇形
	 * 
	 * @param percent
	 *            每个扇形快占的百分比
	 * @param angle
	 *            绘制占的角度，360表示一个整圆环
	 * @param startAngle
	 *            开始绘制的角度
	 */
	private float sss;
	private void drawRectF(float angle, float startAngle) {
		mCanvas = holder.lockCanvas();
		try {
			height = mCanvas.getHeight();
			width = mCanvas.getWidth();

			RectF mRectF = new RectF(width / 2 - radius, 0, width / 2 + radius, height);
			radius = height / 2;
			x0 = width / 2;
			y0 = height / 2;
			sss = startAngle;
			for (int i = 0; i < list.size(); i++) {
				Trading data = list.get(i);

				mPaint.setColor(getResources().getColor(data.getColor()));
				mCanvas.drawArc(mRectF, sss, data.sweepAngle * angle / 360, true, mPaint);
				//画上图标暂时不需要
//				float middleAngle = sss + data.sweepAngle * angle / 360 / 2;
//				middleAngle = middleAngle > 180 ? 360 - middleAngle : -middleAngle;
//				drawImage(BitmapFactory.decodeResource(getResources(), data.getLittleImageId()), middleAngle);
				sss += data.sweepAngle * angle / 360f;
			}

			// 绘制中间的白圈
			mPaint.setColor(Color.WHITE);
			mCanvas.drawCircle(x0, y0, radius * 3 / 5, mPaint);

			// 绘制文字
			mPaint.setColor(0xff999999);
			mPaint.setTextSize(DensityUtil.sp2px(getContext(), 16));
			mPaint.setTextAlign(Align.CENTER);
			mCanvas.drawText("交易总量", x0, y0 - DensityUtil.dp2px(getContext(), 22), mPaint);
			mPaint.setColor(0xff333333);
			mPaint.setTextSize(DensityUtil.sp2px(getContext(), 20));
			mCanvas.drawText(total, x0, y0 + DensityUtil.dp2px(getContext(), 22), mPaint);

			holder.unlockCanvasAndPost(mCanvas);
		} catch (Exception e) {
		}
	}

	public void drawImage(Bitmap bitmap, float middleAngle) {
		Rect dst = new Rect();// 屏幕 >>目标矩形
		int width = 30;// 绘制图片的高度
		int height = 35;// 宽度
		int left = (int) (x0 + radius * 4 / 5 * Math.cos(middleAngle / 180f * Math.PI)) - width / 2;
		int top = (int) (y0 - radius * 4 / 5 * Math.sin(middleAngle / 180f * Math.PI)) - height / 2;

		dst.left = left;
		dst.top = top;
		dst.right = left + width;
		dst.bottom = top + height;
		// 画出指定的位图，位图将自动--》缩放/自动转换，以填补目标矩形
		// 这个方法的意思就像 将一个位图按照需求重画一遍
		mCanvas.drawBitmap(bitmap, null, dst, null);
		dst = null;
	}

	public void setData(String total, TradingList list, boolean canClick, OnCircleItemClickListener l) {
		cancelTimer();

		this.canClick = canClick;
		this.total = total;
		this.list = list;
		this.onCircleItemClickListener = l;

		init();

	}

	public void surfaceCreated(SurfaceHolder holder) {

	}

	public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

	}

	public void surfaceDestroyed(SurfaceHolder holder) {
		cancelTimer();
	}

	public void cancelTimer() {
		if (drawTimer != null)
			drawTimer.cancel();
		if (moveTimer != null)
			moveTimer.cancel();
		if (drawTimerTask != null)
			drawTimerTask.cancel();
		if (moveTimerTask != null)
			moveTimerTask.cancel();
	}

	// 选中哪个圆环时的监听
	private OnCircleItemClickListener onCircleItemClickListener;
	public interface OnCircleItemClickListener {
		public void OnItemSelected(int position);
	}

}
里面需要两个bean，一个是用来记录一共有多少数据的List数组 

package com.haolixin.models;

import java.util.ArrayList;

/**
 * @author linking
 *
 */
public class TradingList {

	private ArrayList<Trading> list;
	private int number = 0;
	private float start;// 扇形开始的角度

	public TradingList() {
		list = new ArrayList<Trading>();
	}

	public void add(Trading data) {

		if (data.percent <= 0)
			return;
		data.id = number;

		// 计算初始角度
		if (number == 0) {
			data.startAngle = (25 - data.percent / 2f) / 100f * 360;
			start = data.startAngle;// 最开始的角度就是第一个的角度
		} else {
			data.startAngle = list.get(number - 1).sweepAngle + list.get(number - 1).startAngle;
		}
		data.sweepAngle = data.percent / 100f * 360;

		number++;
		list.add(data);

	}

	/**
	 * 重新对数据进行排序
	 * 
	 * @param poistion
	 *            将这个position的对象排到第一个
	 */
	public void sort(int poistion) {
		// 每次转动钱先保存点击的这个扇形开始的角度
		start = list.get(poistion).startAngle;

		for (int i = 0; i < list.size(); i++) {
			Trading data = list.get(i);
			data.id = (data.id + (number - poistion)) % number;
		}
		ArrayList<Trading> l = new ArrayList<Trading>();
		for (int i = 0; i < list.size(); i++) {
			for (int j = 0; j < number; j++) {
				Trading data = list.get(j);
				if (data.id == i) {
					l.add(data);
					break;
				}
			}
		}
		list = l;

		for (int i = 0; i < number; i++) {
			Trading data = list.get(i);
			if (i == 0) {
				data.startAngle = (25 - data.percent / 2f) / 100f * 360;
			} else {
				data.startAngle = list.get(i - 1).sweepAngle + list.get(i - 1).startAngle;
			}
			data.sweepAngle = data.percent / 100f * 360;
		}

	}

	/**
	 * 根据点击的坐标获取点击是哪个区域
	 * 
	 * @param x
	 * @param y
	 */
	public int getWhichClicked(float x, float y, float radius) {
		float angle = 0;
		// 判断是否在弧圈内
		if ((x * x + y * y) > (radius / 2) * (radius / 2) && (x * x + y * y) < radius * radius) {
			if (y > 0) {
				angle = (int) (-Math.acos(x / Math.sqrt(x * x + y * y)) / Math.PI * 180);
			} else
				// 获取到点击点相对于x正轴的角度
				angle = (int) (Math.acos(x / Math.sqrt(x * x + y * y)) / Math.PI * 180);
			// 转换成相对于开始绘制角度的角度

			angle = (angle + 360) % 360;
			// 根据总角度确认点击是哪个区域
			for (int i = 0; i < list.size(); i++) {
				Trading data = list.get(i);
				float a1 = data.startAngle;
				float a2 = a1 + data.sweepAngle;
				if (angle >= a1 && angle <= a2) {
					return i;
				} else if ((angle + 360) >= a1 && (angle + 360) <= a2) {
					return i;
				}

			}
		}
		return -1;
	}

	/**
	 * 获取第一个开始的角度
	 * 
	 * @return
	 */
	public float getStartAngle() {
		return list.get(0).startAngle;
	}

	public Trading get(int position) {
		if (list.size() > 0)
			return list.get(position);
		else {
			return null;
		}
	}

	public int size() {
		return list.size();
	}

	public float getStart() {
		return start;
	}

}

还有一个就是具体的model 

package com.haolixin.models;

import com.haolixin.activity.R;

public class Trading {

	public String total;
	public float percent;
	public String source;
	public int sourceId;
	public int id;// 表示顺序
	public float startAngle;// 开始的角度
	public float sweepAngle;// 旋转过的角度

	public Trading() {

	}

	public Trading(String total_, float percent_, String source_, int sourceId_) {
		this.total = total_;
		this.percent = percent_;
		this.source = source_;
		this.sourceId = sourceId_;
	}

	/**
	 * 获取对应类型显示的文字
	 * 
	 * @return String
	 */
	public String getTitle() {
		return source + " " + (int) percent + "%";
	}

	public String getNumber() {
		return total + "笔";
	}

	/**
	 * 获取对应的类别的画笔颜色
	 * 
	 * @return 颜色整形 0xff000000
	 */
	public int getColor() {
		switch(sourceId){
		case 0:
			return R.color.lightgreen;
		case 1:
			return R.color.sky_blue;
		case 2:
			return R.color.silver;
		case 3:
			return R.color.lightyellow;
		case 4:
			return R.color.bisque;
		case 5:
			return R.color.peachpuff;
		case 6:
			return R.color.tomato;
			default:
				return R.color.white;
		}
	}

}

在initEvent中去调用 

package com.haolixin.activity;

import com.haolixin.models.Trading;
import com.haolixin.models.TradingList;
import com.haolixin.view.DataCircleView;
import com.haolixin.view.TitleBar;
import com.haolixin.view.TitleBar.topOnClickListener;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
/**
 * 资产配置
 * @author linking
 *
 */
public class AssetAllocationActivity extends Activity implements topOnClickListener{

	private DataCircleView mDataCircleView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_asset_allocation);
		initTitle();
		initUI();
		initEvent();
	}
	
	private void initTitle(){
		// 初始化标题栏
		TitleBar mTitleBar = (TitleBar) findViewById(R.id.title);
		mTitleBar.setTitleText("资产配置");
		mTitleBar.setLeftVisibility(true);
		mTitleBar.setTopBarListener(this);
	}

	@Override
	public void leftClick(View view) {
		finish();
	}

	@Override
	public void rightClick(View view) {
	}
	
	private void initUI(){
		mDataCircleView = (DataCircleView)findViewById(R.id.circle_view);
	}
	
	private void initEvent(){
		TradingList list = new TradingList();
		list.add(new Trading("", 30, "测试1", 0));
		list.add(new Trading("", 50, "测试2", 1));
		list.add(new Trading("",20,"测试3",2));
		mDataCircleView.setData("1.000.28", list, false, null);
	}
	
	protected void onResume() {
		super.onResume();
		if (mDataCircleView != null)
			mDataCircleView.init();
	}

}


具体的Demo版本下载链接 http://download.csdn.net/detail/u012892687/9433811

a544026227
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用css动态实现圆环百分比分配——初探css3动画
weixin_34248258的博客
08-17 5196
最近的小程序项目有个设计图要求做一个圆环，两种颜色分配，分别代表可用金额和冻结金额。要是就直接这么显示，感觉好像挺没水平？？于是我决定做个动态！ 在mdn把新特性gradients(渐变)、transitions(过渡)、 animations(动画) 都看了一遍，不禁感叹css牛逼！这三个新特性加上canvas，仿佛一瞬间有了正面刚js...
动态分配图
02-17
本项目中，我们讨论的是一个自定义的圆形动态分配图实现，虽然它需要开发者预先计算比例后再传递进去，这可能增加了使用上的复杂性，但同时也提供了更大的灵活性，允许开发者根据实际需求进行调整和优化。...
关于动态分布函数
lv_pg的博客
08-07 3635
动态分布函数的核心是malloc()和free()。每次调用malloc()时，军分配剩余空内存的一部分；每次调用free()时，均向系统返回内存。被分配的空内存区中的内存叫做堆(heap)。动态分配函数的原型在中。 函数malloc()的原型如下： void *malloc(size_t size)； 函数返回一个指针，指向从堆中分配的内存区域(参数size的值）的首字节。当堆中的内存不能
动态圆
weixin_34160277的博客
06-14 132
动态圆 <!doctype html> <html lang="zh" class="no-js"> <head> <meta charset="UTF-8"> <style> .cd-stroke { fill:...
带有动态圆环的圆形图片控件DynamicAvatarView
cj_286的博客
10-17 2871
效果图 现在大部分的app上难免会使用到圆形头像，所以今天我给大家分享一个单独使用的，并且周围带有圆环动画的花哨圆形头像控件，本控件是在圆形头像控件基础上实现的，只是在其周围再画一些不同大小的圆而已，就可以实现如图的效果 圆形头像的基本原理是将设置的资源文件转化成Bitmap,然后通过BitmapShader类将Bitmap成为Paint的渲染器，然后在onDraw()中通过canva
可视化篇（三）———使用Excel绘制动态数据分布饼图
Cyrus_May的博客
09-12 9002
可视化篇（三）———使用Excel绘制动态数据分布饼图摘要（一）问题引入（三）通过偏移引用函数offset创建偏移量（五）将偏移量字段插入数据透视表并作出饼图（六）3d图中绘制三角表面图（七）3d图中绘制等高线（八）3d图中绘制条形图摘要（一）添加matplotlib 3D模块（二）3d图中绘制曲线（三）3d图中绘制散点图（四）3d图中绘制线框图（五）3d图中绘制曲面图（六）3d图中绘制三角表面图（七）3d图中绘制等高线（八）3d图中绘制条形图 摘要 本文通过学习matplotlib绘制3d图形的官方文档，
iOS系统自带地图圆形区域选择范围
05-05
6. **计算半径**：在实际应用中，可能需要根据特定条件动态调整圆的半径。可以使用地理坐标系统（WGS84）下的距离公式来计算两点间的直线距离，再转换为米作为半径值。 7. **交互事件处理**：你可以监听MKMapView的...
SwiftDynamicButtons:动态生成圆形按钮
07-14
SwiftDynamicButtons是一个开源项目，专为iOS开发设计，旨在帮助开发者动态地创建和管理圆形按钮。这个库基于Apple的Swift编程语言，提供了便利的方法来定制和控制这些按钮，以适应各种用户界面需求。通过使用...
php实现背景图上添加圆形logo图标的方法
10-21
`imagealphablending($newpic,false)`确保透明度通道得到保留，`imagecolorallocatealpha()`分配一个透明的颜色，然后通过`imagecolorat()`和`imagefilledellipse()`等函数实现圆形效果。 最后，我们需要将圆形logo...
Android-Android圆形图片加载加载本地及网络图片
08-13
在实际项目中，我们还可以根据需求添加更多功能，例如支持圆角图片、动态加载进度显示等。对于"circleimageview-master"这个压缩包，它很可能包含了这个自定义控件的完整源码，供开发者参考学习。
Excel饼图圆环图模板-动态复合型饼图
11-24
Excel饼图圆环图模板-动态复合型饼图
圆形listview
05-19
圆形listview，listviev特效
内存动态分布
小白杨的博客
10-23 1745
1、什么是内存的动态分配？ 一些临时用的数据，这些数据不必在程序的声明部分定义，也不必等到函数结束时才释放，而是需要时随时开辟，不需要时随时释放。数据存放的区域称为堆区。 由于未在声明部分定义它们为变量或数组，因此不能通过变量名或数组名去引用这些数据，只能通过指针来引用。 2、怎样建立内存的动态分布？ ①malloc函数 void *malloc(unsigned int size); 其作用是在...
动态分布内存
weixin_34067049的博客
12-31 202
2019独角兽企业重金招聘Python工程师标准>>> ...
如何绘制全球新冠病毒疫情动态分布图
Baimoc
04-09 7376
目前新型冠状病毒疫情已经蔓延到全球，截止北京时间8日上午9时，全球确诊140万人，其中美国确诊人数超40万人，正如局座所说这次疫情不亚于第三次世界大战。大家除了注意全球疫情动态，更要注重个人防护，避免给国家添乱。 利用数据的时序性分析对于疫情分布和控制具有指导意义，也可以使大家直观的看到疫情的发展趋势。下面是从2020年1月22日起到2020年4月8日的世界各国疫情数据绘制的确诊，治愈，死亡人数动...
动态分布内存——free()函数与realloc()函数
业精于勤,荒于嬉;行成于思,毁于随
10-31 1265
1. free()函数 对于程序而言，不可再访问的内存块被称为垃圾，留有垃圾的程序存在内存泄漏现象。虽然一些语言提供了垃圾收集器用于垃圾的自动定位和回收，但C语言不提供。要求每个程序负责回收各自的垃圾，方法是调用free()函数释放不需要的内存。 通常malloc()要与free()配套使用，当动态内存使用完毕时，如果不及时释放的话，必然导致“内存泄露（即内存空间减少）”，进而
Excel-动态环形图
weixin_43416960的博客
11-04 1125
利用Excel制作动态环形图 数据源 步骤一： 插入控件，制作动态表 1.可以使用两种控件： 1.1组合框（窗体控件） ①点击【开发工具】-【插入】-【组合框】 ②找到空白区域，点击鼠标左键，设置好组合框 ③右键组合框控件-【设置控件格式】-【控制】，【数据源区域】选择源数据表中的【销售时间】表头下的内容填充，【单元格链接】选择任一空白单元格（如B7），默认为绝对引用，【下拉显示项数】可以根据...
html5 动态环形图,HTML5/Canvas 环形渐变色彩动画
weixin_29190169的博客
06-07 187
JavaScript语言：JaveScriptBabelCoffeeScript确定(function() {var lastTime = 0;var vendors = ['ms', 'moz', 'webkit', 'o'];for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) ...
使用CSS制作动态的环形图/饼图
最新发布
Moon Star
03-05 1381
使用纯 css 实现一个环形图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值