Voir Aucun message de connexion Internet comme Instagram

Question

Je me demandais comment puis-je montrer une 'Pas de connexion Internet' Juste comment comme Instagram le fait,

À titre d'exemple:

Ce un message personnalisé transparent s'affichant sous le numéro navigationController. Aimerais vraiment obtenir ce à mon projet, je vous remercie de vous aider à

Answer 1

Alors, voici une image du story-board comme ceci: -

« Pas de connexion Internet » est une étiquette, et la vue rouge est au-dessous juste pour tester le voir à travers la propriété de l'étiquette. Si vous concevez l'interface utilisateur en code, vous pouvez probablement créer une étiquette similaire à la mienne et la placer en haut de la barre de navigation en utilisant sa propriété frame.

Le bouton J'utilise ici est juste pour montrer l'étiquette pop-up sur la scène (car il est juste une réponse de démonstration). Dans votre cas, si Internet n'est pas disponible, vous allez afficher la fenêtre contextuelle.

Donc, si vous créez l'interface utilisateur en code, assurez-vous de créer l'étiquette dans la méthode viewDidLoad. Je l'ai fait une IBOutlet et viewDidLoad ressemble maintenant à ceci: -

override func viewDidLoad() { 
     super.viewDidLoad() 

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

Sur le chargement de la vue, je me déplace l'étiquette derrière la barre de navigation, à l'aide CGAffineTransform. La distance, combien monter est la hauteur de label, puisque nous ne voulons pas que les parties soient coupées sur la scène.

L'étape suivante est juste une solution. Je fais alpha = 0, parce que navBar est translucide est la nature et donc va changer sa couleur, puisque notre étiquette est derrière elle. Donc, en réglant alpha à 0, prend soin de cela, et à la troisième étape, appliquez la transformation. Maintenant, si la connexion Internet n'est pas disponible, nous devrions sortir l'étiquette sous le navBar. Le code ressemblera à quelque chose comme ceci: -

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) 
    } 
} 

Donc ici, je vais vous montrer la pop avec une animation à l'aide UIView.animate avec un ressort d'amortissement, il a donc un bel effet plein d'entrain à elle. Je mets le alpha à 0.5, puisque vous avez mentionné que vous voulez une étiquette de voir à travers, et je place l'étiquette à une transformation qui la ramènera à sa position d'origine quand elle a été créée, c'est pourquoi j'utilise .identity . Vous pouvez jouer autour de usingSpringWithDamping valeurs et changer options pour avoir des effets différents.