首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Android 自定义view仿微信相机单击拍照长按录视频按钮

Posted in Javascript onJuly 19, 2019

Android仿微信相机的拍照按钮单击拍照，长按录视频。先上效果图。

Android 自定义view仿微信相机单击拍照长按录视频按钮
Android 自定义view仿微信相机单击拍照长按录视频按钮

项目地址：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仿微信相机单击拍照长按录视频按钮

- Author -

Java魑魅魍魉

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 面向对象编程（2） 定义类
May 18 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
JS实现li标签的删除
Apr 12 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 #Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 #Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 #Javascript
Vue配置marked链接添加target="_blank"的方法
Jul 19 #Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 #Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 #Javascript
bootstrap Table实现合并相同行
Jul 19 #Javascript
天问一号(1) 国际空间站(1) 对撞机(1) 太空(1) 夸克(1) 人造肉(1) 酶(1) 塑料(1) NASA(1) 粒子对撞机(1)
You might like
让PHP支持页面回退的两种方法
2008/01/10 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
为什么JS中eval处理JSON数据要加括号
2015/04/13 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
SVG描边动画
2017/02/23 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python正规则表达式学习指南
2016/08/02 Python
深入理解Django中内置的用户认证
2017/10/06 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python实现图片素描效果
2020/09/26 Python
体育专业学生自我评价范文
2014/01/17 职场文书
产品设计开发计划书
2014/05/07 职场文书
绿色环保口号
2014/06/12 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2016新年致辞
2015/08/01 职场文书
2019最新激励员工口号大全！
2019/06/28 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
web前端之css水平居中代码解析
2021/05/20 HTML / CSS