iOS 镂空 页面引导

直接上代码

import Foundation
import SnapKit
import UIKit

// MARK: - GuideContainerView

/// 镂空位置
struct GuideLocation {
    struct Rect {
        /// 镂空尺寸
        var frame: CGRect

        /// 镂空区域圆角半径
        var cornerRadius: CGFloat = 0

        /// 镂空区域水平间距
        var dx: CGFloat = -1

        /// 镂空区域垂直间距
        var dy: CGFloat = -1

        var bPath: UIBezierPath {
            return UIBezierPath(roundedRect: frame.insetBy(dx: dx, dy: dy), cornerRadius: cornerRadius)
        }
    }
    
    var rects: [Rect] = []
    
    var paths: [UIBezierPath] = []
}

/// CoverView 的 子控件布局参考点位
struct Point {
    var minX: CGFloat = 0
    var minY: CGFloat = 0
    var maxX: CGFloat = 0
    var maxY: CGFloat = 0
}

/// 引导view协议
protocol CoverViewProtocol: UIView {
    func layout(make: ConstraintMaker, super: UIView)

    /// 镂空位置
    var location: GuideLocation { get set }

    /// 供 接入方 使用
    var clickAction: ((@escaping (Bool) -> Void) -> Void)? { get set }

    /// 供 GuideContainerView 使用
    var nextStep: (() -> Void)? { get set }
    
    /// 子控件布局参考点位
    var referPoint: Point { get set }
}

/// 引导容器
class GuideContainerView: BaseView {
    public var covers: [CoverViewProtocol] = []
    
    /// 所有 引导图 展示完毕
    public var complete: (() -> Void)?

    private var index: Int = 0
    
    deinit {
        print("GuideContainerView deinit")
    }
    
    override func setupUI() {
        super.setupUI()
        clipsToBounds = true
        backgroundColor = UIColor.black.withAlphaComponent(0.7)
    }

    public func show(in view: UIView? = UIApplication.shared.keyWindow) {
        guard let view = view else { return }
        if covers.isEmpty { return }
        index = 0
        view.addSubview(self)
        snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }

        setNeedsLayout()
        layoutIfNeeded()

        showCover()
    }

    private func showCover() {
        if index < 0 || index > covers.count - 1 {
            complete?()
            removeFromSuperview()
            return
        }

        let cover = covers[index]
        cover.nextStep = { [weak self, weak cover] in
            guard let self = self else { return }
            guard let cover = cover else { return }
            cover.removeFromSuperview()
            self.index += 1
            self.showCover()
        }

        addSubview(cover)
        cover.snp.makeConstraints { [weak self] make in
            guard let self = self else { return }
            cover.layout(make: make, super: self)
        }

        let path = UIBezierPath(rect: bounds)
        if cover.location.rects.isNotEmpty {
            for rect in cover.location.rects {
                path.append(rect.bPath)
            }
        }
        
        if cover.location.paths.isNotEmpty {
            for subPath in cover.location.paths {
                path.append(subPath)
            }
        }

        let shape = CAShapeLayer()
        shape.path = path.cgPath
        shape.fillRule = .evenOdd
        layer.mask = shape
    }
}

// MARK: - CoverView

class CoverView: BaseView, CoverViewProtocol {
    var clickAction: ((@escaping (Bool) -> Void) -> Void)?
    
    var nextStep: (() -> Void)?

    var location = GuideLocation()
    
    var referPoint = Point()

    func layout(make: ConstraintMaker, super: UIView) {
        make.edges.equalToSuperview()
    }
}


举个🌰

1.自定义 CoverView

class HomeFinanceCoverView: CoverView {
    enum Step {
        case s1
    }
    
    var step: Step = .s1
    
    let imgStep = UIImageView().then {
        $0.isUserInteractionEnabled = true
    }
    
    let imgGuide = UIImageView()
    
    deinit {
        print("HomeFinanceCoverView deinit")
    }
    
    override func setupUI() {
        super.setupUI()
        
        addSubview(imgStep)
        addSubview(imgGuide)
        
        imgStep.rx.tapGesture().when(.ended)
            .subscribe(onNext: { [weak self] _ in
                guard let self = self else { return }
                if let clickAction = self.clickAction {
                    clickAction { finish in
                        if finish {
                            self.nextStep?()
                        }
                    }
                } else {
                    self.nextStep?()
                }
            })
            .disposed(by: rx.disposeBag)
    }
    
    override func didMoveToSuperview() {
        super.didMoveToSuperview()

        switch step {
        case .s1:
            imgGuide.image = UIImage(named: "loan_guide_1")
            imgStep.image = UIImage(named: "loan_step_1")
            
            imgGuide.snp.makeConstraints { make in
                make.leading.equalTo(16.shtScale)
                make.size.equalTo(CGSize(width: 178.shtScale, height: 106.shtScale))
                make.top.equalTo(self.referPoint.maxY + 8.shtScale)
            }
            
            imgStep.snp.makeConstraints { make in
                make.centerX.equalToSuperview()
                make.size.equalTo(CGSize(width: 106.shtScale, height: 56.shtScale))
                make.bottom.equalToSuperview().offset(-40.shtScale)
            }
        }
    }
}

2.使用

  let cover = GuideContainerView()
  let cell = ...
  let rect = collectionView.convert(cell.frame, to: UIApplication.shared.keyWindow)
            let c1 = HomeFinanceCoverView().then {
                $0.step = .s1
                $0.referPoint = .init(minX: rect.minX, minY: rect.minY, maxX: rect.maxX, maxY: rect.maxY)
                $0.location.rects = [
                    .init(frame: CGRect(x: rect.minX, y: rect.minY, width: rect.width, height: rect.height), cornerRadius: 6.shtScale)
                ]
            }
            cover.covers.append(c1)     
   cover.show()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容