android实现倒计时动态圈

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

效果是这样,没动图:

布局:

<LinearLayout
  android:layout_width="wrap_content"
  android:layout_centerVertical="true"
  android:layout_centerHorizontal="true"
  android:layout_centerInParent="true"
  android:layout_height="wrap_content">
  <com.example.herman.testui.CountDownView
    android:id="@+id/tv_red_skip"
    android:layout_width="130dp"
    android:text="跳过"
    android:textColor="#ffffff"
    android:textSize="10sp"
    android:layout_height="130dp" />
</LinearLayout>

values下新建一个attr.xml,内容是:

<?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>

一个类,类名CountDownView,代码如下:

package com.example.herman.testui;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ValueAnimator;
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.view.View;
import android.view.animation.LinearInterpolator;

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;
  private OnCountDownFinishListener mListener;

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

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

  public CountDownView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CountDownView);
    mRingColor = a.getColor(R.styleable.CountDownView_ringColor, context.getResources().getColor(R.color.deepOrange));
    mRingWidth = a.getFloat(R.styleable.CountDownView_ringWidth, 20);
    mRingProgessTextSize = a.getDimensionPixelSize(R.styleable.CountDownView_progressTextSize, DisplayUtil.sp2px(context, 20));
    mProgessTextColor = a.getColor(R.styleable.CountDownView_progressTextColor, context.getResources().getColor(R.color.deepOrange));
    mCountdownTime = a.getInteger(R.styleable.CountDownView_countdownTime, 10);
    a.recycle();
    mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mPaint.setAntiAlias(true);
    this.setWillNotDraw(false);
  }

  public void setCountdownTime(int mCountdownTime) {
    this.mCountdownTime = mCountdownTime;
  }

  @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);
  }

  @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);
  }

  private ValueAnimator getValA(long countdownTime) {
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 100);
    valueAnimator.setDuration(countdownTime);
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.setRepeatCount(0);
    return valueAnimator;
  }
  /**
   * 开始倒计时
   */
  public void startCountDown() {
    setClickable(false);
    ValueAnimator valueAnimator = getValA(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();
        }
        setClickable(true);
      }

    });
  }
  public void setAddCountDownListener(OnCountDownFinishListener mListener) {
    this.mListener = mListener;
  }
  public interface OnCountDownFinishListener {
    void countDownFinished();
  }
}

activity中这样调用:

CountDownView cdv = (CountDownView) findViewById(R.id.tv_red_skip);

cdv.setAddCountDownListener(new CountDownView.OnCountDownFinishListener() {
  @Override
  public void countDownFinished() {
    //时间完了 干的事情
  }
});

cdv.startCountDown();

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

(0)

相关推荐

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

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

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

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

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

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

  • Android自定义View倒计时圆

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

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

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

  • android实现圆环倒计时控件

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

  • 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实现倒计时动态圈的具体代码,供大家参考,具体内容如下 效果是这样,没动图: 布局: <LinearLayout android:layout_width="wrap_content" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:layout_centerInParent="t

  • android实现微信朋友圈发布动态功能

    本文实例为大家分享了android仿微信朋友圈发布动态功能的具体代码,供大家参考,具体内容如下 效果图: 本文概述 用到的开源库:仿照微信的图片选择器,Luban压缩图片,glide 上面红圈部分,当用户选中图片时,当=9张时,那个加号图片就会消失! 本文主要仿照微信的发布动态功能,主要时针对微信发布动态时,选中图片后的变化状态! 整体布局 这可以看到,控制图片状态的地方就是一个recyclerview 思路 利用recyclerview的多行视图来实现! 微信上的效果是,先选中图片后才会进入这

  • Android 实现密码输入框动态明文/密文切换显示效果

    在项目中遇到需要提供给用户一个密码输入框明文/密文切换显示的需求,在网上搜索一圈都没有发现完整的实现,幸而找到了一个实现的思路. 先上效果图,看了录制屏幕gif的教程,无奈手机太旧系统版本不支持,只有上静态图了. 密码输入框动态明文/密文切换显示 当看到这个效果图的时候,相信你已经猜到大概的思路了.没错就是为我们的EditText设置drawableRight,图中的眼睛图片还有一个配对的,是从martial designde的网站下载的,当用户点击drawableRight时,先动态的改变dr

  • Android 通过触摸动态地在屏幕上画矩形效果

    需求概述: 在屏幕上用手指画出一个区域,返回所圈的区域坐标. 技术实现: 自定义View,设置画笔及对应参数,在onTouchEvent()回调函数里,对触摸事件进行判断.画出矩形图形. 代码: 自定义View: public class GameView extends View { // 声明Paint对象 private Paint mPaint = null; private int StrokeWidth = 5; private Rect rect = new Rect(0,0,0,

  • Android 仿微信朋友圈点赞和评论弹出框功能

    贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

  • 纯jsp实现的倒计时动态显示效果完整代码

    本文实例讲述了纯jsp实现的倒计时动态显示效果代码.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <div id="showTimes"></div> <% long current_time=System.currentTimeMillis(); long e

  • Android编程之动态壁纸实例分析

    本文实例讲述了Android编程之动态壁纸.分享给大家供大家参考,具体如下: 从android 2.1版本起引入了动态壁纸的概念,熟悉android的人一定不会陌生.这里解释一个动态壁纸是怎么形成又是怎么工作的. 首先动态桌面的动态体现出这个组件是实时变化的,也就是说有一个后台在不停的刷新这个组件.联想到后台组件首先想到的就是service,从代码角度看,果然如此.每一个动态桌面都继承自WallpaperService,其中必须实现的抽象方法onCreateEngine,返回一个Engine对象

  • Android中的动态加载机制的学习研究

    在目前的软硬件环境下,Native App与Web App在用户体验上有着明显的优势,但在实际项目中有些会因为业务的频繁变更而频繁的升级客户端,造成较差的用户体验,而这也恰恰是Web App的优势.本文对网上Android动态加载jar的资料进行梳理和实践在这里与大家一起分享,试图改善频繁升级这一弊病. Android应用开发在一般情况下,常规的开发方式和代码架构就能满足我们的普通需求.但是有些特殊问题,常常引发我们进一步的沉思.我们从沉思中产生顿悟,从而产生新的技术形式. 如何开发一个可以自定

  • Android ListView中动态添加RaidoButton的实例详解

    Android ListView中动态添加RaidoButton的实例详解 这里讲解的内容是:从数据库中取得数据,将这些数据的value值赋值给Radiobutton的text属性,将这些数据的key值赋值给radiobutton的key值.同时实现点击一整行,更换radiobutton选择. XML代码:主要是添加一个ListView控件 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&q

  • Android 中倒计时验证两种常用方式实例详解

    Android 中倒计时验证两种常用方式实例详解 短信验证码功能,这里总结了两种常用的方式,可以直接拿来使用.看图: 说明:这里的及时从10开始,是为了演示的时间不要等太长而修改的. 1.第一种方式:Timer /** * Description:自定义Timer * <p> * Created by Mjj on 2016/12/4. */ public class TimeCount extends CountDownTimer { private Button button; //参数依

随机推荐