可能是全网第一个适配iOS灵动岛的Toast库-JFPopup

本文介绍: 我去年的一篇文章详细的介绍了我编写的一套Swi ft 弹窗组件库一个优雅的Swi ft 弹窗组件-JFPop up。里面适配了一套To astView，恰逢今年苹果iPh on e14 Pro以上系列新出了一套灵动岛的交互风格，所以就意外想到能否把To astView也适配进去灵动岛，所以此文就应运而生。我上篇文章已经很详细的介绍了JFPop up具体用法，这篇文章主要讲解适配灵动岛的心路历程。

前言

我去年的一篇文章详细的介绍了我编写的一套Swift 弹窗组件库一个优雅的Swift弹窗组件-JFPopup。里面适配了一套To astView，恰逢今年苹果iPh on e14 Pro以上系列新出了一套灵动岛的交互风格，所以就意外想到能否把ToastView也适配进去灵动岛，所以此文就应运而生。我上篇文章已经很详细的介绍了JFPopup具体用法，这篇文章主要讲解适配灵动岛的心路历程。

具体效果：

用法

虽然我上篇文章已经介绍了一遍，这里我还是再写一下。另外灵动岛Toast 默认适配iPh on e14 Pro以上机型，无需另外操作，若不是灵动岛机型，则是默认居中,还支持 top及bot tom。更多详细参数请看一个优雅的Swift弹窗组件-JFPopup

Toast:

//默认仅文案
JFPopupView.popup.toast(hit: "默认toast,支持灵动岛")

//带logo ,内置success or fail
JFPopupView.popup.toast(hit: "支付成功", icon: .success)

JFPopupView.popup.toast(hit: "支付失败", icon: .fail)

//自定义logo
JFPopupView.popup.toast(hit: "自定义", icon: .imageName(name: "face"))

Loa d in g:


DispatchQueue.main.async {
            JFPopupView.popup.loading()
        }
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            JFPopupView.popup.hideLoading()
            JFPopupView.popup.toast(hit: "刷新成功")
        }

适配灵动岛具体过程

由于苹果官方已经说了要在下半年推出的ActivityKit才会加入适配灵动岛的Api。所以目前并没有官方的api 可以给我们适配。所以只能硬着头皮自己去思考适配方案了。

– 首先要知道灵动岛的区域 大小

我们用最笨的方法，直接给模拟器截个图自己去算大小。至少能还原99%的效果了。如图得知，灵动岛的区域大概是宽120dt,高34dp，那半圆圆角自然为17dt。居顶部大约10dp，以及在屏幕居中。有了这些信息，我们自然就能模拟灵动岛的放大缩小转场效果了。

– Toa stView新增灵动岛动画

我们在原先基础上新增灵动岛动画枚举

public enum JFToastPosition {
    case center
    case top
    case bottom
    case dynamicIsland //新增灵动岛位置动画
}

重新实现下pre sent 及 dismiss 协议的转场动画代码如下

展开：


let originSize = contianerView.jf.size
                if config.toastPosition == .dynamicIsland {
                    contianerView.jf_size = CGSize(width: 120, height: 34)
                    contianerView.center = CGPoint(x: CGSize.jf.screenSize().width / 2, y: 27)
                }
                let updateV = {
                    contianerView.center = CGPoint(x: CGSize.jf.screenSize().width / 2, y: CGSize.jf.screenSize().height / 2)
                    if config.toastPosition == .top {
                        contianerView.jf_top = CGFloat.jf.navigationBarHeight() + 15
                    } else if config.toastPosition == .bottom {
                        contianerView.jf_bottom = CGSize.jf.screenHeight() - CGFloat.jf.safeAreaBottomHeight() - 15
                    } else if config.toastPosition == .dynamicIsland {
                        contianerView.jf_size = originSize
                        contianerView.center = CGPoint(x: CGSize.jf.screenSize().width / 2, y: originSize.height / 2 + 10)
                    }
                    contianerView.layoutIfNeeded()
                }
                guard config.withoutAnimation == false else {
                    updateV()
                    transitonContext?.completeTransition(true)
                    completion?(true)
                    return
                }
                if config.toastPosition == .dynamicIsland {
                    UIView.animate(withDuration: 0.25) {
                        updateV()
                    } completion: { finished in
                        transitonContext?.completeTransition(true)
                        completion?(finished)
                    }
                    return
                }

消失：


UIView.animate(withDuration: 0.25, animations: {
                    if config.toastPosition == .dynamicIsland {
                        contianerView?.layer.cornerRadius = 17
                        contianerView?.jf_size = CGSize(width: 120, height: 34)
                        contianerView?.center = CGPoint(x: CGSize.jf.screenSize().width / 2, y: 27)
                    }
                    contianerView?.subviews.forEach({ v in
                        if config.toastPosition == .dynamicIsland {
                            v.isHidden = true
                        } else {
                            v.alpha = 0
                        }
                    })
                    contianerView?.alpha = 0
                }) { (finished) in
                    transitonContext?.completeTransition(true)
                    completion?(finished)
                }