显示没有像Instagram那样的Internet连接消息

Question

我想知道如何展示"没有互联网连接"就像Instagram一样,

举个例子 :

这个透明的自定义消息动画显示在navigationController.真的很想把这个带到我的项目中,谢谢你的帮助

Answer 1

所以这是这样的故事板的照片: -

"没有互联网连接"是一个标签,下面的红色视图只是为了测试标签的透视属性.如果您在代码中设计UI,则可以使用类似于我的标签,并使用它的frame属性将其放置在导航栏的顶部.

我正在使用的按钮只是为了显示场景中弹出的标签(因为它只是一个演示答案).在您的情况下,如果互联网不可用,您将继续显示弹出窗口.

因此,如果您在代码中创建UI,请确保在viewDidLoad方法中创建标签.我做了一个IBOutlet,viewDidLoad现在看起来像这样: -

override func viewDidLoad() {
        super.viewDidLoad()

        let transform = CGAffineTransform(translationX: 0, y: -label.frame.height)
        label.alpha = 0
        label.transform = transform
    }

在视图加载中,我正在使用导航栏后面的标签CGAffineTransform.距离,向上移动label的高度是高度,因为我们不希望在场景中剪切任何部分.

下一步,只是一个修复.我正在制作alpha= 0,因为navBar半透明是自然,因此会改变它的颜色,因为我们的标签在它后面.因此设置alpha为0,处理它,并在第三步应用转换.

现在,如果互联网连接不可用,我们应该弹出标签下的标签navBar.代码看起来像这样: -

fun checkInternet() {
// called by some of your observer, which checks for changes in internet connection

    if !isInternetAvailable {

       UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.3, initialSpringVelocity: 0, options: .curveLinear, animations: {

        self.label.alpha = 0.5
        self.label.transform = .identity
    }, completion: nil)
     }
}

所以在这里,我将使用UIView.animate一些弹簧阻尼来显示弹出动画,因此它具有很好的弹性效果.我设置alpha为0.5,因为你提到你需要一个透视标签,我正在将标签设置为一个变换,它会在创建时将其恢复到原始位置,这就是我使用的原因.identity.您可以围绕usingSpringWithDamping值进行游戏并进行更改options以获得不同的效果.