自定义view——仿微信相机单击拍照长按录视频按钮
2017-08-10 23:56
561 查看
仿微信相机的拍照按钮,单击拍照,长按录视频。先上效果图。
项目地址:https://github.com/c786909486/PhotoButton2/tree/v1.0
然后通过手势识别判断单击、长按、长按抬起。
自定义接口对各个状态进行监听
最后,给外圆弧添加动画
最后,在activity中给控件设置监听即可。
下面贴上完整的代码
TakePhotoButton:
项目地址:https://github.com/c786909486/PhotoButton2/tree/v1.0
项目地址:https://github.com/c786909486/PhotoButton2/tree/v1.0
添加依赖
allprojects { repositories { ... maven { url 'https://jitpack.io' } } }
dependencies { compile compile 'com.github.c786909486:PhotoButton2:v1.1' }
长按效果分析
判断是否为长按,如果是,则扩大外圆,缩小内圆。由于要扩大外圆,所以在绘制常态的外圆时不可将圆的直径设置为view的宽度或高度。outRoundPaint.setAntiAlias(true); outRoundPaint.setColor(outCircleColor); if (isLongClick){ canvas.scale(1.2f,1.2f,width/2,height/2); } canvas.drawCircle(width/2,height/2, outRaduis, outRoundPaint);
if (isLongClick){ canvas.drawCircle(width/2,height/2, innerRaduis /2.0f, innerRoundPaint); //画外原环 mCPaint.setAntiAlias(true); mCPaint.setColor(progressColor); mCPaint.setStyle(Paint.Style.STROKE); mCPaint.setStrokeWidth(circleWidth/2); RectF rectF = new RectF(0+circleWidth,0+circleWidth,width-circleWidth,height-circleWidth); canvas.drawArc(rectF,startAngle,mSweepAngle,false,mCPaint); }else { canvas.drawCircle(width/2,height/2, innerRaduis, innerRoundPaint); }
然后通过手势识别判断单击、长按、长按抬起。
mDetector = new GestureDetectorCompat(context, new GestureDetector.SimpleOnGestureListener() { @Override public boolean onSingleTapConfirmed(MotionEvent e) { //单击 isLongClick = false; if (listener != null) { listener.onClick(TakePhotoButton.this); } return super.onSingleTapConfirmed(e); } @Override public void onLongPress(MotionEvent e) { //长按 isLongClick = true; postInvalidate(); if (listener != null) { listener.onLongClick(TakePhotoButton.this); } } }); mDetector.setIsLongpressEnabled(true);
@Override public boolean onTouchEvent(MotionEvent event) { mDetector.onTouchEvent(event); switch(MotionEventCompat.getActionMasked(event)) { case MotionEvent.ACTION_DOWN: isLongClick = false; break; case MotionEvent.ACTION_UP: case MotionEvent.ACTION_CANCEL: if (isLongClick) { isLongClick = false; postInvalidate(); if (this.listener != null) { this.listener.onLongClickUp(this); } } break; } return true; }
自定义接口对各个状态进行监听
public interface OnProgressTouchListener { /** * 单击 * @param photoButton */ void onClick(TakePhotoButton photoButton); /** * 长按 * @param photoButton */ void onLongClick(TakePhotoButton photoButton); /** * 长按抬起 * @param photoButton */ void onLongClickUp(TakePhotoButton photoButton); void onFinish(); }
最后,给外圆弧添加动画
public void start() { ValueAnimator animator = ValueAnimator.ofFloat(mmSweepAngleStart, mmSweepAngleEnd); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mSweepAngle = (float) valueAnimator.getAnimatedValue(); //获取到需要绘制的角度,重新绘制 invalidate(); } }); //这里是时间获取和赋值 ValueAnimator animator1 = ValueAnimator.ofInt(mLoadingTime, 0); animator1.setInterpolator(new LinearInterpolator()); animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { int time = (int) valueAnimator.getAnimatedValue(); } }); AnimatorSet set = new AnimatorSet(); set.playTogether(animator, animator1); set.setDuration(mLoadingTime * 1000); set.setInterpolator(new LinearInterpolator()); set.start(); set.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); clearAnimation(); isLongClick = false; postInvalidate(); if (listener != null) { listener.onFinish(); } } }); }
最后,在activity中给控件设置监听即可。
buttontake.setOnProgressTouchListener(new TakePhotoButton.OnProgressTouchListener() { @Override public void onClick(TakePhotoButton photoButton) { Toast.makeText(MainActivity.this,"单机",Toast.LENGTH_SHORT).show(); } @Override public void onLongClick(TakePhotoButton photoButton) { Toast.makeText(MainActivity.this,"长按",Toast.LENGTH_SHORT).show(); buttontake.start(); } @Override public void onLongClickUp(TakePhotoButton photoButton) { onFinish(); } @Override public void onFinish() { Toast.makeText(MainActivity.this,"录制结束",Toast.LENGTH_SHORT).show(); } }); button.s
下面贴上完整的代码
TakePhotoButton:
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
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.support.annotation.Nullable;
import android.support.v4.view.GestureDetectorCompat;
import android.support.v4.view.MotionEventCompat;
import android.util.AttributeSet;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.LinearInterpolator;
/**
* Created by CKZ on 2017/8/9.
*/
public class TakePhotoButton extends View {
private float circleWidth;//外圆环宽度
private int outCircleColor;//外圆颜色
private int innerCircleColor;//内圆颜色
private int progressColor;//进度条颜色
private Paint outRoundPaint = new Paint(); //外圆画笔
private Paint mCPaint = new Paint();//进度画笔
private Paint innerRoundPaint = new Paint();
private float width; //自定义view的宽度
private float height; //自定义view的高度
private float outRaduis; //外圆半径
private float innerRaduis;//内圆半径
private GestureDetectorCompat mDetector;//手势识别
private boolean isLongClick;//是否长按
private float startAngle = -90;//开始角度
private float mmSweepAngleStart = 0f;//起点
private float mmSweepAngleEnd = 360f;//终点
private float mSweepAngle;//扫过的角度
private int mLoadingTime;
public TakePhotoButton(Context context) {
this(context,null);
}
public TakePhotoButton(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public TakePhotoButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context,attrs);
}
private void init(Context context,AttributeSet attrs){
TypedArray array = context.obtainStyledAttributes(attrs,R.styleable.TakePhotoButton);
outCircleColor = array.getColor(R.styleable.TakePhotoButton_outCircleColor,Color.parseColor("#E0E0E0"));
innerCircleColor = array.getColor(R.styleable.TakePhotoButton_innerCircleColor,Color.WHITE);
progressColor = array.getColor(R.styleable.TakePhotoButton_readColor,Color.GREEN);
mLoadingTime = array.getInteger(R.styleable.TakePhotoButton_maxSeconds,10);
mDetector = new GestureDetectorCompat(context, new GestureDetector.SimpleOnGestureListener() { @Override public boolean onSingleTapConfirmed(MotionEvent e) { //单击 isLongClick = false; if (listener != null) { listener.onClick(TakePhotoButton.this); } return super.onSingleTapConfirmed(e); } @Override public void onLongPress(MotionEvent e) { //长按 isLongClick = true; postInvalidate(); if (listener != null) { listener.onLongClick(TakePhotoButton.this); } } }); mDetector.setIsLongpressEnabled(true);
}
private void resetParams() {
width = getWidth();
height = getHeight();
circleWidth = width*0.13f;
outRaduis = (float) (Math.min(width, height)/2.4);
innerRaduis = outRaduis -circleWidth;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if (width > height) {
setMeasuredDimension(height, height);
} else {
setMeasuredDimension(width, width);
}
}
@Override
protected void onDraw(Canvas canvas) {
resetParams();
//画外圆
outRoundPaint.setAntiAlias(true);
outRoundPaint.setColor(outCircleColor);
if (isLongClick){
canvas.scale(1.2f,1.2f,width/2,height/2);
}
canvas.drawCircle(width/2,height/2, outRaduis, outRoundPaint);
//画内圆
innerRoundPaint.setAntiAlias(true);
innerRoundPaint.setColor(innerCircleColor);
if (isLongClick){ canvas.drawCircle(width/2,height/2, innerRaduis /2.0f, innerRoundPaint); //画外原环 mCPaint.setAntiAlias(true); mCPaint.setColor(progressColor); mCPaint.setStyle(Paint.Style.STROKE); mCPaint.setStrokeWidth(circleWidth/2); RectF rectF = new RectF(0+circleWidth,0+circleWidth,width-circleWidth,height-circleWidth); canvas.drawArc(rectF,startAngle,mSweepAngle,false,mCPaint); }else { canvas.drawCircle(width/2,height/2, innerRaduis, innerRoundPaint); }
}
public void start() { ValueAnimator animator = ValueAnimator.ofFloat(mmSweepAngleStart, mmSweepAngleEnd); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mSweepAngle = (float) valueAnimator.getAnimatedValue(); //获取到需要绘制的角度,重新绘制 invalidate(); } }); //这里是时间获取和赋值 ValueAnimator animator1 = ValueAnimator.ofInt(mLoadingTime, 0); animator1.setInterpolator(new LinearInterpolator()); animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { int time = (int) valueAnimator.getAnimatedValue(); } }); AnimatorSet set = new AnimatorSet(); set.playTogether(animator, animator1); set.setDuration(mLoadingTime * 1000); set.setInterpolator(new LinearInterpolator()); set.start(); set.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); clearAnimation(); isLongClick = false; postInvalidate(); if (listener != null) { listener.onFinish(); } } }); }
@Override
public boolean onTouchEvent(MotionEvent event) {
mDetector.onTouchEvent(event);
switch(MotionEventCompat.getActionMasked(event)) {
case MotionEvent.ACTION_DOWN:
isLongClick = false;
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
if (isLongClick) {
isLongClick = false;
postInvalidate();
if (this.listener != null) {
this.listener.onLongClickUp(this);
}
}
break;
}
return true;
}
private OnProgressTouchListener listener;
public void setOnProgressTouchListener(OnProgressTouchListener listener) {
this.listener = listener;
}
/**
* 进度触摸监听
*/
public interface OnProgressTouchListener { /** * 单击 * @param photoButton */ void onClick(TakePhotoButton photoButton); /** * 长按 * @param photoButton */ void onLongClick(TakePhotoButton photoButton); /** * 长按抬起 * @param photoButton */ void onLongClickUp(TakePhotoButton photoButton); void onFinish(); }
}
项目地址:https://github.com/c786909486/PhotoButton2/tree/v1.0
相关文章推荐
- Android 自定义View---仿微信视频录制按钮 长按录制 点击拍照
- Android 自定义View,仿微信视频播放按钮
- iOS开发-自定义相机(仿微信)拍照、视频录制
- 自定义View,仿微信视频播放按钮
- Android自定义view之仿微信录制视频按钮
- 4000 iOS开发自定义相机(拍照,录制视频)
- 微信小程序-从相册获取图片,视频 使用相机拍照,录像上传+服务器(nodejs版)接收
- 【Android 开发】SufaceView自定义相机拍照
- android仿微信录制短视频,拍照,自动聚焦,手动聚焦,滑动缩放功能(Camera+TextureView+rxjava实现)
- IOS】自定义UIAlertView样式,实现可替换背景和按钮 此博文包含图片此博文包含视频 (2012-10-24 10:23:25)
- iOS自定义相机界面,实现微信小视频UI效果
- 自定义View学习之12/3(仿Twitter拍照按钮)
- iOS 自定义相机, UIImagePickerController && AVCaptureSession (附微信小视频模仿demo)
- 仿微信视频下载进度自定义View
- [置顶] Android仿最新微信自定义相机(长按拍摄,轻点拍照)
- iOS之悬浮视图:按钮/图片/轮播图/gif图/视频/音频/自定义view
- JCameraView 仿微信拍照Android控件(点击拍照,长按录小视频)
- 自定义微信小程序视频组件播放按钮
- iOS仿微信相机拍照、视频录制功能
- Android仿最新微信自定义相机(长按拍摄,轻点拍照)