Android自定义view之仿微信录制视频按钮
本文章只写了个类似微信的录制视频的按钮，效果图如下：
一、主要的功能：
1.长按显示进度条，单击事件，录制完成回调
2.最大时间和最小时间控制
3.进度条宽度，颜色设置
二、实现思路
该自定义View主要有三块组成，白色内圆，浅色大圆，圆形进度条；长按一段时间，内圆缩小0.75倍，外圆放大1.33倍，进度条显示更新，松开手内圆，外圆统一恢复到原来大小；长按时间达到最大，影藏进度条，，同样内圆外圆恢复到原来大小；动画主要用到属性动画中的ValueAnimator，在一定时间内匀速改变内圆，外圆半径，和圆形进度条的绘制角度，最后调用invalidate（）重新绘制，起到动画的作用。
三、代码分析
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
//绘制外圆
canvas.drawCircle(mWidth/,mHeight/,mBigRadius,mBigCirclePaint);
//绘制内圆
canvas.drawCircle(mWidth/,mHeight/,mSmallRadius,mSmallCirclePaint);
//录制的过程中绘制进度条
if(isRecording){
drawProgress(canvas);
}
}
绘制内外圆，isRecording表示录制的情况下才参与绘制，相当于显示
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
isPressed=true;
mStartTime=System.currentTimeMillis();
Message mMessage=Message.obtain();
mMessage.what=WHAT_LONG_CLICK;
mHandler.sendMessageDelayed(mMessage,mLongClickTime);
break;
case MotionEvent.ACTION_UP:
isPressed=false;
isRecording=false;
mEndTime=System.currentTimeMillis();
if(mEndTime-mStartTime<mLongClickTime){
mHandler.removeMessages(WHAT_LONG_CLICK);
if(onClickListener!=null)
onClickListener.onClick();
}else{
startAnimation(mBigRadius,mInitBitRadius,mSmallRadius,mInitSmallRadius);//手指离开时动画复原
if(mProgressAni!=null&&mProgressAni.getCurrentPlayTime()/<mMinTime&&!isMaxTime){
if(onLongClickListener!=null){
onLongClickListener.onNoMinRecord(mMinTime);
}
mProgressAni.cancel();
}else{
//录制完成
if(onLongClickListener!=null&&!isMaxTime){
onLongClickListener.onRecordFinishedListener();
}
}
}
break;
}
return true; }
长按的事件是通过handler发送延时消息实现的，按下的时候就发送，当手指离开，记录按下和离开的时间间隔，达到一定时间即为长按，否则直接移除消息，长按事件失效，此时情况就是点击事件；
private Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case WHAT_LONG_CLICK:
//长按事件触发
if(onLongClickListener!=null) {
onLongClickListener.onLongClick();
}
//内外圆动画，内圆缩小，外圆放大
startAnimation(mBigRadius,mBigRadius*1.33f,mSmallRadius,mSmallRadius*0.7f);
break;
}
}
} ;
handler里面处理的即为长按的触发事件，此时开始startAnimation
private void startAnimation(float bigStart,float bigEnd, float smallStart,float smallEnd) {
ValueAnimator bigObjAni=ValueAnimator.ofFloat(bigStart,bigEnd);
bigObjAni.setDuration();
bigObjAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBigRadius= (float) animation.getAnimatedValue();
invalidate();
}
});
ValueAnimator smallObjAni=ValueAnimator.ofFloat(smallStart,smallEnd);
smallObjAni.setDuration();
smallObjAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSmallRadius= (float) animation.getAnimatedValue();
invalidate();
}
});
bigObjAni.start();
smallObjAni.start();
smallObjAni.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isRecording=false;
}
@Override
public void onAnimationEnd(Animator animation) {
//开始绘制圆形进度
if(isPressed){
isRecording=true;
isMaxTime=false;
startProgressAnimation();
}
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
}
ValueAnimator.ofFloat（bigStart,bigEnd）;让圆的半径从bigStart到bigEnd动态变化，
设置addUpdateListener监听，获取正在变化的值重新赋值给圆的半径，调用 invalidate重新绘制，从而起到动画的效果，在开始录制的动画结束后，来绘制圆形进度条，
/**
* 绘制圆形进度
* @param canvas
*/
private void drawProgress(Canvas canvas) {
mProgressCirclePaint.setStrokeWidth(mProgressW);
mProgressCirclePaint.setStyle(Paint.Style.STROKE);
//用于定义的圆弧的形状和大小的界限
RectF oval = new RectF(mWidth/-(mBigRadius-mProgressW/), mHeight/-(mBigRadius-mProgressW/), mWidth/+(mBigRadius-mProgressW/),mHeight/+(mBigRadius-mProgressW/));
//根据进度画圆弧
canvas.drawArc(oval, -, mCurrentProgress, false, mProgressCirclePaint);
}
RectF限制圆弧的绘制范围，mCurrentProgress绘制的角度0~360f之间变化，同样可以利用ValueAnimator，来在0~360f之间不断改变，然后不断更新绘制，起到进度条动态更新的效果
四、全部代码
package com.yus.ycamera; import android.animation.Animator;
import android.animation.ValueAnimator;
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.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View; /**
* Created by yufs on 2017/7/4.
*/ public class CircleButtonView extends View{
private static final int WHAT_LONG_CLICK = ;
private Paint mBigCirclePaint;
private Paint mSmallCirclePaint;
private Paint mProgressCirclePaint;
private int mHeight;//当前View的高
private int mWidth;//当前View的宽
private float mInitBitRadius;
private float mInitSmallRadius;
private float mBigRadius;
private float mSmallRadius;
private long mStartTime;
private long mEndTime;
private Context mContext;
private boolean isRecording;//录制状态
private boolean isMaxTime;//达到最大录制时间
private float mCurrentProgress;//当前进度 private long mLongClickTime=;//长按最短时间(毫秒)，
private int mTime=;//录制最大时间s
private int mMinTime=;//录制最短时间
private int mProgressColor;//进度条颜色
private float mProgressW=18f;//圆环宽度 private boolean isPressed;//当前手指处于按压状态
private ValueAnimator mProgressAni;//圆弧进度变化 public CircleButtonView(Context context ) {
super(context);
init(context,null);
} public CircleButtonView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context,attrs);
} public CircleButtonView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context,attrs);
} private void init(Context context,AttributeSet attrs) {
this.mContext=context;
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleButtonView);
mMinTime=a.getInt(R.styleable.CircleButtonView_minTime,);
mTime=a.getInt(R.styleable.CircleButtonView_maxTime,);
mProgressW=a.getDimension(R.styleable.CircleButtonView_progressWidth,12f);
mProgressColor=a.getColor(R.styleable.CircleButtonView_progressColor,Color.parseColor("#6ABF66"));
a.recycle();
//初始画笔抗锯齿、颜色
mBigCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mBigCirclePaint.setColor(Color.parseColor("#DDDDDD")); mSmallCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mSmallCirclePaint.setColor(Color.parseColor("#FFFFFF")); mProgressCirclePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mProgressCirclePaint.setColor(mProgressColor); mProgressAni= ValueAnimator.ofFloat(, 360f);
mProgressAni.setDuration(mTime*);
} @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeight=MeasureSpec.getSize(heightMeasureSpec);
mInitBitRadius=mBigRadius= mWidth/*0.75f;
mInitSmallRadius=mSmallRadius= mBigRadius*0.75f;
} @Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
//绘制外圆
canvas.drawCircle(mWidth/,mHeight/,mBigRadius,mBigCirclePaint);
//绘制内圆
canvas.drawCircle(mWidth/,mHeight/,mSmallRadius,mSmallCirclePaint);
//录制的过程中绘制进度条
if(isRecording){
drawProgress(canvas);
}
} /**
* 绘制圆形进度
* @param canvas
*/
private void drawProgress(Canvas canvas) {
mProgressCirclePaint.setStrokeWidth(mProgressW);
mProgressCirclePaint.setStyle(Paint.Style.STROKE);
//用于定义的圆弧的形状和大小的界限
RectF oval = new RectF(mWidth/-(mBigRadius-mProgressW/), mHeight/-(mBigRadius-mProgressW/), mWidth/+(mBigRadius-mProgressW/),mHeight/+(mBigRadius-mProgressW/));
//根据进度画圆弧
canvas.drawArc(oval, -, mCurrentProgress, false, mProgressCirclePaint);
} private Handler mHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case WHAT_LONG_CLICK:
//长按事件触发
if(onLongClickListener!=null) {
onLongClickListener.onLongClick();
}
//内外圆动画，内圆缩小，外圆放大
startAnimation(mBigRadius,mBigRadius*1.33f,mSmallRadius,mSmallRadius*0.7f);
break;
}
}
} ; @Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
isPressed=true;
mStartTime=System.currentTimeMillis();
Message mMessage=Message.obtain();
mMessage.what=WHAT_LONG_CLICK;
mHandler.sendMessageDelayed(mMessage,mLongClickTime);
break;
case MotionEvent.ACTION_UP:
isPressed=false;
isRecording=false;
mEndTime=System.currentTimeMillis();
if(mEndTime-mStartTime<mLongClickTime){
mHandler.removeMessages(WHAT_LONG_CLICK);
if(onClickListener!=null)
onClickListener.onClick();
}else{
startAnimation(mBigRadius,mInitBitRadius,mSmallRadius,mInitSmallRadius);//手指离开时动画复原
if(mProgressAni!=null&&mProgressAni.getCurrentPlayTime()/<mMinTime&&!isMaxTime){
if(onLongClickListener!=null){
onLongClickListener.onNoMinRecord(mMinTime);
}
mProgressAni.cancel();
}else{
//录制完成
if(onLongClickListener!=null&&!isMaxTime){
onLongClickListener.onRecordFinishedListener();
}
}
}
break;
}
return true; } private void startAnimation(float bigStart,float bigEnd, float smallStart,float smallEnd) {
ValueAnimator bigObjAni=ValueAnimator.ofFloat(bigStart,bigEnd);
bigObjAni.setDuration();
bigObjAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBigRadius= (float) animation.getAnimatedValue();
invalidate();
}
}); ValueAnimator smallObjAni=ValueAnimator.ofFloat(smallStart,smallEnd);
smallObjAni.setDuration();
smallObjAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSmallRadius= (float) animation.getAnimatedValue();
invalidate();
}
}); bigObjAni.start();
smallObjAni.start(); smallObjAni.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isRecording=false;
} @Override
public void onAnimationEnd(Animator animation) {
//开始绘制圆形进度
if(isPressed){
isRecording=true;
isMaxTime=false;
startProgressAnimation();
}
} @Override
public void onAnimationCancel(Animator animation) { } @Override
public void onAnimationRepeat(Animator animation) { }
}); } /**
* 圆形进度变化动画
*/
private void startProgressAnimation() {
mProgressAni.start();
mProgressAni.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCurrentProgress= (float) animation.getAnimatedValue();
invalidate();
}
}); mProgressAni.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) { } @Override
public void onAnimationEnd(Animator animation) {
//录制动画结束时，即为录制全部完成
if(onLongClickListener!=null&&isPressed){
isPressed=false;
isMaxTime=true;
onLongClickListener.onRecordFinishedListener();
startAnimation(mBigRadius,mInitBitRadius,mSmallRadius,mInitSmallRadius);
//影藏进度进度条
mCurrentProgress=;
invalidate();
} } @Override
public void onAnimationCancel(Animator animation) { } @Override
public void onAnimationRepeat(Animator animation) { }
});
} /**
* 长按监听器
*/
public interface OnLongClickListener{
void onLongClick();
//未达到最小录制时间
void onNoMinRecord(int currentTime);
//录制完成
void onRecordFinishedListener();
}
public OnLongClickListener onLongClickListener; public void setOnLongClickListener(OnLongClickListener onLongClickListener) {
this.onLongClickListener = onLongClickListener;
} /**
* 点击监听器
*/
public interface OnClickListener{
void onClick();
}
public OnClickListener onClickListener; public void setOnClickListener(OnClickListener onClickListener) {
this.onClickListener = onClickListener;
} }
属性文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleButtonView">
<attr name="minTime" format="integer"></attr>
<attr name="maxTime" format="integer"></attr>
<attr name="progressColor" format="color"></attr>
<attr name="progressWidth" format="dimension"></attr>
</declare-styleable>
</resources>
全部的大家可以下载源码查看，有什么问题，欢迎提出，后续会将此控件应用到小视频的录制上面，下一遍记录小视频录制，还有就是个人在demo演示的时候都没有找到个将视频转gif的，上面也只能贴图片，哎，心塞
Android自定义view之仿微信录制视频按钮的更多相关文章
- Android 自定义View，仿微信视频播放按钮
闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友 ...
- android自定义View之仿通讯录侧边栏滑动，实现A-Z字母检索
我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...
- Android自定义View实现仿QQ实现运动步数效果
效果图: 1.attrs.xml中 <declare-styleable name="QQStepView"> <attr name="outerCol ...
- Android 自定义View修炼-仿360手机卫士波浪球进度的实现
像360卫士的波浪球进度的效果,一般最常用的方法就是 画线的方式,先绘sin线或贝塞尔曲线,然后从左到右绘制竖线,然后再裁剪圆区域. 今天我这用图片bitmap的方式,大概的方法原理是: (1)首先用 ...
- Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现
有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...
- Android自定义View之ProgressBar出场记
关于自定义View,我们前面已经有三篇文章在介绍了,如果筒子们还没阅读,建议先看一下,分别是android自定义View之钟表诞生记.android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检 ...
- android自定义View之NotePad出鞘记
现在我们的手机上基本都会有一个记事本,用起来倒也还算方便,记事本这种东东,如果我想要自己实现,该怎么做呢?今天我们就通过自定义View的方式来自定义一个记事本.OK,废话不多说,先来看看效果图. 整个 ...
- Android 仿微信小视频录制
Android 仿微信小视频录制 WechatShortVideo和WechatShortVideo文章
- Android自定义View（LimitScrollerView－仿天猫广告栏上下滚动效果）
转载请标明出处: http://blog.csdn.net/xmxkf/article/details/53303872 本文出自:[openXu的博客] 1分析 2定义组合控件布局 3继承最外层控件 ...
随机推荐
- C++模板之可变模板参数
可变模板参数---- C++11新特性 可变模板参数(variadic templates)是C++11新增的最强大的特性之一,它对参数进行了高度泛化,它能表示0到任意个数.任意类型的参数 由于可变模 ...
- node.js版本管理（Win） --- nvm-window
目录 1. 安装 2. 使用 1. 安装 去往Git链接:https://github.com/coreybutler/nvm-windows. 点击下载链接: 选择第一个nvm-noinstall. ...
- 1.4-1.5 HBase部署及基本使用
一.部署 1.准备 ##先用Apache hadoop ##之前的cdh 服务器先全部停掉 ##解压HBASE [root@hadoop-senior hbase]# tar zxf hbase-0. ...
- mysql server安装（windows）
1 在 https://dev.mysql.com/downloads/mysql/ 上下载mysql压缩包 2 解压,并把bin目录加入环境变量 3 初始化,完成后会在mysql根目录下生成data ...
- 【Linux学习】Linux文件系统6—文件目录权限设置
Linux文件系统6-文件目录权限设置 1. chmod操作权限设置 chomd是用来改变文件或目录权限的命令,但只有文件的属主和超级权限用户root才有这种权限.通过chmod来改变文件 ...
- java集合框架之ArrayList与LinkedList的区别
参考http://how2j.cn/k/collection/collection-arraylist-vs-linkedlist/690.html#nowhere ArrayList和LinkedL ...
- POJ 3262 Protecting the Flowers 贪心（性价比）
Protecting the Flowers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7812 Accepted: ...
- 区间sum 和为k的连续区间-前缀和
区间sum 描述 有一个长度为n的正整数序列a1--an,candy想知道任意区间[L,R]的和,你能告诉他吗? 输入 第一行一个正整数n(0<n<=1e6),第二行为长度为n的正整数序列 ...
- Tomcat注入到系统服务中，实现服务自启动及常驻
步骤一.打开service.bat 并修改(推荐notepad++): 1.set SERVICE_NAME=Tomcat6(服务名称,可在命令行中通过该名字进行服务的控制(启动/关闭)) 2.se ...
- 51nod - 1363 - 最小公倍数之和 - 数论
https://www.51nod.com/Challenge/Problem.html#!#problemId=1363 求\(\sum\limits_{i=1}^{n}lcm(i,n)\) 先换成 ...