Android 自定义View系列文章

Android 自定义View练手Demo（一）实现圆角遮罩效果
Android 自定义View练手Demo（二）实现圆形头像效果
Android 自定义View练手Demo（三）实现微信拍一拍的动画效果

Android自定义View实现微信拍一拍的动画效果

微信的头像拍一拍效果可以说是很吸引人了，就是下面这个gif图，图片展示和实际效果还是有差距的，实际体验效果更佳！

那么我们如何通过自定义View，来实现微信的这种效果呢？

首先我们得把图片做的像一个用户的头像，这里我就用热巴的头像吧！

1.自定义View实现圆角矩形的头像

因为这样才更像微信的头像啊，原生的ImageView是没有圆角的，所以实现一个圆角的ImageView

class ShakeImageView @JvmOverloads constructor(        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatImageView(context, attrs, defStyleAttr) {         //圆角矩形的Path    private val path = Path()    private val paint = Paint().apply {             //开启抗锯齿        isAntiAlias = true    }    override fun onDraw(canvas: Canvas) {             //开启离屏缓冲        val count = canvas.saveLayer(0f, 0f, width.toFloat(), height.toFloat(), paint)        //path添加一个圆角矩形        path.addRoundRect(0f, 0f, width.toFloat(), height.toFloat(), imageCorner, imageCorner, Path.Direction.CW)        //Canvas裁切成一个圆角矩形        canvas.clipPath(path)        //调用AppCompatImageView的onDraw方法        super.onDraw(canvas)        //恢复离屏缓冲        canvas.restoreToCount(count)    }}

继续AppCompatImageView重写onDraw方法
开启离屏缓冲，来拿出一块离屏缓冲来绘制
给Path添加一个View大小的圆角矩形
Canvas裁切成一个圆角矩形
调用AppCompatImageView的onDraw方法，在裁剪后的Canvas上绘制图片
恢复离屏缓冲

通过以上的几个步骤就能实现一个圆角矩形的头像，注意要开启缓冲

2.让ShakeImageView能响应双击事件

为了实现双击拍一拍的动画，首先得让自定义的View响应双击事件

class ShakeImageView @JvmOverloads constructor(        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatImageView(context, attrs, defStyleAttr) {         //初始化GestureDetector    private val gestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {             //必须返回true 不然不能接管事件        override fun onDown(e: MotionEvent?) = true        //当双击的时候回调        override fun onDoubleTap(e: MotionEvent?): Boolean {                 //处理动画            return true        }    })    override fun onTouchEvent(event: MotionEvent?): Boolean {             //用gestureDetector来接管触摸事件        return gestureDetector.onTouchEvent(event)    }}

生命一个gestureDetector的实例，并且在onDown方法中返回true，代表接管事件
在onTouchEvent，用gestureDetector来接管触摸事件
GestureDetector相当于一个检测器，而各种事件的响应会回调到SimpleOnGestureListener方法中
SimpleOnGestureListener是一个实现了 OnGestureListener和OnDoubleTapListener的接口，用它更便捷

当双击的时候回调已经处理好了，接下来就要设置动画了。

3.给ShakeImageView设置动画

class ShakeImageView @JvmOverloads constructor(        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatImageView(context, attrs, defStyleAttr) {        //图片动画执行的偏移距离    private var offset = 3f    //动画执行的时间    private var duration = 500      //初始化动画    private val animator by lazy {             ObjectAnimator.ofFloat(this, "rotation", offset, 0f, -offset, 0f, offset, 0f, -offset, 0f, offset, 0f)    }.apply {             this.value.duration = duration.toLong()    }    //初始化GestureDetector    private val gestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {             //必须返回true 不然不能接管事件        override fun onDown(e: MotionEvent?) = true        //当双击的时候回调        override fun onDoubleTap(e: MotionEvent?): Boolean {                 shake()            return true        }    })    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {             super.onSizeChanged(w, h, oldw, oldh)        //轴心为宽的一半,高的底部        pivotX = width / 2f        pivotY = height.toFloat()    }    //执行拍一拍的动画    fun shake() {             animator.start()    }}

通过Kotlin by lazy 初始化 animator动画对象，并设置旋转的距离和时间，注意X轴Y轴都要旋转
onSizeChanged方法中设置旋转的轴心（width/2,height）轴心为宽的一半,高的底部
onDoubleTap 双击回调中，调用shake()方法执行动画

这个效果通过这三个步骤就做出来了，如果你想做的更通用一点可以通过给自定义View配置属性的方式，来让你的自定义View更灵活。

4.设置自定义View的自定义属性

比如可以在如下几个方面来设置

是否开启拍一拍效果
图片的圆角大小
图片动画执行的偏移距离
动画执行的时间

4.1.在value文件夹下创建一个attr.xml文件

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="ShakeImageView">        <attr name="openShake" format="boolean" />        <attr name="imageCorner" format="dimension" />        <attr name="offset" format="float" />        <attr name="animDuration" format="integer" />    declare-styleable>resources>

4.2.在代码中获取在xml配置的属性

class ShakeImageView @JvmOverloads constructor(        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatImageView(context, attrs, defStyleAttr) {         //开启拍一拍效果    private var openShake = true    //图片的圆角大小    private var imageCorner = 10.dp    //图片动画执行的偏移距离    private var offset = 3f    //动画执行的时间    private var duration = 500    init {             //获取xml中定义的值        val ta = context.obtainStyledAttributes(attrs, R.styleable.ShakeImageView)        openShake = ta.getBoolean(R.styleable.ShakeImageView_openShake, true)        imageCorner = ta.getDimension(R.styleable.ShakeImageView_imageCorner, 10.dp)        offset = ta.getFloat(R.styleable.ShakeImageView_offset, 3.5f)        duration = ta.getInt(R.styleable.ShakeImageView_animDuration, 350)        ta.recycle()    }}

通过TypeArray来获取对应的属性
回收TypeArray

通过在init代码块中获取这些属性，如果没声明则给一个默认值，赋值给成员变量，在接下来的时候使用

4.3.使用在xml中获取的属性值

class ShakeImageView @JvmOverloads constructor(        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : AppCompatImageView(context, attrs, defStyleAttr) {         //开启拍一拍效果    private var openShake = true    //图片的圆角大小    private var imageCorner = 10.dp    //图片动画执行的偏移距离    private var offset = 3f    //动画执行的时间    private var duration = 500    //初始化动画    private val animator by lazy {             ObjectAnimator.ofFloat(this, "rotation", offset, 0f, -offset, 0f, offset, 0f, -offset, 0f, offset, 0f)    }.apply {             this.value.duration = duration.toLong()    }    override fun onDraw(canvas: Canvas) {             //开启离屏缓冲        val count = canvas.saveLayer(0f, 0f, width.toFloat(), height.toFloat(), paint)        //path添加一个圆角矩形        path.addRoundRect(0f, 0f, width.toFloat(), height.toFloat(), imageCorner, imageCorner, Path.Direction.CW)        //Canvas裁切成一个圆角矩形        canvas.clipPath(path)        //调用AppCompatImageView的onDraw方法        super.onDraw(canvas)        //恢复离屏缓冲        canvas.restoreToCount(count)    }    override fun onTouchEvent(event: MotionEvent?): Boolean {             //开启拍一拍,则用gestureDetector来接管触摸事件 否则欧系统默认的触摸流程        return if (openShake) gestureDetector.onTouchEvent(event) else super.onTouchEvent(event)    }}

openShake：开启拍一拍,则用gestureDetector来接管触摸事件否则走系统默认的触摸流程
imageCorner：在path.addRoundRect()中进行配置
offset和duration在动画初始化中使用，注意animator的初始化一定要写在init代码块下面,不然你取到的不是最新的值

4.4.在xml中配置属性

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".customviewcollection.MainActivity">    <com.jhb.customviewcollection.shakeimageview.ShakeImageView        android:id="@+id/siv"        android:layout_width="80dp"        android:layout_height="80dp"        android:src="@drawable/dlrb"        android:scaleType="centerCrop"        app:imageCorner="10dp"        app:openShake="true"        app:animDuration="500"        app:offset="3.5"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintLeft_toLeftOf="parent"        app:layout_constraintRight_toRightOf="parent"        app:layout_constraintTop_toTopOf="parent" />androidx.constraintlayout.widget.ConstraintLayout>

好了，这就是自定义属性的使用方式，很简单吧！

5.总结

本文通过自定义View，先实现了，圆角矩形头像，然后增加了双击的监听，接着通过动画，一步一步实现了微信拍一拍的效果，最后还实现了自定义配置属性。

这是一个非常好的练手Demo了

6.源码地址

ShakeImageView.kt

7.原文地址

Android自定义View实现微信拍一拍的动画效果

8.参考文章

hencoder

Android(安卓)自定义View练手Demo（三）实现微信拍一拍的动画效果

Android 自定义View系列文章

Android自定义View实现微信拍一拍的动画效果

1.自定义View实现圆角矩形的头像

2.让ShakeImageView能响应双击事件

3.给ShakeImageView设置动画

4.设置自定义View的自定义属性

4.1.在value文件夹下创建一个attr.xml文件

4.2.在代码中获取在xml配置的属性

4.3.使用在xml中获取的属性值

4.4.在xml中配置属性

5.总结

6.源码地址

7.原文地址

8.参考文章

更多相关文章

随机推荐