优雅地封装 iOS 浮层视图，享受丝滑体验

IOS

2024-02-11 10:06:58

在 iOS 开发中，浮层视图随处可见，它们常常承担着引导、展示或与用户交互的重任。同时，用户点击空白区域即可移除这些视图，方便快捷。

浮层视图的实现看似简单，但实际开发中，开发者们却采用了五花八门的实现方式，甚至有人在 VC 的 touchesBegan:withEvent: 方法中添加移除逻辑，这种做法显然不够优雅。

因此，本文将深入探讨浮层视图的封装，为开发者提供一种更加优雅、高效的实现方案。

认识浮层视图

浮层视图本质上是一种半透明的视图，覆盖在当前视图之上。它通常用于展示提示信息、加载指示器或与用户交互。

实现浮层视图有两种常见方式：

使用 UIAlertController： 这是一种系统提供的浮层视图，简单易用，但可定制性有限。
自定义视图： 通过创建一个自定义视图并将其添加到当前视图之上，可以实现更灵活、可定制的浮层视图。

优雅封装浮层视图

为了优雅地封装浮层视图，我们需要考虑以下几个关键因素：

可重用性： 封装后的浮层视图应该能够轻松地用于不同的场景和需求。
可定制性： 开发者应该能够轻松地定制浮层视图的外观和行为。
易用性： 封装后的浮层视图应该提供一个简单易用的 API，让开发者可以快速上手。

基于这些原则，我们设计了以下封装方案：

class OverlayView: UIView {

    // MARK: - Properties

    private var backgroundView: UIView!
    private var contentView: UIView!

    // MARK: - Initialization

    init(contentView: UIView) {
        super.init(frame: .zero)

        self.contentView = contentView

        setupBackgroundView()
        setupContentView()
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    // MARK: - Setup

    private func setupBackgroundView() {
        backgroundView = UIView()
        backgroundView.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        backgroundView.isUserInteractionEnabled = true
        addSubview(backgroundView)
        backgroundView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            backgroundView.topAnchor.constraint(equalTo: topAnchor),
            backgroundView.bottomAnchor.constraint(equalTo: bottomAnchor),
            backgroundView.leadingAnchor.constraint(equalTo: leadingAnchor),
            backgroundView.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    private func setupContentView() {
        contentView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(contentView)
        NSLayoutConstraint.activate([
            contentView.centerXAnchor.constraint(equalTo: centerXAnchor),
            contentView.centerYAnchor.constraint(equalTo: centerYAnchor)
        ])
    }

    // MARK: - Public Methods

    func show() {
        UIApplication.shared.keyWindow?.addSubview(self)
        alpha = 0
        UIView.animate(withDuration: 0.3) {
            self.alpha = 1
        }
    }

    func hide(completion: (() -> Void)? = nil) {
        UIView.animate(withDuration: 0.3) {
            self.alpha = 0
        } completion: { _ in
            self.removeFromSuperview()
            completion?()
        }
    }
}

使用封装后的浮层视图

使用封装后的浮层视图非常简单：

// 创建自定义内容视图
let contentView = UIView()
// ... 自定义 contentView 的外观和行为

// 创建浮层视图
let overlayView = OverlayView(contentView: contentView)

// 显示浮层视图
overlayView.show()

// 隐藏浮层视图
overlayView.hide()