微信的头像拍一拍效果可以说是很吸引人了，就是下面这个gif图，图片展示和实际效果还是有差距的，实际体验效果更佳！
1-3.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.源码地址
7.原文地址
8.参考文章
推荐一下我开源的项目 WanAndroid 客户端
WanAndroidJetpack 架构图
image
- 一个纯 Android 学习项目，WanAndroid 客户端。
- 项目采用
MVVM架构，用Kotlin语音编写。 - Android Jetpack 的大量使用包括但不限于
Lifecycle、LiveData、ViewModel、Databinding、Room、ConstraintLayout等，未来可能会更多。 - 采用
Retrofit和Kotlin-Coroutine协程进行网络交互。 - 加载图片
Glide主流加载图片框架。 - 数据存储主要用到了
Room和腾讯的MMKV。
Kotlin + MVVM + Jetpack + Retrofit + Glide 的综合运用，是学习 MMVM 架构的不错的项目。
此项目本身也是一个专门学习 Android 相关知识的 APP，欢迎下载体验！
源码地址（附带下载链接）
APP 整体概览
wan-gif.gif
喜欢的点个 Stars，有问题的请提 Issues。
