swift实现悬浮球(2024-08)

此文章描述如何在swift语言上,实现悬浮球的功能;

1.封装代码FloatingBallDelegate

2.调用

3.运行测试

一,FloatingBallDelegate封装的悬浮球

bash 复制代码
import UIKit

protocol FloatingBallDelegate: AnyObject {
    func floatingBallTapped()
    func floatingBallDragged(to point: CGPoint)
}

class FloatingBallView: UIView {
    
    weak var delegate: FloatingBallDelegate?
    
    private var circleButton: UIButton!
    private var startPoint: CGPoint = .zero
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        let diameter: CGFloat = 50
        self.frame = CGRect(x: 20, y: 100, width: diameter, height: diameter)
        self.layer.cornerRadius = diameter / 2
        self.backgroundColor = UIColor.blue.withAlphaComponent(0.8)
        
        circleButton = UIButton(type: .custom)
        circleButton.frame = CGRect(x: 0, y: 0, width: diameter, height: diameter)
        circleButton.setTitle("Tap", for: .normal)
        circleButton.setTitleColor(.white, for: .normal)
        circleButton.addTarget(self, action: #selector(circleButtonTapped), for: .touchUpInside)
        self.addSubview(circleButton)
        
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(dragged(_:)))
        self.addGestureRecognizer(panGesture)
    }
    
    @objc private func circleButtonTapped() {
        delegate?.floatingBallTapped()
    }
    
    @objc private func dragged(_ gesture: UIPanGestureRecognizer) {
        let translation = gesture.translation(in: self.superview)
        
        switch gesture.state {
        case .began:
            startPoint = self.center
        case .changed:
            self.center = CGPoint(x: startPoint.x + translation.x, y: startPoint.y + translation.y)
            delegate?.floatingBallDragged(to: self.center)
        default:
            break
        }
    }
}

二,ProductionView主界面控制层

bash 复制代码
class ProductionView: UIView, FloatingBallDelegate {
    
    private var floatingBall: FloatingBallView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupFloatingBall()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupFloatingBall()
    }
    
    private func setupFloatingBall() {
        floatingBall = FloatingBallView()
        floatingBall.delegate = self
        self.addSubview(floatingBall)
    }
    
    func floatingBallTapped() {
        print("Floating ball tapped!")
        // 处理悬浮球点击事件
        delegate?.searchButtonClicked()
    }
    
    func floatingBallDragged(to point: CGPoint) {
        print("Floating ball dragged to \(point)")
        // 处理悬浮球拖拽事件
    }
}

三:测试,完成!

如果要把悬浮球的文本改成图片,以及,悬浮球不超出内容区域(顶部标题,底部导航栏,和左右两边)。可以修改如下代码。

1.修改悬浮球不超出屏幕边界

bash 复制代码
    @objc private func dragged(_ gesture: UIPanGestureRecognizer) {
        guard let superview = self.superview else { return }
        
        let translation = gesture.translation(in: superview)
        var newX = self.center.x + translation.x
        var newY = self.center.y + translation.y
        
        // 边界检查,确保悬浮球不会移动到屏幕外
        let halfWidth = self.bounds.width / 2
        let halfHeight = self.bounds.height / 2
        
        let statusBarHeight = UIApplication.shared.statusBarFrame.height+47
        let bottomPadding: CGFloat = 90
        
        let minY = statusBarHeight + halfHeight
        let maxY = superview.bounds.height - bottomPadding - halfHeight
        
        newX = max(halfWidth, min(superview.bounds.width - halfWidth, newX))
        newY = max(minY, min(maxY, newY))
        
        switch gesture.state {
        case .changed:
            self.center = CGPoint(x: newX, y: newY)
            delegate?.floatingBallDragged(to: self.center)
        default:
            break
        }
        
        gesture.setTranslation(.zero, in: superview)
    }

2.修改图片的大小,悬浮球进入界面的默认位置,右下方

bash 复制代码
 private func setupView() {
        let diameter: CGFloat = 80
        self.frame = CGRect(x:screenWidth-80, y: screenHeight-220, width: diameter, height: diameter)
        self.layer.cornerRadius = diameter / 2
        self.backgroundColor = UIColor(hexString: "#3d9dff", transparency: 1.0)
        
        circleButton = UIButton(type: .custom)
        circleButton.frame = CGRect(x: 0, y: 0, width: diameter, height: diameter)
        
        if let tapImage = UIImage(named: "queryAll") {
            let imageSize = CGSize(width: 39, height: 39)  // Desired image size
            if let resizedImage = tapImage.resized(to: imageSize) {
                circleButton.setImage(resizedImage, for: .normal)
            } else {
                circleButton.setImage(tapImage, for: .normal)  // Fallback to original image
            }
            
            circleButton.imageView?.contentMode = .scaleAspectFit
        }
        
        circleButton.addTarget(self, action: #selector(circleButtonTapped), for: .touchUpInside)
        self.addSubview(circleButton)
        
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(dragged(_:)))
        self.addGestureRecognizer(panGesture)
    }

resized封装到一个公共调用类文件即可

bash 复制代码
extension UIImage {
    func resized(to newSize: CGSize) -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(newSize, false, UIScreen.main.scale)
        defer { UIGraphicsEndImageContext() }
        self.draw(in: CGRect(origin: .zero, size: newSize))
        return UIGraphicsGetImageFromCurrentImageContext()
    }
}

此篇文章阐述到此,欢迎各位阅读,一同进步!让我们下一次更好的更新优质的博客。

相关推荐
数据小爬虫@3 分钟前
如何高效利用Python爬虫按关键字搜索苏宁商品
开发语言·爬虫·python
ZJ_.5 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
Narutolxy10 分钟前
深入探讨 Go 中的高级表单验证与翻译:Gin 与 Validator 的实践之道20241223
开发语言·golang·gin
Hello.Reader18 分钟前
全面解析 Golang Gin 框架
开发语言·golang·gin
禁默28 分钟前
深入浅出:AWT的基本组件及其应用
java·开发语言·界面编程
Code哈哈笑38 分钟前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
程序猿进阶41 分钟前
深入解析 Spring WebFlux:原理与应用
java·开发语言·后端·spring·面试·架构·springboot
qq_4336184443 分钟前
shell 编程(二)
开发语言·bash·shell
charlie1145141911 小时前
C++ STL CookBook
开发语言·c++·stl·c++20
袁袁袁袁满1 小时前
100天精通Python(爬虫篇)——第113天:‌爬虫基础模块之urllib详细教程大全
开发语言·爬虫·python·网络爬虫·爬虫实战·urllib·urllib模块教程