自定义控件:绘制圆环的实现过程

使用自定义控件绘制一个圆环,需要重现的方法是OnDraw()实现对view 的绘制,从而
输出符合自己需求的view 控件
观察圆环的组成部分:
外层圆+中间百分比文字+不断变化进度的弧形圈
--->分析:每一个组成部分需要的属性,构成几个关键的自定义属性
1:外层圆的颜色
2:弧形进度圈的颜色
3:中间百分比文字的颜色
4:中间百分比文字的大小
5:圆环的宽度(作为进度弧形圈的宽度)6:*首页当中也有一个圆环进度,为了兼容使用首页的圆环进度,增加一个自定义属性,绘制进度弧形圈的风格(实心[Fill],空心[Stroken])

分析完毕-->绘制步骤:
1:构造方法当中初始化画笔对象,获取自定义的属性值.
2:重写Ondraw 方法
---2.1:绘制最外层的圆
-关键方法canvas.drawCircle(center, center, radius, paint); //画出圆环

*:计算半径、中心点坐标、画笔设置
paint.setColor(roundColor); //设置圆环的颜色
paint.setStyle(Paint.Style.STROKE); //设置空心
paint.setStrokeWidth(roundWidth); //设置圆环的宽度---这个宽度也是提
供给进度弧形圈绘制的时候覆盖的宽度
paint.setAntiAlias(true); //消除锯齿
中心点坐标
int center = getWidth() / 2; //获取圆心的x 坐标
半径

int radius = (int) (center - roundWidth/2) ---画图说明最容易理解
---2.2:绘制中间的百分比文字
--关键方法:canvas.drawText(percent + "%", center - textWidth / 2,
center + textSize / 2, paint); //画出进度百分比
测量画笔上的文本宽度
float textWidth = paint.measureText(percent + "%");
画笔设置
paint.setStrokeWidth(0);
paint.setColor(textColor);
paint.setTextSize(textSize);

paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体绘制的文字的位置,由参数2,3 的X,Y 坐标值决定--圆环的中心点位置显示X:表示从哪开始绘制,如果你直接中心点开始绘制-->画图说明最容易理解-->正确的X=center - textWidth / 2;Y = center + textSize / 2 --(因为android 坐标系与数学坐标系Y 轴值是相反的,也可以画图说明,这里的textsize 就可以代表高度,paint.measureText 测量方法执行之后,默认的文字高度就是根据文字大小计算的,相当于wrap_content,所以textSize 就是本身文字所占的高度值)*:绘制的进度要转换为百分比形式:int percent = (int) (((float) progress /(float) max) * 100);

---2.3:绘制进度弧形圈
---关键方法:canvas.drawArc(oval, 0, 360 * progress / max, false, paint);
//根据进度画圆弧
参数解释:
oval:绘制的弧形的范围轮廓
0:从多少角度开始绘制
360 * progress / max:绘制弧形扫过的角度对应的区域
false:不包含圆心,如果是true,表示包含圆心paint:绘制使用的画笔
画笔设置paint.setStrokeWidth(roundWidth); //设置进度弧形圈的宽度,必须保持

和外层圆的StrokeWidth 一致,确保弧形圈绘制的时候覆盖的范围就是外层圆的宽度
paint.setColor(roundProgressColor); //设置进度的颜色
弧形范围计算
RectF oval = new RectF(center - radius, center - radius, center
+ radius, center + radius); --->画图说明最容易理解
left:center - radius
top:center-radius
right:center+radius
传智播客武汉校区就业部出品务实、创新、质量、分享、专注、责任
bottom:center+radius
*:注意,因为progress 是相对于100 当中占比多少,而弧形总共是按照角度
分成360 分的,所以绘制弧形圈指定参数扫过的区域角度需要计算转换一下
=360 * progress / max(max=100)
*:对应自定义属性中的最后一个属性是实心还是空心,绘制的时候需要判断一
下,兼容首页的圆环进度处理
switch (style) {
case STROKE:{
paint.setStyle(Paint.Style.STROKE);
canvas.drawArc(oval, 0, 360 *
progress / max, false, paint); //根据进度画圆弧
break;
}
case FILL:{
paint.setStyle(Paint.Style.FILL_AND_STROKE);
if(progress !=0)
canvas.drawArc(oval, 0, 360 *
progress / max, true, paint); //根据进度画圆弧
break;
}
}
最后提供一个设置进度,根据进度重新绘制圆环的方法
public void setProgress(int progress) {
if(progress < 0){
throw new
IllegalArgumentException("progress not less than
0");
}
if(progress > max){
progress = max;
}
if(progress <= max){
this.progress = progress;
postInvalidate();
}
}

时间: 2024-10-25 05:41:28

自定义控件:绘制圆环的实现过程的相关文章

Android自定义控件(特效一) 点击屏幕,根据所点击的位置绘制圆环

之前在三星手机上看到点击屏幕后出现水波的特效,所以尝试着写了个类似的效果 实现自定义一个View,并实现构造方法 public class MyView extends View { public MyView(Context context) { super(context); // TODO Auto-generated constructor stub } public MyView(Context context, AttributeSet attrs) { super(context,

【android】绘制圆环的三种方式

在android中要绘制圆环,暂时知道有三种方式.分别是: 一.设置画笔的style为stoke,绘制圆 这里是先绘制内圆,然后绘制圆环(圆环的宽度就是paint设置的paint.setStrokeWidth的宽度),最后绘制外圆. 请看核心源码: [java] view plaincopyprint? <span xmlns="http://www.w3.org/1999/xhtml" style="">package yan.guoqi.rectph

自定义View之绘制圆环

一.RingView 自定义的view,构造器必须重写,至于重写哪个方法,参考如下: ①如果需要改变View绘制的图像,那么需要重写OnDraw方法.(这也是最常用的重写方式.) ②如果需要改变view的大小,那么需要重写OnMeasure方法. ③如果需要改变View的(在父控件的)位置,那么需要重写OnLayout方法. ④根据上面三种不同的需要你可以组合出多种重写方案,你懂的. 注释信息代码中比较详细. package com.example.customerviewdemo2; impo

canvas绘制圆环

<canvas class="process" width="48px" height="48px">15%</canvas> <script type="text/javascript"> drawProcess() function drawProcess() { $('canvas.process').each(function() { var text = $.trim($(this

IOS 自定义控件之-显示下载过程的ImageView

原创Blog,转载请注明出处 blog.csdn.net/hello_hwc 前言:这个系列的目的是为了提供一些思路,在Demo的过程中让读者学会一些自定义控件的思路,所以不适宜太复杂.当然,仅仅是抛砖引玉.这个控件我会上传Github,由于最近一直在搞IOT的应用,所以没时间把进行完善,有时间了我会把这个控件完善了,让读者那去直接就可以用. 完善好了我会更新下博客 Demo效果,支持两种显示过程的方式,沿着border绘制一圈和frame逐渐填充. 思路 NSURLSessionDataTas

View的绘制、事件传递过程

View绘制过程 onMeasure() onLayout() onDraw() 过程详解 onMeasure() 计算尺寸 onLayout() 为viewGroup类型布局子视图用的. onDraw() 执行绘制图形动作. View事件传递 Touch事件封装在MotionEvent对象中,其中包括touch的位置.时间.历史记录以及第几个手指触摸(多点触摸)等. Touch事件分为: ACTION_DOWN, ACTION_UP, ACTION_MOVE, ACTION_POINTER_D

Swift - EasingAnimation绘制圆环动画

效果 源码 https://github.com/YouXianMing/Swift-Animations // // CircleView.swift // Swift-Animations // // Created by YouXianMing on 16/8/16. // Copyright © 2016年 YouXianMing. All rights reserved. // import UIKit // MARK: Public class : CircleView class

Android 高级面试题及答案

Android 高级面试题及答案 阅读目录 1.如何对 Android 应用进行性能分析 2.什么情况下会导致内存泄露 3.如何避免 OOM 异常 4.Android 中如何捕获未捕获的异常 5.ANR 是什么?怎样避免和解决 ANR(重要) 6.Android 线程间通信有哪几种方式 7.Devik 进程,linux 进程,线程的区别 8.描述一下 android 的系统架构 9.android 应用对内存是如何限制的?我们应该如何合理使用内存? 10. 简述 android 应用程序结构是哪

31到Android面试题,收藏下?

1.如何对 Android 应用进行性能分析 2.什么情况下会导致内存泄露 3.如何避免 OOM 异常 4.Android 中如何捕获未捕获的异常 5.ANR 是什么?怎样避免和解决 ANR(重要) 6.Android 线程间通信有哪几种方式 7.Devik 进程,linux 进程,线程的区别 8.描述一下 android 的系统架构 9.android 应用对内存是如何限制的?我们应该如何合理使用内存? 简述 android 应用程序结构是哪些11.请解释下 Android 程序运行时权限与文