Android自定义扇形倒计时实例代码

一.概述

严格来说,我是Android小白,写的目的只是想作为知识储备而已….但是想到别人或许会不小心搜到我的这篇,如果我只是简单的描述,别人有可能看不懂,说不定还被吐槽,那岂不是很冤吗?

所以,我还是把问题及过程描述清楚,这也是对自己的一个交代,同时,这也是我的第一篇,我应该做好它;

先说一下需求: 最近工作中需要做一个倒计时,是那种一个圆,慢慢的被吃掉的动画倒计时,由于自己知识不是很足,只知道要用Canvas来画,在网上搜了一圈,发现要么是静态的画了一个扇形,要么是不能控制控件的位置大小….总之,找了一圈感觉学了不少Canvas的知识,但是由于自己也是Android小白,所以并不能从中总结出我想要的那种动画的扇形倒计时(这里说一下,因为我是第一次用这玩意,对一些编辑不熟,所以就不上效果图了,但是这里的代码非常简单,需要的朋友可以直接拿过去运行一下看看是否是你需要的效果);

最后我不得不请教我的一个朋友,现在他倒是也谈不上大神,但是比我厉害多了…..这里说白了我只是把他的逻辑更多的挪过来…好惭愧…因为我更多的只是想作为一个知识储备…

二.正文

刚才也说到用到Canvas,所以我们先来自定义一个控件,直接继承View的自定义控件;

SweepView.java:

public class SweepView extends View {
  private static final int DEFAULT_WIDTH = 100;
  private static final int DEFAULT_HEIGHT = 100;
  private int mWidth;   //这里并没卵用
  private int mHeight;  //这个也没卵用
  private RectF rectF;
  private Paint paint;
  private int mColor = Color.RED;//默认颜色为红色
  private float mSweep = 0;  //扇形角度
  public SweepView(Context context) {
    super(context);
    init();
  }
  public SweepView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }
  public SweepView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
  }
  private void init() {
    paint = new Paint();
    paint.setColor(mColor); //画笔颜色
    paint.setStyle(Paint.Style.FILL);  //填充
    paint.setAntiAlias(true);  //是否抗锯齿
  }
  /**
   * 设置扇形颜色
   * UIThred
   */
  public void setColor(int color) {
    this.mColor = color;
    paint.setColor(mColor);
    //调用onDraw重绘
    invalidate();
  }
  /**
   * 设置扇形的区域0-360
   * UIThred
   */
  public void setSweep(float mSweep) {
    this.mSweep = mSweep;
    //调用onDraw重绘
    invalidate();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int resultWidth = measureWidth(widthMeasureSpec);
    int resultHeight = measureHeight(heightMeasureSpec);
    setMeasuredDimension(resultWidth, resultHeight);
  }
  /**
   * 绘制的宽
   * 其实里面的内容我不懂,好惭愧...我以后会弄懂的.....0.0
   */
  private int measureWidth(int widthMeasureSpec) {
    int size = MeasureSpec.getSize(widthMeasureSpec);
    int mode = MeasureSpec.getMode(widthMeasureSpec);
    int result;
    if (mode == MeasureSpec.EXACTLY) {
      result = size;
    } else {
      result = DEFAULT_WIDTH;
      if (mode == MeasureSpec.AT_MOST) {
        result = Math.min(size, DEFAULT_WIDTH);
      }
    }
    return result;
  }
  /**
   * 绘制的高
   * 这里面的内容我也不懂,好惭愧...我以后会弄懂的.....0.0
   */
  private int measureHeight(int heightMeasureSpec) {
    int size = MeasureSpec.getSize(heightMeasureSpec);
    int mode = MeasureSpec.getMode(heightMeasureSpec);
    int result;
    if (mode == MeasureSpec.EXACTLY) {
      result = size;
    } else {
      result = DEFAULT_HEIGHT;
      if (mode == MeasureSpec.AT_MOST) {
        result = Math.min(size, DEFAULT_HEIGHT);
      }
    }
    return result;
  }
  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    this.mHeight = h;
    this.mWidth = w;
    rectF = new RectF(0, 0, w, h);
    super.onSizeChanged(w, h, oldw, oldh);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    //画扇形
    canvas.drawArc(rectF, -90, mSweep, true, paint);
  }
}

写好自定义的View,显然我们要用它,所以布局文件中声明:(不过有一点要注意的是,如果想要控制它的位置及大小,这里要用ViewGroup来包裹,通过设置ViewGroup的位置及大小来控制它,至于为什么,我也很想知道0.0)

MainActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/activity_main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.example.meijun.myapplication.MainActivity">
  <RelativeLayout
    android:layout_centerInParent="true"
    android:layout_width="20dp"
    android:background="#00f"
    android:layout_height="20dp">
    <com.example.meijun.myapplication.SweepView
      android:layout_width="wrap_content"
      android:id="@+id/sweepView"
      android:layout_height="wrap_content" />
  </RelativeLayout>
</RelativeLayout>

最后就是在代码里来绘制动画形态的,圆形扇形倒计时了:

MainActivity.java:

public class MainActivity extends AppCompatActivity {
  private SweepView sweepView;
  float angle = 0;//绘制的角度
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    sweepView = (SweepView) findViewById(R.id.sweepView);
    sweepView.setColor(Color.WHITE);  //设置画笔颜色
    sweepView.setSweep(0); //初始绘制0度
    new Thread(new Runnable() {
      @Override
      public void run() {
        while (angle <= 360) { //这里相当于绘制一个完整的圆,结合下面的3.6及50,也就是5秒钟的倒计时
          angle += 3.6;
          runOnUiThread(new Runnable() {
            @Override
            public void run() {
              sweepView.setSweep(angle);
            }
          });
          try {
            Thread.sleep(50);
          } catch (InterruptedException e) {
            e.printStackTrace();
          }
        }
      }
    }).start();
  }
}

三.总结

在自定义view中,我有很多地方还不是很明白的,因为自己本身对自定义的一些方法认知是缺乏的,不过我想我以后会慢慢弄懂其中一些方法的含义;当然如果朋友你不小心能看到这篇文章,还望你能对我解惑,不胜感激.

(0)

相关推荐

  • Android自定义照相机倒计时拍照

    自定义拍照会用到SurfaceView控件显示照片的预览区域,以下是布局文件: 两个TextView是用来显示提示信息和倒计时的秒数的 相关教程:Android开发从相机或相册获取图片裁剪 Android启动相机拍照并返回图片 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools&qu

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

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

  • Android自定义控件实现验证码倒计时

    今天给大家带来一个新的控件--验证码倒计时,先看下效果图 1 效果演示 2 使用方式 <com.landptf.view.CountDownM android:id="@+id/cdm_identifying_code" android:layout_width="wrap_content" android:layout_height="50dp" android:layout_alignParentRight="true&quo

  • 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自定义Chronometer实现短信验证码秒表倒计时功能

    本文实例为大家分享了Chronometer实现倒计时功能,Android提供了实现按照秒计时的API,供大家参考,具体内容如下 一.自定义ChronometerView 继续自TextView 主要原理:先设置一个基准倒计时时间mBaseSeconds,内置handler 每隔1s发送一个空消息,mRemainSeconds--,同时刷新界面视图,回调给外部调用者,只到为零.外部调用者可通过start()/pause()/stop()来控制计时器的工作状态. 可以app中发送短信验证码的场景为例

  • Android自定义View获取注册验证码倒计时按钮

    在Android开发中,我们不可避免的会做到注册功能,而现在的注册大多数都是用手机去注册的,那么注册的时候都会要求用获取验证码的方式去验证,我们接下来就来实战一下自定义获取验证码倒计时按钮: 1.先看效果图 2.我们涉及到的变量 //倒计时时长,可设置 /** * 倒计时时长,默认倒计时时间60秒: */ private long length = 60 * 1000; //在点击按钮之前按钮所显示的文字 /** * 在点击按钮之前按钮所显示的文字,默认是获取验证码 */ private Str

  • Android自定义扇形倒计时实例代码

    一.概述 严格来说,我是Android小白,写的目的只是想作为知识储备而已-.但是想到别人或许会不小心搜到我的这篇,如果我只是简单的描述,别人有可能看不懂,说不定还被吐槽,那岂不是很冤吗? 所以,我还是把问题及过程描述清楚,这也是对自己的一个交代,同时,这也是我的第一篇,我应该做好它; 先说一下需求: 最近工作中需要做一个倒计时,是那种一个圆,慢慢的被吃掉的动画倒计时,由于自己知识不是很足,只知道要用Canvas来画,在网上搜了一圈,发现要么是静态的画了一个扇形,要么是不能控制控件的位置大小-.

  • Android自定义滚动选择器实例代码

    Android自定义滚动选择器 实现图片的效果 代码如下 package com.linzihui.widget; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Paint.Align; import android.graph

  • Android 自定义View之倒计时实例代码

    Android 自定义View之倒计时实例代码 需求: 大多数app在注册的时候,都有一个获取验证码的按钮,点击后,访问接口,最终用户会收到短信验证码.为了不多次写这个获取验证码的接口,下面将它自定义成一个view,方便使用. 分析一下,这是一个TextView,点击的时候变色,不能再点击,同时里面的倒计时开始显示.那么就有了下面的代码 代码: /** * 通过selector选择器来改变背景,其中倒计时运行时为android:state_enabled="true", * 不显示倒计

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

  • Android 自定义ContentProvider简单实例

    Android 自定义ContentProvider简单实例 Android允许我们定义自己的的ContentProvider对象来共享数据,练练手,简单来实现一下. 要使用ContentProvider来操作数据,必须要有保存数据的场所.可以使用文件或SQLite数据库的方式来保存数据,通常使用SQLite数据库. 1,创建一个数据库帮助类,归根结底都是它在操作数据库.代码如下: package com.njue; import android.content.Context; import

  • Android 自定义标题栏的实例详解

     Android 自定义标题栏的实例详解 开发 Android APP 经常会用到自定义标题栏,而有多级页面的情况下还需要给自定义标题栏传递数据. 本文要点: 自定义标题填充不完整 自定义标题栏返回按钮的点击事件 一.代码 这里先介绍一下流程: 1. 创建一个标题栏布局文件 mytitlebar.xml 2. 在style.xml中创建 mytitlestyle 主题 3. 创建类 CustomTitleBar 4. 在需要自定义标题栏的Activity的OnCreate方法中实例化 Custo

  • Android 画一个太极图实例代码

    今天练手一下,一起来画个太极图吧~ 最终效果如下: 最终效果 一般都是先讲原理,我就反其道而行,先讲实现吧. 1.继承实现初始化方法 继承View,实现基本的构造函数: public TestView(Context context) { this(context, null); } public TestView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public TestView(Context c

  • Android系统音量条实例代码

    最近在定制Android系统音量条,发现代码还是蛮多的,下面总结一下. 代码是基于5.1.1版本的. 系统音量条的代码是在/frameworks/base/packages/SystemUI/src/com/android/systemui/volume/VolumePanel.java 布局文件是在/frameworks/base/packages/SystemUI/res/layout下. 先看看原生的音量条样式: 在代码中可以发现volume_dialog.xml这个文件,这个文件就是承载

随机推荐