Android自定义View(15) 《手写一个丝滑过渡的开关》

作者: 非典型程序猿 | 来源:发表于2021-09-15 21:10 被阅读0次

概述

今天再写一个之前很想尝试的开关按钮，大概的效果是这样的。

运行效果

custom_switch.gif

开关组成

1. 带圆弧的矩形背景
1. 中间的圆形开关按钮

动画效果

选中时会由白色慢慢变成绿色，然后中间的圆形按钮阴影逐渐向左移，且整个圆形按钮也在不断往右移，切换未选中状态时则相反，那么接下来我们开始coding~

参数定义

    // 初始化画笔
    var paint = Paint()
    // 定义绘制背景的路径
    var path = Path()
    // 定义动画
    private lateinit var animator : ValueAnimator
    init {
        paint.isAntiAlias = true
        setLayerType(LAYER_TYPE_SOFTWARE,null)
    }
    // 控件的宽
    var w = 0f
    // 控件的高
    var h = 0f
    // 圆形按钮的半径
    var radius = 0f
    // 圆形按钮的中心的x坐标
    var centerX = 0f
    // 圆形按钮中心的y坐标
    var centerY = 0f
    // 底层的颜色背景
    var color = Color.rgb(255,255,255)
    // 当前状态的圆形按钮的中心的x坐标
    var currentCenterX = 0f
    // 动画执行时间
    var animatorDuration = 500L
    // 定义的未选中时的阴影偏移量
    var shadowOffSet = 10f
    // 绘制的当前状态的阴影偏移量
    var currentShadow = 10f

绘制背景

我们在这里实现渐变是在底层给了一个白色的背景，然后再绘制一层绿色背景，并不断修改绿色背景的透明度来实现颜色渐变的过程_{这样实现并不是最优解}有尝试过渐变但效果不佳，可能是没有正确运用吧~改天再琢磨琢磨

1.初始化路径
大概流程就是我们从左边第一个直线的左边开始绘制，到了右上的直线末端然后绘制一个半圆，就这样最后绘制到出发点。
这里要注意arcTo函数不要打程addArc函数了~不然画出来结果不对的

    private fun initPath(){
        path.moveTo(radius,centerY-radius)
        path.lineTo(radius*3,centerY-radius)
        var rightRect = RectF()
        rightRect.left = radius*2
        rightRect.top = centerY-radius
        rightRect.right = radius*4
        rightRect.bottom = centerY+radius
        path.arcTo(rightRect,-90f,180f)
        path.lineTo(radius,centerY+radius)
        var leftRect = RectF()
        leftRect.left = 0f
        leftRect.top = centerY-radius
        leftRect.right = radius*2
        leftRect.bottom = centerY+radius
        path.arcTo(leftRect,90f,180f)
    }

2.绘制背景
很简单，绘制path，给两个背景，一个是底层的白色，第二个是会变化透明度的绿色

 private fun drawBg(canvas: Canvas){
        paint.style = Paint.Style.FILL
        paint.setShadowLayer(5f,2f,2f,Color.BLACK)
        paint.color = Color.WHITE
        canvas.drawPath(path,paint)
        paint.color = this.color
        canvas.drawPath(path,paint)
    }

绘制圆形按钮

很简单哦，就是绘制一个带阴影的圆

    private fun drawSwitch(canvas: Canvas){
        paint.shader = null
        paint.color = Color.WHITE
        paint.style = Paint.Style.FILL
        paint.strokeWidth = 5f
        paint.setShadowLayer(10f,currentShadow,shadowOffSet,Color.parseColor("#DDA69E9E"))
        canvas.drawCircle(centerX,centerY,radius/10*9,paint)
    }

初始化动画

动画里主要会发生变化的就是中心点半径，绿色的背景的颜色值变化，以及阴影在x轴上的偏移量的变化。

    private fun initAnimator(){
        animator = ValueAnimator.ofFloat(0f,100f)
        animator.duration = animatorDuration
        animator.interpolator = LinearInterpolator()
        animator.addUpdateListener { valueAnimator ->
            var currentValue = valueAnimator.animatedValue as Float
            Log.d("animator","currentValue $currentValue")
            if (isChecked){
                centerX = (3*radius-currentCenterX)*(currentValue/100f)+currentCenterX
                color = Color.argb((currentValue/100f*255).toInt(),0,255,0)
                currentShadow = (shadowOffSet-20*((currentValue/100f)))
            }else{
                centerX = currentCenterX - (currentCenterX-radius)*(currentValue/100f)
                color = Color.argb((255-currentValue/100f*255).toInt(),0,255,0)
                currentShadow = 20*((currentValue/100f))-shadowOffSet
            }
            postInvalidate()
        }
        animator.addListener(object  : Animator.AnimatorListener{
            override fun onAnimationStart(p0: Animator?) {
                Log.d("animator","onAnimationStart")
            }

            override fun onAnimationEnd(p0: Animator?) {
                currentCenterX = centerX
                Log.d("animator","onAnimationEnd")
            }

            override fun onAnimationCancel(p0: Animator?) {
                Log.d("animator","onAnimationCancel")
            }

            override fun onAnimationRepeat(p0: Animator?) {
                Log.d("animator","onAnimationRepeat")
            }
        })
    }

完整代码

package com.tx.txcustomview.view

import android.animation.Animator
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.util.Log
import android.view.MotionEvent
import android.view.animation.LinearInterpolator


/**
 * create by xu.tian
 * @date 2021/9/14
 */
class CustomSwitch(context: Context?, attrs: AttributeSet?) : androidx.appcompat.widget.AppCompatCheckBox(
    context!!, attrs) {
    // 初始化画笔
    var paint = Paint()
    // 定义绘制背景的路径
    var path = Path()
    // 定义动画
    private lateinit var animator : ValueAnimator
    init {
        paint.isAntiAlias = true
        setLayerType(LAYER_TYPE_SOFTWARE,null)
    }
    // 控件的宽
    var w = 0f
    // 控件的高
    var h = 0f
    // 圆形按钮的半径
    var radius = 0f
    // 圆形按钮的中心的x坐标
    var centerX = 0f
    // 圆形按钮中心的y坐标
    var centerY = 0f
    // 底层的颜色背景
    var color = Color.rgb(255,255,255)
    // 当前状态的圆形按钮的中心的x坐标
    var currentCenterX = 0f
    // 动画执行时间
    var animatorDuration = 500L
    // 定义的未选中时的阴影偏移量
    var shadowOffSet = 10f
    // 绘制的当前状态的阴影偏移量
    var currentShadow = 10f

    override fun onDraw(canvas: Canvas) {
        drawBg(canvas)
        drawSwitch(canvas)
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        this.w = w.toFloat()
        this.h= h.toFloat()
        radius = (w/4).toFloat()
        centerX = radius
        centerY = (h/2).toFloat()
        currentCenterX = centerX
        initPath()
        initAnimator()
    }

    override fun onTouchEvent(event: MotionEvent?): Boolean {
        when (event?.action){
            MotionEvent.ACTION_UP -> {
                isChecked = !isChecked
                startAnim()
            }
        }
        return true
    }
    /**
     * 绘制背景
     */
    private fun drawBg(canvas: Canvas){
        paint.style = Paint.Style.FILL
        paint.setShadowLayer(5f,2f,2f,Color.BLACK)
        paint.color = Color.WHITE
        canvas.drawPath(path,paint)
        paint.color = this.color
        canvas.drawPath(path,paint)
    }
    /**
     * 初始化绘制背景的路径
     */
    private fun initPath(){
        path.moveTo(radius,centerY-radius)
        path.lineTo(radius*3,centerY-radius)
        var rightRect = RectF()
        rightRect.left = radius*2
        rightRect.top = centerY-radius
        rightRect.right = radius*4
        rightRect.bottom = centerY+radius
        path.arcTo(rightRect,-90f,180f)
        path.lineTo(radius,centerY+radius)
        var leftRect = RectF()
        leftRect.left = 0f
        leftRect.top = centerY-radius
        leftRect.right = radius*2
        leftRect.bottom = centerY+radius
        path.arcTo(leftRect,90f,180f)
    }
    /**
     * 绘制中心的圆形按钮
     */
    private fun drawSwitch(canvas: Canvas){
        paint.shader = null
        paint.color = Color.WHITE
        paint.style = Paint.Style.FILL
        paint.strokeWidth = 5f
        paint.setShadowLayer(10f,currentShadow,shadowOffSet,Color.parseColor("#DDA69E9E"))
        canvas.drawCircle(centerX,centerY,radius/10*9,paint)
    }
    /**
     * 初始化动画
     */
    private fun initAnimator(){
        animator = ValueAnimator.ofFloat(0f,100f)
        animator.duration = animatorDuration
        animator.interpolator = LinearInterpolator()
        animator.addUpdateListener { valueAnimator ->
            var currentValue = valueAnimator.animatedValue as Float
            Log.d("animator","currentValue $currentValue")
            if (isChecked){
                centerX = (3*radius-currentCenterX)*(currentValue/100f)+currentCenterX
                color = Color.argb((currentValue/100f*255).toInt(),0,255,0)
                currentShadow = (shadowOffSet-20*((currentValue/100f)))
            }else{
                centerX = currentCenterX - (currentCenterX-radius)*(currentValue/100f)
                color = Color.argb((255-currentValue/100f*255).toInt(),0,255,0)
                currentShadow = 20*((currentValue/100f))-shadowOffSet
            }
            postInvalidate()
        }
        animator.addListener(object  : Animator.AnimatorListener{
            override fun onAnimationStart(p0: Animator?) {
                Log.d("animator","onAnimationStart")
            }

            override fun onAnimationEnd(p0: Animator?) {
                currentCenterX = centerX
                Log.d("animator","onAnimationEnd")
            }

            override fun onAnimationCancel(p0: Animator?) {
                Log.d("animator","onAnimationCancel")
            }

            override fun onAnimationRepeat(p0: Animator?) {
                Log.d("animator","onAnimationRepeat")
            }
        })
    }
    /**
     * 开始执行动画
     */
    private fun startAnim(){
        animator.start()
    }
    /**
     * remove view时取消动画,防止内存泄漏
     */
    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        animator.cancel()
    }
}

总结

今天的开关就写到这里了，整体来说实现这个开关还是比较简单的，下篇再见了~

Android自定义View(15) 《手写一个丝滑过渡的开关》

概述

运行效果

开关组成

动画效果

参数定义

绘制背景

绘制圆形按钮

初始化动画

完整代码

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读