Android自定義View(15) 《手寫一個(gè)絲滑過渡的開關(guān)》

概述

今天再寫一個(gè)之前很想嘗試的開關(guān)按鈕，大概的效果是這樣的。

運(yùn)行效果

custom_switch.gif

開關(guān)組成

    1. 帶圓弧的矩形背景
    1. 中間的圓形開關(guān)按鈕

動(dòng)畫效果

選中時(shí)會(huì)由白色慢慢變成綠色，然后中間的圓形按鈕陰影逐漸向左移，且整個(gè)圓形按鈕也在不斷往右移，切換未選中狀態(tài)時(shí)則相反，那么接下來我們開始coding~

參數(shù)定義

    // 初始化畫筆
    var paint = Paint()
    // 定義繪制背景的路徑
    var path = Path()
    // 定義動(dòng)畫
    private lateinit var animator : ValueAnimator
    init {
        paint.isAntiAlias = true
        setLayerType(LAYER_TYPE_SOFTWARE,null)
    }
    // 控件的寬
    var w = 0f
    // 控件的高
    var h = 0f
    // 圓形按鈕的半徑
    var radius = 0f
    // 圓形按鈕的中心的x坐標(biāo)
    var centerX = 0f
    // 圓形按鈕中心的y坐標(biāo)
    var centerY = 0f
    // 底層的顏色背景
    var color = Color.rgb(255,255,255)
    // 當(dāng)前狀態(tài)的圓形按鈕的中心的x坐標(biāo)
    var currentCenterX = 0f
    // 動(dòng)畫執(zhí)行時(shí)間
    var animatorDuration = 500L
    // 定義的未選中時(shí)的陰影偏移量
    var shadowOffSet = 10f
    // 繪制的當(dāng)前狀態(tài)的陰影偏移量
    var currentShadow = 10f

繪制背景

我們?cè)谶@里實(shí)現(xiàn)漸變是在底層給了一個(gè)白色的背景，然后再繪制一層綠色背景，并不斷修改綠色背景的透明度來實(shí)現(xiàn)顏色漸變的過程這樣實(shí)現(xiàn)并不是最優(yōu)解有嘗試過漸變但效果不佳，可能是沒有正確運(yùn)用吧~改天再琢磨琢磨

  • 1.初始化路徑
    大概流程就是我們從左邊第一個(gè)直線的左邊開始繪制，到了右上的直線末端然后繪制一個(gè)半圓，就這樣最后繪制到出發(fā)點(diǎn)。
    這里要注意arcTo函數(shù)不要打程addArc函數(shù)了~不然畫出來結(jié)果不對(duì)的
    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，給兩個(gè)背景，一個(gè)是底層的白色，第二個(gè)是會(huì)變化透明度的綠色
 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)
    }

繪制圓形按鈕

很簡單哦，就是繪制一個(gè)帶陰影的圓

    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)
    }

初始化動(dòng)畫

動(dòng)畫里主要會(huì)發(fā)生變化的就是中心點(diǎn)半徑，綠色的背景的顏色值變化，以及陰影在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()
    // 定義動(dòng)畫
    private lateinit var animator : ValueAnimator
    init {
        paint.isAntiAlias = true
        setLayerType(LAYER_TYPE_SOFTWARE,null)
    }
    // 控件的寬
    var w = 0f
    // 控件的高
    var h = 0f
    // 圓形按鈕的半徑
    var radius = 0f
    // 圓形按鈕的中心的x坐標(biāo)
    var centerX = 0f
    // 圓形按鈕中心的y坐標(biāo)
    var centerY = 0f
    // 底層的顏色背景
    var color = Color.rgb(255,255,255)
    // 當(dāng)前狀態(tài)的圓形按鈕的中心的x坐標(biāo)
    var currentCenterX = 0f
    // 動(dòng)畫執(zhí)行時(shí)間
    var animatorDuration = 500L
    // 定義的未選中時(shí)的陰影偏移量
    var shadowOffSet = 10f
    // 繪制的當(dāng)前狀態(tài)的陰影偏移量
    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)
    }
    /**
     * 初始化動(dòng)畫
     */
    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")
            }
        })
    }
    /**
     * 開始執(zhí)行動(dòng)畫
     */
    private fun startAnim(){
        animator.start()
    }
    /**
     * remove view時(shí)取消動(dòng)畫,防止內(nèi)存泄漏
     */
    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        animator.cancel()
    }
}

總結(jié)

今天的開關(guān)就寫到這里了，整體來說實(shí)現(xiàn)這個(gè)開關(guān)還是比較簡單的，下篇再見了~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容