Android自定义view绘制圆环占比动画

一、实现效果图

二、核心代码

1.自定义MyProgressView.java

package com.czhappy.effectdemo.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.FontMetrics;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.View;

import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.utils.ScreenUtil;

public class MyProgressView extends View {

 // 画实心圆的画笔
 private Paint mCirclePaint;
 // 画圆环的画笔
 private Paint mRingDefaultPaint;
 // 已用环的画笔
 private Paint mUsePaint;
 // 画圆环的画笔
 private Paint mRingPaint;
 // 画白线的画笔
 private Paint mLinePaint;
 // 画字体的画笔
 private Paint mTextPaint;
 // 圆形颜色
 private int mCircleColor;
 // 圆环颜色
 private int mRingColor;
 // 半径
 private float mRadius;
 // 圆环半径
 private float mRingRadius;
 // 圆环宽度
 private float mStrokeWidth;
 // 圆心x坐标
 private int mXCenter;
 // 圆心y坐标
 private int mYCenter;
 // 字的长度
 private float mTxtWidth;
 // 字的高度
 private float mTxtHeight;
 // 总进度
 private int mTotalProgress = 100;
 // 当前进度
 private int mProgress;
 // 实际展示总进度
 private int mShowProgress;
 // 已用流量
 private String usedFlow;

 private Context mContext;

 private Handler circleHandler = new Handler(){

  public void handleMessage(Message msg) {
   super.handleMessage(msg);
   if(msg.what == 1){
    int temp = (Integer)msg.obj;
    setProgress(temp);
   }
  };
 };

 public MyProgressView(Context context, AttributeSet attrs) {
  super(context, attrs);
  mContext = context;
  // 获取自定义的属性
  initAttrs(context, attrs);
  initVariable();
 }

 private void initAttrs(Context context, AttributeSet attrs) {
  TypedArray typeArray = context.getTheme().obtainStyledAttributes(attrs,
    R.styleable.TasksCompletedView, 0, 0);
  mRadius = typeArray.getDimension(R.styleable.TasksCompletedView_radius, 80);
  mStrokeWidth = typeArray.getDimension(R.styleable.TasksCompletedView_strokeWidth, 10);
  mCircleColor = typeArray.getColor(R.styleable.TasksCompletedView_circleColor, 0xFFFFFFFF);
  mRingColor = typeArray.getColor(R.styleable.TasksCompletedView_ringColor, 0xFFFFFFFF);

  mRingRadius = mRadius + mStrokeWidth / 2;
 }

 private void initVariable() {
  //画圆画笔设置
  mCirclePaint = new Paint();
  mCirclePaint.setAntiAlias(true);//防锯齿
  mCirclePaint.setColor(mCircleColor);
  mCirclePaint.setStyle(Paint.Style.FILL);

  //“使用”字画笔设置
  mUsePaint = new Paint();
  mUsePaint.setAntiAlias(true);
  mUsePaint.setStyle(Paint.Style.FILL);
  mUsePaint.setColor(getResources().getColor(R.color.ticket_color));
  mUsePaint.setTextSize(ScreenUtil.sp2px(mContext, 10));

  //圆环画笔设置
  mRingDefaultPaint = new Paint();
  mRingDefaultPaint.setAntiAlias(true);
  mRingDefaultPaint.setColor(getResources().getColor(R.color.default_ring_color));
  mRingDefaultPaint.setStyle(Paint.Style.STROKE);
  mRingDefaultPaint.setStrokeWidth(mStrokeWidth);

  //已使用多少圆环画笔设置
  mRingPaint = new Paint();
  mRingPaint.setAntiAlias(true);
  mRingPaint.setColor(mRingColor);
  mRingPaint.setStyle(Paint.Style.STROKE);
  mRingPaint.setStrokeWidth(mStrokeWidth);

  mTextPaint = new Paint();
  mTextPaint.setAntiAlias(true);
  mTextPaint.setStyle(Paint.Style.FILL);
  mTextPaint.setColor(Color.BLACK);
  mTextPaint.setTextSize(ScreenUtil.sp2px(mContext, 22));

  mLinePaint = new Paint();
  mLinePaint.setColor(Color.WHITE);

  //获取字体高度
  FontMetrics fm = mTextPaint.getFontMetrics();
  mTxtHeight = (int) Math.ceil(fm.descent - fm.ascent);

 }

 @Override
 protected void onDraw(Canvas canvas) {

  mXCenter = getWidth() / 2;
  mYCenter = getHeight() / 2;

  //画圆
  canvas.drawCircle(mXCenter, mYCenter, mRadius, mCirclePaint);

  RectF oval = new RectF();
  oval.left = (mXCenter - mRingRadius);
  oval.top = (mYCenter - mRingRadius);
  oval.right = mRingRadius * 2 + (mXCenter - mRingRadius);
  oval.bottom = mRingRadius * 2 + (mYCenter - mRingRadius);
  //画整圆弧
  canvas.drawArc(oval, -90, 360, false, mRingDefaultPaint);
  //已使用多少圆弧
  canvas.drawArc(oval, -90, ((float) mProgress / mTotalProgress) * 360, false, mRingPaint);
  //文字绘制
  String txt = mProgress + "%";
  //文字的长度
  mTxtWidth = mTextPaint.measureText(txt, 0, txt.length());
  canvas.drawText(txt, mXCenter - mTxtWidth / 2, mYCenter + mTxtHeight / 9, mTextPaint);

  Rect _pb = new Rect();
  String sup = "已用";
  mUsePaint.getTextBounds(sup, 0, sup.length(), _pb);
  int perX = mXCenter - _pb.width() / 2;
  canvas.drawText(sup, perX, mYCenter / 2, mUsePaint);

  if (!TextUtils.isEmpty(usedFlow)) {
   mUsePaint.getTextBounds(usedFlow, 0, usedFlow.length(), _pb);
   perX = mXCenter - _pb.width() / 2;
   canvas.drawText(usedFlow, perX, (float) (mYCenter + mYCenter / 1.7), mUsePaint);
  }

  //画横线图片
  Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.circle_bottom_bg);
  perX = mXCenter - bitmap.getWidth() / 2;
  canvas.drawBitmap(bitmap, perX, (float) (mYCenter + mYCenter / 5), mLinePaint);
 }

 /**
  * 设置当前进度
  * @param progress
  */
 public void setProgress(int progress) {
  mProgress = progress;
  postInvalidate();
 }

 /**
  * 实际展示总进度
  * @param progress
  */
 public void setmShowProgress(int progress) {
  mShowProgress = progress;
  new Thread(new CircleThread()).start();
 }

 public void setUsedFlow(String usedFlow) {
  this.usedFlow = usedFlow;
 }

 private class CircleThread implements Runnable{

  int m=0;
  int i=0;

  @Override
  public void run() {
   // TODO Auto-generated method stub
   while(!Thread.currentThread().isInterrupted()){
    try {
     Thread.sleep(50);
     m++;
     Message msg = new Message();
     msg.what = 1;
     if(i < mShowProgress){
      i += m;
     }else{
      i = mShowProgress;
      return;
     }
     msg.obj = i;
     circleHandler.sendMessage(msg);
    } catch (InterruptedException e) {
     // TODO Auto-generated catch block
     e.printStackTrace();
    }
   }
  }

 }
}

2.FlowActivity.java

package com.czhappy.effectdemo.activity;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

import com.czhappy.effectdemo.R;
import com.czhappy.effectdemo.view.MyProgressView;

/**
 * Description:
 * User: chenzheng
 * Date: 2017/1/21 0021
 * Time: 17:17
 */
public class FlowActivity extends AppCompatActivity {

 private MyProgressView mTasksView;

 @Override
 protected void onCreate(@Nullable Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_flow);

  initView();
 }

 private void initView() {
  mTasksView = (MyProgressView) findViewById(R.id.flow_prgress_view);
 }

 public void beginAnim(View view){
  mTasksView.setUsedFlow("200.0M");
  mTasksView.setmShowProgress(60);
 }
}

3.activity_flow.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tc="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:padding="10dp"
 android:background="#fff"
 android:gravity="center_horizontal"
 android:orientation="vertical">

 <Button
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:onClick="beginAnim"
  android:text="开始动画"/>

 <com.czhappy.effectdemo.view.MyProgressView
  android:id="@+id/flow_prgress_view"
  android:layout_width="100dp"
  android:layout_height="100dp"
  tc:circleColor="@color/circle_color"
  tc:radius="44dp"
  tc:ringColor="@color/ring_color"
  tc:strokeWidth="6dp"
  android:layout_marginTop="10dp"/>

</LinearLayout>

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

(0)

相关推荐

  • Android使用Canvas绘制圆形进度条效果

    前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas 画笔Paint 示例圆形进度条 画布Canvas 首先,来看一下Android官网对Canvas类的定义: The Canvas class holds the "draw" calls.To draw something, you need 4 basic components: A B

  • Android自定义View绘制的方法及过程(二)

    上一篇<Android 自定义View(一) Paint.Rect.Canvas介绍>讲了最基础的如何自定义一个View,以及View用到的一些工具类.下面讲下View绘制的方法及过程 public class MyView extends View { private String TAG = "--------MyView"; private int width, height; public MyView(Context context, AttributeSet a

  • Android使用自定义View绘制渐隐渐现动画

    实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失.效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的API可用.所以,自己做了一个. 基本的想法是这样的: 在View的onTouchEvent中记录触摸点,生成一条一条的线LineElement,放在一个List中.给每个LineElement配置一个Paint实例. 在onDraw中绘制线段. 变换LineE

  • Android自定义View绘制随机生成图片验证码

    本篇文章讲的是Android自定义View之随机生成图片验证码,开发中我们会经常需要随机生成图片验证码,但是这个是其次,主要还是想总结一些自定义View的开发过程以及一些需要注意的地方. 按照惯例先看看效果图: 一.先总结下自定义View的步骤: 1.自定义View的属性 2.在View的构造方法中获得我们自定义的属性 3.重写onMesure 4.重写onDraw 其中onMesure方法不一定要重写,但大部分情况下还是需要重写的 二.View 的几个构造函数 1.public CustomV

  • Android开发使用自定义View将圆角矩形绘制在Canvas上的方法

    本文实例讲述了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法.分享给大家供大家参考,具体如下: 前几天,公司一个项目中,头像图片需要添加圆角,这样UI效果会更好看,于是写了一个小的demo进行圆角的定义,该处主要是使用BitmapShader进行了渲染(如果要将一张图片裁剪成椭圆或圆形显示在屏幕上,也可以使用BitmapShader来完成). BitmapShader类完成渲染图片的基本步骤如下: 1.创建BitmapShader类的对象 /** * Call this

  • 自定义滑动按钮为例图文剖析Android自定义View绘制

    自定义View一直是横在Android开发者面前的一道坎. 一.View和ViewGroup的关系 从View和ViewGroup的关系来看,ViewGroup继承View. View的子类,多是功能型的控件,提供绘制的样式,比如imageView,TextView等,而ViewGroup的子类,多用于管理控件的大小,位置,如LinearLayout,RelativeLayout等,从下图可以看出 从实际应用中看,他们又是组合关系,我们在布局中,常常是一个ViewGroup嵌套多个ViewGro

  • Android自定义View实现绘制虚线的方法详解

    前言 说实话当第一次看到这个需求的时候,第一反应就是Canvas只有drawLine方法,并没有drawDashLine方法啊!这咋整啊,难道要我自己做个遍历不断的drawLine?不到1秒,我就放弃这个想法了,因为太恶心了.方法肯定是有的,只不过我不知道而已. 绘制方法 最简单的方法是利用ShapeDrawable,比如说你想用虚线要隔开两个控件,就可以在这两个控件中加个View,然后给它个虚线背景. 嗯,理论上就是这样子的,实现上也很简单. <!-- drawable 文件 --> <

  • Android编程开发之在Canvas中利用Path绘制基本图形(圆形,矩形,椭圆,三角形等)

    本文实例讲述了Android编程开发之在Canvas中利用Path绘制基本图形的方法.分享给大家供大家参考,具体如下: 在Android中绘制基本的集合图形,本程序就是自定义一个View组件,程序重写该View组件的onDraw(Canvase)方法,然后在该Canvas上绘制大量的基本的集合图形. 直接上代码: 1.自定义的View组件代码: package com.infy.configuration; import android.content.Context; import andro

  • Android自定义View实现shape图形绘制

    概述 之前曾写过一篇文章介绍了Android中drawable使用Shape资源,通过定义drawable中的shape资源能够绘制简单的图形效果,如矩形,椭圆形,线形和圆环等.后来我在项目中正好遇到这样一个需求,要在特定的位置上显示一条垂直的虚线.正当我胸有成竹的把上面的资源文件放入进去的时候,我才发现它并不能符合我的要求.使用shape画出的垂直虚线,其实就是将一条水平的线,旋转90度.但这样做的弊端就是,该View有效区域为旋转90度后与原来位置相重合的区域,还不能随意的改动,这样的效果根

  • Android自定义View之继承TextView绘制背景

    本文实例为大家分享了TextView绘制背景的方法,供大家参考,具体内容如下 效果: 实现流程: 1.初始化:对画笔进行设置 mPaintIn = new Paint(); mPaintIn.setAntiAlias(true); mPaintIn.setDither(true); mPaintIn.setStyle(Paint.Style.FILL); mPaintIn.setColor(getResources().getColor(R.color.colorPrimary)); mPain

  • Android自定义View系列之Path绘制仿支付宝支付成功动画

    前言 使用支付宝付款时,我们可以看到成功或者失败都会有个动画提示,如果我们需要做这样的效果的话,当然,你可以让设计师给你做个GIF,但是我们知道图像比较耗内存的,我们自己可以用代码实现还是代码实现好点吧. 效果 实现方法 首先我们需要了解PathMeasure这个类,这个类我们可以理解为用来管理Path.我们主要看几个方法. PathMeasure(): 构造方法 ,实例化一个对象 PathMeasure(Path path,boolean isClosed):传入Path对象和是否闭合,pat

随机推荐