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仿微信相机单击拍照长按录视频按钮,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
javascript实现前端input密码输入强度验证
Jun 24 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
使用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
You might like
php正则
2006/07/07 PHP
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
xtree.js 代码
2007/03/13 Javascript
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python字符串中的单双引
2017/02/16 Python
python async with和async for的使用
2019/06/20 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
快递业务员岗位职责
2014/01/06 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
法制演讲稿
2014/09/10 职场文书
收款授权委托书
2014/10/02 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
用Python实现屏幕截图详解
2022/01/22 Python