美文网首页
iOS 吸附悬浮按钮实现

iOS 吸附悬浮按钮实现

作者: Mr_Wendao | 来源:发表于2022-05-25 20:27 被阅读0次

    实现按钮吸附在屏幕左右两侧效果

    效果图

    代码

    import UIKit
    
    class HoverView: UIView {
        /// 屏幕宽度
        private var screenW: CGFloat = UIScreen.main.bounds.size.width
        /// 屏幕高度
        private var screenH: CGFloat = UIScreen.main.bounds.size.height
        /// 悬浮view 大小
        private let size: CGSize = CGSize(width: 100, height: 100)
        /// 顶部最小 margin
        private let topMinMargin: CGFloat = 88
        /// 底部最小 margin
        private let bottomMinMargin: CGFloat = 88
        /// 左边最小 margin
        private let leftMinMargin: CGFloat = 20
        /// 右边最小 magin
        private let rightMinMargin: CGFloat = 20
        /// 拖动开始时 位置
        private var beginPoint: CGPoint = .zero
        
        /// 点击开始
        override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
            super.touchesBegan(touches, with: event)
            guard let touch = touches.first else {return}
            
            let curPoint = touch.location(in: self)
            let prePoint = touch.previousLocation(in: self)
            
            let offsetX = curPoint.x - prePoint.x
            let offsetY = curPoint.y - prePoint.y
            
            let centerX = offsetX + self.center.x
            let centerY = offsetY + self.center.y
            /// 记录开始位置
            beginPoint = CGPoint(x: centerX, y: centerY)
            
        }
        /// 拖动
        override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
            super.touchesMoved(touches, with: event)
            guard let touch = touches.first else {return}
            
            let curPoint = touch.location(in: self)
            let prePoint = touch.previousLocation(in: self)
            
            let offsetX = curPoint.x - prePoint.x
            let offsetY = curPoint.y - prePoint.y
            
            let centerX = offsetX + self.center.x
            let centerY = offsetY + self.center.y
            /// 拖动
            self.center = CGPoint(x: centerX, y: centerY)
        
        }
        /// 点击结束
        override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
            super.touchesEnded(touches, with: event)
            guard let touch = touches.first else {return}
            let curPoint = touch.location(in: self)
            let prePoint = touch.previousLocation(in: self)
            
            let offsetX = curPoint.x - prePoint.x
            let offsetY = curPoint.y - prePoint.y
            
            let centerX = offsetX + self.center.x
            let centerY = offsetY + self.center.y
            
            let endPoint = CGPoint(x: centerX, y: centerY)
            /// 区分点击和拖动
            if endPoint == beginPoint { /// 点击
                // TODO: 处理点击事件
            } else { /// 拖动
                correctLocation()
            }
        }
        /// 修正位置 动画吸附在屏幕两侧
        func correctLocation() {
        
            var endCenter = center
            endCenter.x = center.x > screenW * 0.5 ? screenW-(rightMinMargin + size.width * 0.5) : (leftMinMargin + size.width * 0.5)
        
            if center.y < (topMinMargin + size.height * 0.5) {
                endCenter.y = (topMinMargin + size.height * 0.5)
            } else if center.y > screenH - (bottomMinMargin + size.height * 0.5) {
                endCenter.y = screenH - (bottomMinMargin + size.height * 0.5)
            }
            UIView.animate(withDuration: 0.25) {
                self.center = endCenter
            }
            
        }
        func setSubView() {
            self.backgroundColor = .red
        }
        
        init() {
            
            super.init(frame: CGRect(x: 0, y: 0, width: size.width, height: size.height))
            setSubView()
        }
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }
    

    相关文章

      网友评论

          本文标题:iOS 吸附悬浮按钮实现

          本文链接:https://www.haomeiwen.com/subject/ywcyprtx.html