显示没有像Instagram这样的互联网连接消息

Question

我想知道如何展示＆＃39;没有互联网连接＆＃39; 就像Instagram一样，

作为示例：

在navigationController下显示的透明自定义消息动画。真的很想得到我的项目， 谢谢你的帮助

Answer 1

所以这里是故事板的照片： -

＆＃34;没有互联网连接＆＃34;是一个标签，下面的红色视图只是为了测试标签的透视属性。如果您在代码中设计UI，您可以制作与我类似的标签，并使用它的框架属性将其放置在导航栏的顶部。

我在这里使用的按钮只是为了显示场景中弹出的标签（因为它只是一个演示答案）。在您的情况下，如果互联网不可用，您将继续显示弹出窗口。

因此，如果您在代码中创建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以产生不同的效果。