android实现圆环倒计时控件

本文实例为大家分享了android实现圆环倒计时控件的具体代码,供大家参考,具体内容如下

1.自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <!-- 倒计时控件属性 -->
 <declare-styleable name="CountDownView">
 <!--颜色-->
 <attr name="ringColor" format="color" />
 <!-- 进度文本的字体大小 -->
 <attr name="progressTextSize" format="dimension" />
 <!-- 圆环宽度 -->
 <attr name="ringWidth" format="float" />
 <!--进度文本颜色-->
 <attr name="progressTextColor" format="color"/>
 <!--倒计时-->
 <attr name="countdownTime" format="integer"/>
 </declare-styleable>
</resources>

2.自定义view

public class CountDownView extends View {
 //圆环颜色
 private int mRingColor;
 //圆环宽度
 private float mRingWidth;
 //圆环进度值文本大小
 private int mRingProgessTextSize;
 //宽度
 private int mWidth;
 //高度
 private int mHeight;
 private Paint mPaint;
 //圆环的矩形区域
 private RectF mRectF;
 //
 private int mProgessTextColor;
 private int mCountdownTime;
 private float mCurrentProgress;

 ValueAnimator valueAnimator;

 /**
 * 监听事件
 */
 private OnCountDownListener mListener;

 public CountDownView(Context context) {
 this(context, null);

 }

 public CountDownView(Context context, @Nullable AttributeSet attrs) {
 this(context, attrs, 0);

 }

 public CountDownView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 // init();

 /**
  * 获取相关属性值
  */
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
 mRingColor = typedArray.getColor(R.styleable.CountDownView_ringColor, context.getResources().getColor(R.color.colorAccent));
 mRingWidth = typedArray.getFloat(R.styleable.CountDownView_ringWidth, 40);
 mRingProgessTextSize = typedArray.getDimensionPixelSize(R.styleable.CountDownView_progressTextSize, 20);
 mProgessTextColor = typedArray.getColor(R.styleable.CountDownView_progressTextColor, context.getResources().getColor(R.color.colorAccent));
 mCountdownTime = typedArray.getInteger(R.styleable.CountDownView_countdownTime, 60);
 typedArray.recycle();
 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mPaint.setAntiAlias(true);
 this.setWillNotDraw(false);

 }

 @Override
 protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
 super.onLayout(changed, left, top, right, bottom);
 mWidth = getMeasuredWidth();
 mHeight = getMeasuredHeight();

 mRectF = new RectF(0 + mRingWidth / 2, 0 + mRingWidth / 2,
  mWidth - mRingWidth / 2, mHeight - mRingWidth / 2);
 }

 /**
 * 设置倒计时间 单位秒
 * @param mCountdownTime
 */
 public void setCountdownTime(int mCountdownTime) {
 this.mCountdownTime = mCountdownTime;

 invalidate();

 }

// public CountDownView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
// super(context, attrs, defStyleAttr, defStyleRes);
// }

 /**
 * 动画
 * @param countdownTime
 * @return
 */
 private ValueAnimator getValueAnimator(long countdownTime) {
 ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100);
 valueAnimator.setDuration(countdownTime);
 valueAnimator.setInterpolator(new LinearInterpolator());
 valueAnimator.setRepeatCount(0);
 return valueAnimator;
 }

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

 /**
  *圆环
  */
 //颜色
 mPaint.setColor(mRingColor);
 //空心
 mPaint.setStyle(Paint.Style.STROKE);
 //宽度
 mPaint.setStrokeWidth(mRingWidth);
 canvas.drawArc(mRectF, -90, mCurrentProgress - 360, false, mPaint);
 //绘制文本
 Paint textPaint = new Paint();
 textPaint.setAntiAlias(true);
 textPaint.setTextAlign(Paint.Align.CENTER);
 String text = mCountdownTime - (int) (mCurrentProgress / 360f * mCountdownTime) + "";
 textPaint.setTextSize(mRingProgessTextSize);
 textPaint.setColor(mProgessTextColor);

 //文字居中显示
 Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
 int baseline = (int) ((mRectF.bottom + mRectF.top - fontMetrics.bottom - fontMetrics.top) / 2);
 canvas.drawText(text, mRectF.centerX(), baseline, textPaint);
 }

 /**
 * 开始倒计时
 */
 public void startCountDown() {
 valueAnimator = getValueAnimator(mCountdownTime * 1000);
 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  float i = Float.valueOf(String.valueOf(animation.getAnimatedValue()));
  mCurrentProgress = (int) (360 * (i / 100f));
  invalidate();
  }
 });
 valueAnimator.start();
 valueAnimator.addListener(new AnimatorListenerAdapter() {
  @Override
  public void onAnimationEnd(Animator animation) {
  super.onAnimationEnd(animation);
  //倒计时结束回调
  if (mListener != null) {
   mListener.countDownFinished();
  }
  }

 });
 }

 /**
 * 停止倒计时
 */
 public void stopCountDdwn(){

 valueAnimator.cancel();

 }
 public void setOnCountDownListener(OnCountDownListener mListener) {
 this.mListener = mListener;
 }
}

3.布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
 tools:context=".MainActivity">

 <demo.com.countdowndemo.CountDownView
 android:id="@+id/countDownView"
 android:layout_width="50dp"
 android:layout_height="50dp"
 app:countdownTime="5"
 app:ringWidth="2"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

4.Activity

public class MainActivity extends AppCompatActivity {

 CountDownView countDownView;

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

  countDownView = findViewById(R.id.countDownView);

 countDownView.setOnCountDownListener(new OnCountDownListener() {
  @Override
  public void countDownFinished() {
  //倒计时结束
  //countDownView.setCountdownTime(10);

  Intent intent = new Intent(MainActivity.this, Main2Activity.class);
  startActivity(intent);
  }
 });

 countDownView.startCountDown();

 countDownView.setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View v) {
  countDownView.stopCountDdwn();
  Intent intent = new Intent(MainActivity.this, Main2Activity.class);
  startActivity(intent);
  }
 });
 }
}

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

(0)

相关推荐

  • Android自定义View倒计时圆

    本文实例为大家分享了Android自定义View倒计时圆的具体代码,供大家参考,具体内容如下 创建attr <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CountDownView"> <!--颜色--> <attr name="ringColor" format=&q

  • Android自定义圆环倒计时控件

    本文实例为大家分享了Android自定义圆环倒计时控件的具体代码,供大家参考,具体内容如下 先来一张最终效果图: 主要思路: 在画渐变色圆环的时候,设置一个属性动画,根据属性动画的执行时长,来作为倒计时的时长.监听属性动画的进度,来达到 倒计时的目的. 二话不说,直接贴代码.具体实现思路都在注释上. 自定义属性: <declare-styleable name="CountDownProgressBar"> <attr name="countDown_cir

  • android实现倒计时动态圈

    本文实例为大家分享了android实现倒计时动态圈的具体代码,供大家参考,具体内容如下 效果是这样,没动图: 布局: <LinearLayout android:layout_width="wrap_content" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:layout_centerInParent="t

  • Android实现文件上传和下载倒计时功能的圆形进度条

    screenshot 截图展示 import step1. Add it in your root build.gradle at the end of repositories: allprojects { repositories { ... maven { url 'https://jitpack.io' } } } step2. Add the dependency dependencies { compile 'com.github.yanjiabin:ExtendsRingPrigr

  • android自定义圆形倒计时显示控件

    本文实例为大家分享了android自定义圆形倒计时显示控件的具体代码,供大家参考,具体内容如下 先上效果图 - 倒计时结束 代码块 attr.xml 控件需要用到的属性: <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="CountDownView"> <!--颜色--> <attr name

  • Android仿Keep运动休息倒计时圆形控件

    仿Keep运动休息倒计时控件,供大家参考,具体内容如下 源码 控件本身非常非常简单,唯一难点在于倒计时期间动态增减时长,如果说动态增减时长是瞬间完成的,倒也没什么难度,但是如果是需要花一定时间做动画的话(见效果图),考虑的逻辑就变多了,这也是我写这个的目的,对应源码中就是plus这个方法.地址: KeepCountdownView 效果 使用方法 xml: <com.KeepCountdownView.KeepCountdownView android:id="@+id/keep1&quo

  • Android自定义圆形倒计时进度条

    效果预览 源代码传送门:https://github.com/yanzhenjie/CircleTextProgressbar 实现与原理 这个文字圆形的进度条我们在很多APP中看到过,比如APP欢迎页倒计时,下载文件倒计时等. 分析下原理,可能有的同学一看到这个自定义View就慌了,这个是不是要继承View啊,是不是要绘制啊之类的,答案是:是的.但是我们也不要担心,实现这个效果实在是so easy.下面就跟我一起来看看核心分析和代码吧. 原理分析 首先我们观察上图,需要几个部分组成: 1. 外

  • android实现圆环倒计时控件

    本文实例为大家分享了android实现圆环倒计时控件的具体代码,供大家参考,具体内容如下 1.自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 倒计时控件属性 --> <declare-styleable name="CountDownView"> <!--颜色--> <attr name="rin

  • Android自带倒计时控件Chronometer使用方法详解

    公司的以前的项目,看到使用了这个Android自带的倒计时控件Chronometer,现在整合了一下 先看看效果: <Chronometer android:id="@+id/chronometer" android:layout_width="wrap_content" android:layout_height="30dp" /> <Button android:onClick="start" andro

  • Android使用属性动画如何自定义倒计时控件详解

    为什么要引入属性动画? Android之前的补间动画机制其实还算是比较健全的,在android.view.animation包下面有好多的类可以供我们操作,来完成一系列的动画效果,比如说对View进行移动.缩放.旋转和淡入淡出,并且我们还可以借助AnimationSet来将这些动画效果组合起来使用,除此之外还可以通过配置Interpolator来控制动画的播放速度等等等等.那么这里大家可能要产生疑问了,既然之前的动画机制已经这么健全了,为什么还要引入属性动画呢? 其实上面所谓的健全都是相对的,如

  • Android 倒计时控件 CountDownView的实例代码详解

    一个精简可自定义的倒计时控件,使用 Canvas.drawArc() 绘制.实现了应用开屏页的圆环扫过的进度条效果. 代码见https://github.com/hanjx-dut/CountDownView 使用 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { implementation 'com.github.hanjx-dut:CountDownView:1.1'

  • android自定义倒计时控件示例

    自定义TextView控件TimeTextView代码: 复制代码 代码如下: import android.content.Context;import android.content.res.TypedArray;import android.graphics.Paint;import android.text.Html;import android.util.AttributeSet;import android.widget.TextView; import com.new0315.R;

  • android倒计时控件示例

    本文为大家分享了android倒计时控件,供大家参考,具体代码如下 /* * Copyright (C) 2012 The * Project * All right reserved. * Version 1.00 2012-2-11 * Author veally@foxmail.com */ package com.ly.sxh.view; import android.content.Context; import android.database.ContentObserver; im

  • Android倒计时控件 Splash界面5秒自动跳转

    现在很多app的首页都有一个倒计时控件,比如说3秒或者5秒自动跳转界面,或者点击控件直接跳过 首先,自定义控件CircleProgressbar(参考网上资料) package com.zhoujian.mykeep.view; import android.annotation.TargetApi; import android.content.Context; import android.content.res.ColorStateList; import android.content.

  • Android自定义view实现倒计时控件

    本文实例为大家分享了Android自定义view实现倒计时控件的具体代码,供大家参考,具体内容如下 直接上代码 自定义TextView 文字展示 public class StrokeTextView extends TextView { private TextView borderText = null;///用于描边的TextView private Context mContext; public StrokeTextView(Context context) { super(conte

  • ReactNative短信验证码倒计时控件的实现代码

    由于最近刚开始认真的搞RN,可能有一些封装的不是最佳实践,还是希望大家多提意见,和大家一起进步吧.本文介绍了ReactNative短信验证码倒计时控件,分享给大家 功能 根据项目的需要,需要写一个自定义的控件,实现如下功能: 默认文字为点击获取验证码 点击后出现60秒的倒计时 颜色,字号可调 倒计时过程中,再次点击需要忽略掉 倒计时完成后文本恢复成点击获取验证码 再几次点击同之前 其实说了这么多,就是个最普通的验证码的功能... 效果 效果图如下:(录的图片比较一般,对付着看吧) 实现原理 自己

随机推荐