实现Android拖拽按钮接听电话效果

本文介绍如何在Android中创建一个可拖动按钮来接听电话的效果,包括SlideSwitchView的实现,XML布局调用及方法使用,同时加入了动画效果。
摘要由CSDN通过智能技术生成

实现Android拖拽按钮接听电话效果:

  • 向中心拖拽左右两侧的控件,实现对应的功能;
  • 添加动画效果;
    在这里插入图片描述

1、SlideSwitchView.kt

import android.content.Context
import android.graphics.*
import android.os.Handler
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.View
import androidx.core.content.ContextCompat

class SlideSwitchView(
    context: Context?,
    attrs: AttributeSet?,
    defStyleAttr: Int,
    defStyleRes: Int
) : View(context, attrs, defStyleAttr, defStyleRes) {

    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : this(
        context,
        attrs,
        defStyleAttr,
        0
    )

    constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context?) : this(context, null)

    //画中心扩散圆相关
    private val centerCirPaint = Paint()//画中间大圆的画笔
    private val offSetTopAndBottom = 1f / 2//中心圆的边距布局顶部所占总高的比例
    private val centerCirWidthList = ArrayList<Float>()//中心圆的扩散的宽度
    private val centerCirAlphaList = ArrayList<Int>()//中心圆的扩散的透明度
    private val centerSpeed = 0.3f//中心圆的扩散速度
    private var centerSpeedAdd = 0f//中心圆增加的的扩散速度
    private val mDiffuseWidth = 20//扩散圆宽度(扩散圆与原始圆的半径的差值)
    private var offSetTopOrBottom: Float = 0f//中心圆的顶部到控件顶部的距离(底部到控件底部的距离)
    private var centerCirRadius: Float = 0f//中心圆的半径
    private var centerRatio = 1f//中心圆的倍率大小
    private val zoomRatio = 0.3f//中心圆变大时半径最多增加几倍
    private var centerCirColor = R.color.color_D5E7FF//中心圆和扩散圆的颜色
    private var CENTER_CIR_COLOR_ORIGINAL = R.color.color_D5E7FF//中心圆和扩散圆的默认颜色
    private var CENTER_CIR_COLOR_LEFT_START = R.color.color_589EFF
    private var CENTER_CIR_COLOR_RIGHT_START = R.color.color_FCA56B
    private var CENTER_CIR_COLOR_LEFT_END =
        R.color.color_FF8432//左侧小球移动到中心圆圆心时的中心圆和扩散圆的颜色  也做左侧小圆的颜色及左侧点的颜色
    private var CENTER_CIR_COLOR_RIGHT_END =
        R.color.color_1677FF//右侧小球移动到中心圆圆心时的中心圆和扩散圆的颜色 也做右侧小圆的颜色及右侧点的颜色
    private var AUTO_RESTORE = false//左右侧小圆是否自动恢复

    //画左右小圆相关
    private val smallCirPaint = Paint()//画左右两个小圆的画笔
    private var leftCirX = 0f//左边圆的圆心的X坐标
    private var leftCirY = 0f//左边圆的圆心的Y坐标
    private var rightCirX = 0f//右边圆的圆心的X坐标
    private var rightCirY = 0f  //右边圆的圆心的Y坐标
    private val smallCirPaddingBound = 10f//左边圆距左边控件的边距  右边圆距控件右边的边距
    private val smallCirShadowRadius = 10f//小圆的阴影半径
    private var smallCirRadius = 0f//小圆的半径
    private val smallRestoreOffset = 20//小圆恢复到原位置的速度
    var alphaLeft = 255//左边小圆及点的透明度
    var alphaRight = 255//右边小圆及点的透明度
    var actionIsLeft = false//执行操作的是哪一边

    //画点相关
    private val pointPaint = Paint()//画点的画笔
    private val leftPointList = ArrayList<Int>()//左边的点的透明度
    private val rightPointList = ArrayList<Int>()//右边的点的透明度
    private val pointCount = 4//点的个数
    private val pointRadius = context?.dp2px(2)?.toFloat()!!//点的半径

    //绘制文字相关
    var leftText = "备勤"
    var rightText = "上班"
    private val textPaint = Paint()
    val textMarginTop = context?.dp2px(4)!!//文字和图片的间距

    //绘制图片相关
    var leftImg = BitmapFactory.decodeResource(resources, R.drawable.img_change_prepare)
    var rightImg = BitmapFactory.decodeResource(resources, R.drawable.img_change_work)
    val imgHeight = context?.dp2px(26)!!
    val imgWidth = context?.dp2px(26)!!

    private var changedOffset = 10//状态改变的偏移量
    var leftChangedListener: View.OnClickListener? = null//左侧拖拽完成触发事件
    var rightChangedListener: View.OnClickListener? = null//右侧拖拽完成触发事件

    init {
        context?.let {
            //中心扩散圆相关初始化
            centerCirPaint.isAntiAlias = true
            centerCirWidthList.add(0f)
            centerCirAlphaList.add(200)

            //左右小圆的相关初始化
            smallCirPaint.color = ContextCompat.getColor(it, R.color.color_1677FF)
            smallCirPaint.isAntiAlias = true
            smallCirPaint.setShadowLayer(
       
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值