Android自定义带动画的半圆环型进度效果

本文实例为大家分享了Android半圆环型进度效果的具体代码,供大家参考,具体内容如下

package com.newair.ondrawtext;

import android.animation.ValueAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.os.Build;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.OvershootInterpolator;

/**
 * Created by ouhimehime on 16/6/15.
 * --------自定义控件-------
 */
public class CustomView extends View {

  //画笔
  private Paint paint;
  private RectF oval;

  //圆弧颜色
  private int roundColor;
  //进度颜色
  private int progressColor;
  //文字内容
  private boolean textIsShow;
  //字体大小
  private float textSize = 14;
  //文字颜色
  private int textColor;
  //最大进度
  private int max = 1000;
  //当前进度
  private int progress = 300;
  //圆弧宽度
  private int roundWidth = 30;

  private int viewWidth; //宽度--控件所占区域

  private float nowPro = 0;//用于动画

  private ValueAnimator animator;

  public CustomView(Context context) {
    super(context);
  }

  public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initAttrs(attrs, context);
  }

  public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    initAttrs(attrs, context);
  }

  @TargetApi(Build.VERSION_CODES.LOLLIPOP)
  public CustomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    initAttrs(attrs, context);
  }

  private void initAttrs(AttributeSet attr, Context context) {
    TypedArray array = context.obtainStyledAttributes(attr, R.styleable.CustomView);

    roundColor = array.getColor(R.styleable.CustomView_roundColor, Color.BLACK);//环形颜色
    progressColor = array.getColor(R.styleable.CustomView_progressColor, Color.RED);//进度颜色
    textIsShow = array.getBoolean(R.styleable.CustomView_textIsShow, false);//文字
    textSize = array.getDimension(R.styleable.CustomView_textSize, 14);//文字大小
    textColor = array.getColor(R.styleable.CustomView_textColor, Color.BLACK);//文字颜色
    roundWidth = array.getInt(R.styleable.CustomView_roundWidth, 30);//圆环宽度

    array.recycle();

    //动画
    animator = ValueAnimator.ofFloat(0, progress);
    animator.setDuration(1800);
    animator.setInterpolator(new OvershootInterpolator());
    animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        nowPro = (float) animation.getAnimatedValue();
        postInvalidate();
      }
    });
    animator.start();

  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
    final int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);

    if (widthSpecMode == MeasureSpec.AT_MOST) {//可获得最大空间
      setMeasuredDimension(widthMeasureSpec, (widthSpecSize / 2) + (int) (Math.cos(20) * (widthSpecSize / 2)));
    } else if (widthMeasureSpec == MeasureSpec.EXACTLY) {//一般指精确值
      setMeasuredDimension(widthMeasureSpec, (widthSpecSize / 2) + (int) (Math.cos(20) * (widthSpecSize / 2)));
    } else {
      setMeasuredDimension(widthMeasureSpec, (viewWidth / 2) + (int) (Math.cos(20) * (viewWidth / 2)));
    }
  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);

    viewWidth = w;//得到宽度以此来计算控件所占实际大小

    //计算画布所占区域
    oval = new RectF();
    oval.left = roundWidth + getPaddingLeft();
    oval.top = roundWidth + getPaddingTop();
    oval.right = viewWidth - roundWidth - getPaddingRight();
    oval.bottom = viewWidth - roundWidth - getPaddingBottom();

  }

  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Paint paint = new Paint();
    paint.setAntiAlias(true);            //设置画笔为无锯齿
    paint.setColor(roundColor);           //设置画笔颜色
    paint.setStrokeWidth(roundWidth);        //线宽
    paint.setStyle(Paint.Style.STROKE);       //空心
    canvas.drawArc(oval, 160, 220, false, paint);  //绘制圆弧

    //画进度层
    paint.setColor(progressColor);
    paint.setStrokeWidth(roundWidth + 1);
    canvas.drawArc(oval, 160, 220 * nowPro / max, false, paint); //绘制圆弧

    if (textIsShow) {
      paint.setColor(textColor);
      paint.setStrokeWidth(0);
      paint.setTypeface(Typeface.DEFAULT);
      paint.setTextSize(textSize * 2);
      float textWidth = paint.measureText((int) ((nowPro / (float) max) * 100) + "%");
      canvas.drawText((int) ((nowPro / (float) max) * 100) + "%", viewWidth / 2 - textWidth / 2, viewWidth / 2, paint);
    }

  }

  private int getDefaultHeight() {
    return 0;
  }

  private int getDefaultWidth() {
    return 0;
  }

  public int getRoundColor() {
    return roundColor;
  }

  public void setRoundColor(int roundColor) {
    this.roundColor = roundColor;
  }

  public int getProgressColor() {
    return progressColor;
  }

  public void setProgressColor(int progressColor) {
    this.progressColor = progressColor;
  }

  public boolean getText() {
    return textIsShow;
  }

  public void setText(boolean text) {
    this.textIsShow = text;
  }

  public float getTextSize() {
    return textSize;
  }

  public void setTextSize(float textSize) {
    this.textSize = textSize;
  }

  public int getTextColor() {
    return textColor;
  }

  public void setTextColor(int textColor) {
    this.textColor = textColor;
  }

  public int getMax() {
    return max;
  }

  public void setMax(int max) {
    this.max = max;
  }

  public int getProgress() {
    return progress;
  }

  public void setProgress(int progress) {
    this.progress = progress;
  }
}

自定义属性

<declare-styleable name="CustomView">
    <attr name="roundColor" format="color" />
    <attr name="progressColor" format="color" />
    <attr name="textIsShow" format="boolean" />
    <attr name="textSize" format="dimension" />
    <attr name="textColor" format="color" />
    <attr name="roundWidth" format="integer" />
  </declare-styleable>

用法

<com.newair.ondrawtext.CustomView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="visible"
    app:progressColor="@android:color/holo_orange_dark"
    app:roundColor="@android:color/holo_blue_dark"
    app:roundWidth="45"
    app:textColor="@android:color/black"
    app:textIsShow="true"
    app:textSize="14sp" />

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

(0)

相关推荐

  • Android利用ConstraintLayout实现漂亮的动画详解

    前言 最近ConstrainLayout是Android中比较火的一个东西.ConstrainLayout可以使View层级扁平化,提升性能,支持任意的边框,其目的就是修复之前layout的一些短板.其实ConstrainLayout还有一个大多数人没有注意到的特性:可以利用Constrainlayout快速构建漂亮的动画效果. 方法 我这里假设已经你已经掌握了Constrainlayout基本知识(比如:app:layout_constraintLeft_toLeftOf等).Constrai

  • Android Activity进出动画三种方法

     Android Activity进出动画三种方法 实现activity的进出场动画总共有3种方式,下面会一一列出,首先给出示例的动画xml文件. 动画的xml文件 <?xml version="1.0" encoding="utf-8"?> <translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromYDelta="

  • Android动画之小球拟合动画实例

    Android动画之小球拟合动画实例 实现效果: 动画组成: 1.通过三阶贝塞尔曲线来拟合圆,拟合系数的由来,以及怎么选控制点. 2.利用画布canvas.translate,以及scale,rotate的方法,来渐变绘制的过程. 3.熟悉拟合过程. 4.不熟悉的话,先绘制辅助点的移动路线,对理解两个圆的分裂的拟合过程有好处. package com.example.administrator.animationworkdemo.views; import android.animation.V

  • Android使用ListView实现滚轮的动画效果实例

    之前收到一个需求,需要把一个数据展示列表页面做成像滚轮那样的动画效果:中间最大然后向上下两端逐渐缩小.我想了想iOS那边自带滚轮组件,安卓得自己去实现,目前网上仿ios的滚轮组件的也有一些,但是感觉不适合我,我的要求没那么复杂,于是决定自己动手去实现一下. 动手前先分析一下应该怎么做,归根到底只是要实现缩放效果,由中间向两边变小,当一个item越接近中间就放大,越远离中间就缩小.那么可以通过先获取ListView的中点,然后获取当前可视的所有item跟ListView的中点的垂直距离计算出一个比

  • Android中的popupwindow进入和退出的动画效果

    废话不多说了直接给大家贴代码了,具体代码如下所示: <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="0" andro

  • Android仿支付宝的头部伸缩动画效果

    Android5.0推出的MaterialDesign库包含了处理头部工具栏的多个控件,不但允许自定义顶部导航栏,而且导航栏高度是可以伸缩的.如此一来,一方面导航栏能够放得下更多控件,另一方面在用户想看具体内容时也能腾出更多的屏幕空间. 这么说可能比较抽象,那就先来看看两张导航栏的效果图,第一张是导航栏完全展开时的界面,此时页面头部的导航栏占据了较大部分的高度: 第二张是导航栏完全收缩时的界面,此时头部导航栏只剩矮矮的一个长条. 看起来很眼熟是不是,上面的截图正是仿支付宝首页的头部效果.如果你熟

  • Android自定义带动画的半圆环型进度效果

    本文实例为大家分享了Android半圆环型进度效果的具体代码,供大家参考,具体内容如下 package com.newair.ondrawtext; import android.animation.ValueAnimator; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Can

  • Android自定义带动画效果的圆形ProgressBar

    本文实例为大家分享了Android自定义带动画效果的圆形ProgressBar,供大家参考,具体内容如下 最近有个需求显示进度,尾部还要有一标示,像下边这样 使用自定义View的方式实现,代码如下,很简单注释的很清楚 文章最后我们拓展一下功能,实现一个带动画效果的进度条 package com.example.fwc.allexample.progressbar; import android.animation.ValueAnimator; import android.annotation.

  • Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO

    项目中最近用到各种图表,本来打算用第三方的,例如MPAndroid,这是一个十分强大的图表库,应用起来十分方便,但是最终发现和设计不太一样,没办法,只能自己写了.今天将写好的柱状图的demo贴在这,该柱状图可根据数据的功能有一下几点: 1. 根据数据的多少,动态的绘制柱状图柱子的条数: 2. 柱状图每条柱子的绘制都有动态的动画效果: 3. 每条柱子有点击事件,点击时弹出提示框,显示相关信息,规定时间后,弹窗自动消失. 好了,先上演示图: 下边贴出相关代码: 自定义柱状图类: package co

  • Android自定义带进度条WebView仿微信加载过程

    在正常开发中,我们客户端需要用webView加载网页,再遇到网络慢或者访问的服务器响应时,页面是空白的,所以为了用户更好的体验,我们可以提供一个正在加载的进度条,提示用户正在加载. 本文结构: 1.自定义webView 2.在应用中的使用 3.效果展示 一.自定义webView 1.首先定义一个类,继承webView,并首先构造方法 public class ProgressBarWebView extends WebView{} 自定义控件,先实现构造方法, 第一中是程序内部实例化采用,传入c

  • Android自定义带水滴的进度条样式(带渐变色效果)

    一.直接看效果 二.直接上代码 1.自定义控件部分 package com.susan.project.myapplication; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.grap

  • Android自定义带圆点的半圆形进度条

    本文实例为大家分享了Android自定义带圆点的半圆形进度条,供大家参考,具体内容如下 仅限用于半圆形,如须要带圆点的圆形进度条,圆点会出现错位现象,此代码仅供,带圆点的圆形进度条有空研究一下!图片效果在下方, import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import and

  • Android自定义PopWindow带动画向下弹出效果

    本文实例为大家分享了PopWindow实现带动画向下弹出效果的具体代码,供大家参考,具体内容如下 首先建一个popwin的实体类 package dmpte.mytest; import android.content.Context; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.widget.PopupWindow; i

  • Android自定义View实现圆形加载进度条

    本文实例为大家分享了Android自定义View实现圆形加载进度条的具体代码,供大家参考,具体内容如下 效果图 话不多说,咱们直接看代码 首先第一种: 1.创建自定义View类 public class MyRelative extends View {        public MyRelative(Context context) {         this(context, null); //手动改成this...     }       public MyRelative(Conte

  • Android实现带动画效果的可点击展开TextView

    本文为大家分享了Android实现带动画效果的可点击展开TextView 制作代码,效果图: 收起(默认)效果: 点击展开后的效果: 源码: 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/activity_main" xmlns:android="http://schemas.android.com/apk/res/a

  • Android自定义带拼音音调Textview

    本文实例为大家分享了Android自定义带拼音音调Textview的具体代码,供大家参考,具体内容如下 1.拼音textview,简单的为把拼音数组和汉字数组结合在一起多行显示 import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Pa

随机推荐