Android-自定义view之圆(选择程度圆以及进度圆)详解
来源:互联网 发布:c语言100经典实例编程 编辑:程序博客网 时间:2024/06/05 02:51
很多时候我们需要用一个优美好看的圆之类的来表示进度或者选择程度,但是android自带的控件一般很难满足我们的需求,这时候就到自定义view登场啦!
文章结构:1.解析一个手动选择的程度圆的自定义view制作 2.解析一个圆环中的圆弧转动来表示进度的进度圆 (这两个例子已经帮各位写好调大小的方法了,复制即可使用)【接下来一段时间,本博主还会持续更新一系列的自定义view,敬请关注。】
先上图 可以看到上面的就是点击选择程度的圆,下面就是用圆弧旋转表示进度的进度圆
一、一个手动选择的程度圆的自定义view制作
1.先给出代码,在代码里面解析
import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.text.TextPaint;import android.util.AttributeSet;import android.view.View;import com.demo.myview.R;/** * Created by ${符柱成} on 2016/8/20. */public class ManualCircle extends View { private Paint circlePaint, arcPaint, textPaint; //画圆的笔,画弧线的笔,画圆中文字的笔 private RectF rectF; //画弧线--弧线根据矩形生成 //弧线度数变量 int i = 0; /** * 圆环的宽度 */ private int mCircleWidth; //中心圆的颜色 private int centerCircleColor; //圆环的颜色 private int ringColor; //圆文字的颜色 private int textColor; public ManualCircle(Context context, AttributeSet attrs) { super(context, attrs); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);//将获取的属性转化为我们最先设好的属性 int n = typedArray.getIndexCount(); for (int i = 0; i < n; i++) { int attr = typedArray.getIndex(i); switch (attr) { case R.styleable.CustomProgressBar_circleWidth : mCircleWidth = (int) typedArray.getDimension(attr, 0); break; case R.styleable.CustomProgressBar_centercircleColor : centerCircleColor=typedArray.getColor(attr,0); //默认黄色 break; case R.styleable.CustomProgressBar_ringColor : ringColor=typedArray.getColor(attr,0); //默认绿色 break; case R.styleable.CustomProgressBar_textColor : textColor=typedArray.getColor(attr,0); //默认黑色 break; } } typedArray.recycle(); //回收属性对象 initPaint(); } private void initPaint() { //画文字 textPaint = new TextPaint(0); textPaint.setColor(textColor); textPaint.setTextSize(80); textPaint.setTextAlign(Paint.Align.CENTER); //实心圆画笔 circlePaint = new Paint(); circlePaint.setColor(centerCircleColor); //画弧线的画笔 arcPaint = new Paint(); arcPaint.setStyle(Paint.Style.STROKE); //设置不填充中间,样式为描边 arcPaint.setColor(ringColor); //是根据矩形来画弧线的 rectF = new RectF(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //这是圆心的坐标,这个是在xml设置引用的这个布局控件的大小的中心点到这个布局控件的最左边 float xy = getWidth() / 2; //圆圈的半径 这里是100 float radius = xy - mCircleWidth; //改半径会造成联动的,因为围绕着mCircleWidth这个变量去开展绘制,要理解就要画图,大家拿起手上的纸画一下就好 //设置圆弧 //注意先确定圆弧的宽度,然后根据得到这个布局的中心点,然后进行演算,得到半径。然后确定一个矩形来画圆弧。圆弧 rectF.left = xy - radius - mCircleWidth / 2; rectF.top = xy - radius - mCircleWidth / 2; rectF.right = xy + radius + mCircleWidth / 2; rectF.bottom = xy + radius + mCircleWidth / 2; arcPaint.setStrokeWidth(mCircleWidth); //画里面的圆 canvas.drawCircle(xy, xy, radius, circlePaint); //画弧线 int progress=i*10/36; canvas.drawArc(rectF, 270, i, false, arcPaint); //显示度数与提示 canvas.drawText(String.valueOf(progress)+"%", xy, xy, textPaint); } /** * 公开一个方法,可以更新弧线的度数,也就是选择程度啦,设置为单击一次就增加10% */ public void add() { //超过360度就还原到10度 if (i >= 360) { i = 36; postInvalidate(); //通知onDraw重新绘制 } else { this.i += 36; postInvalidate(); } }}
2.然后给出属性文件
<?xml version="1.0" encoding="utf-8"?><resources><!-- 手动选择的程度圆--> <declare-styleable name="CustomProgressBar"> <attr name="circleWidth" format="dimension" /> <attr name="ringColor" format="color" /> <attr name="centercircleColor" format="color" /> <attr name="textColor" format="color" /> </declare-styleable><!--用弧度变化表示进度的程度圆,一会就不贴这个的代码了--> <declare-styleable name="AutomaticCircleProgress"> <attr name="automaticCircleWidth" format="dimension" /> <attr name="automaticBottomRingColor" format="color" /> <attr name="automaticDrawRingColor" format="color" /> <attr name="automaticCentercircleColor" format="color" /> <attr name="automaticTextColor" format="color" /> </declare-styleable></resources>
3.接下来就是给出在xml中的调用啦:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.demo.myview.progressCircle.ProgressCircleActivity"><!-- 手动选择的程度圆--> <com.demo.myview.progressCircle.ManualCircle android:id="@+id/myview" android:layout_width="160dp" android:layout_height="160dp" android:layout_centerInParent="true" app:centercircleColor="#FFFF00" app:circleWidth="11dp" app:ringColor="#008000" app:textColor="#000000"></com.demo.myview.progressCircle.ManualCircle><!--用弧度变化表示进度的程度圆,一会就不贴这个的代码了--> <com.demo.myview.progressCircle.AutomaticCircle android:id="@+id/automaticCircle" android:layout_width="160dp" android:layout_height="160dp" app:automaticBottomRingColor="#000000" app:automaticCentercircleColor="#aaa" app:automaticCircleWidth="20dp" app:automaticDrawRingColor="#FFFFFF" app:automaticTextColor="#FFFFFF" /></LinearLayout>
然后就是为选择程度的圆添加我们刚刚在view里面暴露的接口方法
public class ProgressCircleActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_progress_circle); //<!-- 手动选择的程度圆--> final ManualCircle myView = (ManualCircle) findViewById(R.id.myview); myView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { myView.add(); } });//<!--用弧度变化表示进度的程度圆,一会就不贴这个的代码了--> final AutomaticCircle automaticCircle=(AutomaticCircle)findViewById(R.id.automaticCircle); automaticCircle.setScore(80); }}
二、用弧度变化表示进度的程度圆
1.先给出view的代码,在代码里面解析
package com.demo.myview.progressCircle;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.util.AttributeSet;import android.util.Log;import android.view.View;import android.view.ViewTreeObserver;import com.demo.myview.R;/** * Created by ${符柱成} on 2016/8/21. */public class AutomaticCircle extends View { private int mScore; //方法传进来的表示进度 private Paint mBlackPaint, mWhitePaint, mCirclePaint, mTextPaint; //白色圆弧与黑色圆弧 /** * 圆环的宽度 */ private int mCircleWidth; //圆弧的矩形 private RectF mRectF; //白弧线度数变量 int i = 0; //根据进度来白圆扫 int count; //中心圆的颜色 private int centerCircleColor; //底圆环的颜色 private int bottomRingColor; //旋转圆环的颜色 private int drawRingColor; //圆文字的颜色 private int textColor; public AutomaticCircle(Context context, AttributeSet attrs) { super(context, attrs); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AutomaticCircleProgress);//将获取的属性转化为我们最先设好的属性 int n = typedArray.getIndexCount(); for (int i = 0; i < n; i++) { //属性文件在上面已经给出 int attr = typedArray.getIndex(i); switch (attr) { case R.styleable.AutomaticCircleProgress_automaticCircleWidth: mCircleWidth = (int) typedArray.getDimension(attr, 0); break; case R.styleable.AutomaticCircleProgress_automaticCentercircleColor: centerCircleColor = typedArray.getColor(attr, 0); Log.e("centerColor", String.valueOf(centerCircleColor)); break; case R.styleable.AutomaticCircleProgress_automaticBottomRingColor: bottomRingColor = typedArray.getColor(attr, 0); Log.e("centerColor", String.valueOf(bottomRingColor)); break; case R.styleable.AutomaticCircleProgress_automaticDrawRingColor: drawRingColor = typedArray.getColor(attr, 0); break; case R.styleable.AutomaticCircleProgress_automaticTextColor: textColor = typedArray.getColor(attr, 0); break; } } initPaint(); } private void initPaint() { //初始化中心圆的黑色笔 mCirclePaint = new Paint(); //设置抗锯齿,优化绘制效果的精细度 mCirclePaint.setAntiAlias(true); //设置图像抖动处理,也是用于优化图像的显示效果 mCirclePaint.setDither(true); //设置画笔的颜色 mCirclePaint.setColor(centerCircleColor); //初始圆弧黑色笔 mBlackPaint = new Paint(); //设置抗锯齿,优化绘制效果的精细度 mBlackPaint.setAntiAlias(true); //设置图像抖动处理,也是用于优化图像的显示效果 mBlackPaint.setDither(true); //设置画笔的颜色 mBlackPaint.setColor(bottomRingColor); //设置画笔的风格为空心 mBlackPaint.setStyle(Paint.Style.STROKE); //设置“空心”的外框宽度为2dp mBlackPaint.setStrokeWidth(mCircleWidth); //初始白色笔 mWhitePaint = new Paint(); mWhitePaint.setAntiAlias(true); mWhitePaint.setStyle(Paint.Style.STROKE); mWhitePaint.setStrokeWidth(mCircleWidth); mWhitePaint.setDither(true); mWhitePaint.setColor(drawRingColor); //文本的笔 mTextPaint = new Paint(); //设置文本的字号大小 mTextPaint.setTextSize(40); mTextPaint.setDither(true); //设置文本的对其方式为水平居中 mTextPaint.setTextAlign(Paint.Align.CENTER); mTextPaint.setColor(textColor); //获取该view的视图树观察者并添加绘制变化监听者 //实现有绘制变化时的回调方法 this.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { //2.开启子线程对绘制用到的数据进行修改 new DrawThread(); getViewTreeObserver().removeOnPreDrawListener(this); return false; } }); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //这是圆心的坐标,这个是在xml设置引用的这个布局控件的大小的中心点到这个布局控件的最左边 float xy = getWidth() / 2; //圆圈的半径 float radius = xy - mCircleWidth; //改半径会造成联动的,因为围绕着mCircleWidth这个变量去开展绘制 //初始化圆弧所需条件(及设置圆弧的外接矩形的四边) mRectF = new RectF(); mRectF.set(xy - radius - mCircleWidth / 2, xy - radius - mCircleWidth / 2, xy + radius + mCircleWidth / 2, xy + radius + mCircleWidth / 2); //画里面的灰色圆 canvas.drawCircle(xy, xy, radius, mCirclePaint); //绘制弧形 //黑笔画的是一个整圆所有从哪里开始都一样 canvas.drawArc(mRectF, 0, 360, false, mBlackPaint); //白笔之所以从-90度开始,是因为0度其实使我们的3点钟的位置,所以-90才是我们的0点的位置 canvas.drawArc(mRectF, -90, i, false, mWhitePaint); //绘制文本 canvas.drawText(count + "", xy, xy, mTextPaint); } //暴露一个方法给外部调用来调整进度 public void setScore(int score) { this.mScore = score; } //开启子线程,并通过绘制监听实时更新绘制数据 public class DrawThread implements Runnable { private final Thread mDrawThread; private int statek; public DrawThread() { mDrawThread = new Thread(this); mDrawThread.start(); } @Override public void run() { while (true) { switch (statek) { case 0://给一点点缓冲的时间 try { Thread.sleep(200); statek = 1; } catch (InterruptedException e) { } break; case 1: try {//更新显示的数据 Thread.sleep(20); i += 3.6f; count++; postInvalidate(); //每count加1就去刷新onDraw来刷新图 } catch (InterruptedException e) { e.printStackTrace(); } break; } if (count >= mScore)//满足该条件就结束循环 break; } } }}
恩,属性文件和调用的代码都在上一个例子里面了,这里就不再贴了。
好了,自定义view圆已经讲解完毕,欢迎指出错误,共同学习。接下来一段时间还会更新一系列的自定义view,敬请关注。
转载请注明:【JackFrost的博客】
更多精彩的内容,可以访问JackFrost的博客
2 0
- Android-自定义view之圆(选择程度圆以及进度圆)详解
- 自定义view,进度圆
- Android自定义View之进度条(带进度提示框)
- Android自定义view之图片加载进度
- Android 自定义View实例之进度圆环
- Android 自定义View以及View绘制详解
- Android开发之自定义圆角矩形进度对话框
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Android 高手进阶之自定义View,自定义属性(带进度的圆形进度条)
- Invert Binary Tree
- intellij idea常用快捷键使用
- Windows下使用Redis(一)安装使用
- React Native学习01 - 在Mac平台上搭建iOS开发环境
- 磁盘临时表与内存临时表的差异
- Android-自定义view之圆(选择程度圆以及进度圆)详解
- State Threads——异步回调的线性实现
- Java文件拆分与合并
- HDU 2328 Corporate Identity(后缀数组-求多个串的最长共同子串)
- 关于digit统计算法(C语言实现)
- 将应用程序背景设置为桌面壁纸背景
- 支付宝即时到账接口调用签名验证失败
- python学习笔记 --- 关于urllib2
- POJ 2891 Strange Way to Express Integers