Android 自定义View练手Demo（三）Android自

作者: AboBack | 来源:发表于2020-11-27 11:33 被阅读0次

微信的头像拍一拍效果可以说是很吸引人了，就是下面这个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了

Android 自定义View练手Demo（三）Android自

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.参考文章

推荐一下我开源的项目 WanAndroid 客户端

WanAndroidJetpack 架构图

源码地址（附带下载链接）

APP 整体概览

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android 自定义view

UI