iOS 11 Conseils de mise en page sur la zone sécurisée pour iPhone x
Mon application est déjà dans l'App Store. Hier, j'ai mis à jour ma version de Xcode à 9 et fonctionne très bien, sauf iPhone x. UI s'est effondré.
1.ici, j'ai créé deux UIView (les deux sont de hauteur fixe) nommés en-tête et barre de tabulation et j'ai caché l'ensemble de ma NavigationBar.
2.Ajout d'une extension à UIViewController pour créer Header et Tab bar
func addHeaderTab(currentViewController:UIViewController,content:String, isMenu:Bool){
let noView = TopHeaderView()
noView.tag = 12345
noView.isMenu = isMenu
noView.translatesAutoresizingMaskIntoConstraints = false
currentViewController.view .addSubview(noView)
if isMenu{
noView.menuBtn .setImage(UIImage(named: "Small"), for: .normal)
noView.logoImg.isHidden = false
}else{
noView.menuBtn .setImage(UIImage(named: "arrow_small"), for: .normal)
noView.logoImg.isHidden = true
}
noView.titleLbl.text = content
noView.delegate = (currentViewController as! menuOpen)
NSLayoutConstraint(item: noView, attribute: .leading, relatedBy: .equal, toItem: currentViewController.view, attribute: .leading, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: noView, attribute: .trailing, relatedBy: .equal, toItem: currentViewController.view, attribute: .trailing, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: noView, attribute: .top, relatedBy: .equal, toItem: currentViewController.view, attribute: .top, multiplier: 1.0, constant: 0.0).isActive = true
NSLayoutConstraint(item: noView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 64).isActive = true
}
et en appelant tous les Viewcontroller comme ci-dessous:
self.addHeaderTab(currentViewController: self, content:"நிகழ்ச்சி நிரல்" , isMenu: true)
Comme cette barre d'onglets, je l'ai également fait, mais tout le périphérique fonctionne normalement iPhone x.
Voir ma capture d'écran:
j'ai étudié sur https://developer.Apple.com/ios/human-interface-guidelines/overview/iphone-x/
mais je ne suis pas clair avec leur document.
De l'aide serait appréciée, merci d'avance.
Avec iOS11 (et l'apparition de iPhoneX), Apple a introduit le Guide de mise en page Zone sécurisée pour adapter vos vues à l'iPhoneX.
La zone de sécurité est la zone de l'écran qui n'est pas recouverte par l'encoche ou l'indicateur de domicile.
Pour éviter le problème que vous rencontrez, vous devez modifier la contrainte supérieure de votre noView pour iOS11:
if #available(iOS 11, *) {
let guide = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
noView.topAnchor.constraint(equalTo: guide.topAnchor)
])
} else {
NSLayoutConstraint.activate([
noView.topAnchor.constraint(equalTo: currentViewController.topLayoutGuide.bottomAnchor)
])
}
NSLayoutConstraint.activate([
noView.leadingAnchor.constraint(equalTo: currentViewController.view.leadingAnchor),
noView.trailingAnchor.constraint(equalTo: currentViewController.view.trailingAnchor),
noView.heightAnchor.constraint(equalToConstant: 65)
])
Malheureusement ce n'est pas tout. Parce que maintenant, votre noView descend sur iPhone X, mais la barre d'état n'a plus d'arrière-plan rouge. Vous avez ajouté une couleur de fond rouge derrière la barre d'état:
Vous pouvez rendre les choses beaucoup plus faciles en utilisant un UINavigationController (avec une barre de navigation rouge):
Avec cette approche, vous ne devez pas définir de contraintes! Le système effectue automatiquement tous les ajustements.
En Objective-C pour les marges supérieure et inférieure sur iPhone-X
if (@available(iOS 11, *)) {
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:self.childView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.parentView.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0];
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:self.childView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.parentView.safeAreaLayoutGuide
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0];
} else {
NSLayoutConstraint *bottomConstraint = [NSLayoutConstraint constraintWithItem:self.childView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.parentView
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:0];
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:self.childView
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:self.parentView
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:0];
}
Définissez la contrainte de hauteur de headerView en fonction du périphérique.
if iPhoneX {
NSLayoutConstraint(item: noView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 64+24).isActive = true
} else {
NSLayoutConstraint(item: noView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: 64).isActive = true
}
Et définissez toutes les contraintes de sous-vue (de headerView) au bas de superview (headerView).
Note supplémentaire sur la raison pour laquelle nous avons ajouté 24 pixels pour iphoneX:
// portrait orientation - status bar is shown
additionalSafeAreaInsets.top = 24.0
Si vous ne voulez pas utiliser une UINavigationController mais que vous voulez avoir une barre de navigation, vous pouvez le faire de cette manière (en utilisant une UIImageView):
https://medium.com/@kahseng.lee123/creating-custom-navigation-bar-tab-bar-for-iphone-x-f03b1e1827d3
Vous pouvez également créer une vue et définir sa contrainte supérieure en haut de la vue supérieure et sa contrainte inférieure en haut de la barre de navigation. N'oubliez pas de le rendre rouge. :-)