QHalfFaceMakeup

封装弹出页面，可跟随手势滑动消失

近来无事，就写了个弹出页面的控件玩，类似微信读书中的讲书播放页面。动画弹出页面后可跟随手势下滑动消失，上效果（图1是demo效果，图2是项目中应用效果）。

demo_show.gif
user_show.gif

使用

使用超简单的

    let tbv = TableView(frame: self.view.frame, style: .plain)
    let halfFace = QHalfFaceMakeup(self, tbv)
    halfFace.adjustOS = 57
    halfFace.show()

思路

控件主要由两个部分组成： QHalfFaceMakeup 和 QHalfFaceMakeupVC 。

QHalfFaceMakeup 是最外层，暴露接口，负责初始化控件和弹出内容页面。

重点：弹出页面的操作这里采用模态推出页面，并且 modalPresentationStyle = .overFullScreen 。

开始时的想法是：采用弹出 View 作为容器，经过尝试不管是把 View 加载 viewController 上，还是加在 window 上都没有达到我想要的效果，遂弃之。

class QHalfFaceMakeup: NSObject {
    var superVC: UIViewController!
    var faceView: UIView!
    var halfFace: QHalfFaceMakeupVC!
    init(_ vc: UIViewController, _ face: UIView) {
        super.init()
        superVC = vc
        faceView = face
        halfFace = QHalfFaceMakeupVC()
    }

    /// 调整face有轴坐标，default = 0（紧挨导航栏），负值往上反之向下
    var adjustOS: CGFloat! = 0 {
        didSet {
            halfFace.adjustOS = adjustOS
        }
    }
    func show() {
        halfFace.modalPresentationStyle = .overFullScreen
        superVC.present(halfFace, animated: false) {
            self.halfFace.addFace(self.faceView)
            self.halfFace.show()
        }
    }
    func dismiss() {
        halfFace.close()
    }
}

QHalfFaceMakeupVC 是重点，是展示内容的容器，负责处理展示 View 的基础样式和布局、手势交互等。

1.布局：view -> baseView -> (topView & faceView)

• view 是 QHalfFaceMakeupVC 自带 view 位于最底层，添加有点击手势，点击释放页面，颜色半透明。
• baseView 承载展示效果和其他（比如圆角之类），其添加有平移手势，滑动平移消失效果由此承担。
• topView 是顶部消失按钮；faceView 是主要展示内容，由外部传入，控件不处理任何业务代码。
  2.手势处理，若传入的是 scrollView 或其子类 必定会和 baseView 的平滑手势冲突

// MARK: - 手势处理
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldReceive touch: UITouch) -> Bool {
        let className: AnyClass = gestureRecognizer.classForCoder
        if touch.view != self.view {
            if NSStringFromClass(className) == "UITapGestureRecognizer" {
                return false
            }
        }
        return true
    }
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        if otherGestureRecognizer.view is UIScrollView {
            if gestureRecognizer.state == .began && (otherGestureRecognizer.view as! UIScrollView).contentOffset.y <= 0 {
                (otherGestureRecognizer.view as! UIScrollView).bounces = false
                return true
            }
            (otherGestureRecognizer.view as! UIScrollView).bounces = true
        }
        return false
    }

3.平滑消失操作

 // MARK: - 滑动关闭页面
    @objc private func panClose(_ panGesture: UIPanGestureRecognizer) {
        var top: CGFloat = 64
        if screenHeight == 812 {
            top = 88
        }
        let offsetY = panGesture.translation(in: panGesture.view).y
        if offsetY >= 0 {
            UIView.animate(withDuration: 0.13, animations: {
                self.baseView.transform = CGAffineTransform(translationX: 0, y: -self.baseView.frame.size.height + top + offsetY)
            })
        }
        if panGesture.state == .ended || panGesture.state == .failed || panGesture.state == .cancelled {
            if offsetY >= (baseView.frame.size.height - top)/4 {
                close()
            } else {
                show()
            }
        }
    }

至此就不贴代码，也没人看。想追究的小伙伴可以点击 QHalfFaceMakeup追查到底！