UISearchBar augmente la hauteur de la barre de navigation dans iOS 11

Je fais UISearchBarpartie de la barre de navigation comme:

 let searchBar = UISearchBar()
 //some more configuration to the search bar
 .....
 navigationItem.titleView = searchBar

Après la mise à jour vers iOS 11quelque chose de bizarre est arrivé à la barre de recherche de mon application. Sur iOS 10et avant, ma barre de navigation ressemblait à:

Maintenant avec iOS 11j'ai:

Comme vous pouvez le voir, il y a une différence dans l'arrondi des deux barres de recherche qui ne me dérange pas. Le problème est que la barre de recherche augmente la hauteur de la barre de navigation. Donc, quand je vais sur un autre contrôleur, ça a l'air bizarre aussi:

En fait, la hauteur de la ligne noire bizarre plus la hauteur de la barre de navigation actuelle est égale à la hauteur de la barre de navigation indiquée dans la deuxième image ...

Des idées sur la façon de se débarrasser de la ligne noire et d'avoir une hauteur de barre de navigation cohérente sur tous les contrôleurs de vue?

J'ai une ligne noire sous NavigationBar avec SearchBar dans iOS 11 dans deux cas:

• quand j'ai poussé un autre ViewControllers de ViewController avec UISearchBar

• quand j'ai fermé ViewController avec UISearchBar avec "glisser vers la droite pour ignorer"

Ma solution était: ajouter ce code à mon ViewController avec UISearchBar:

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.navigationController.view setNeedsLayout]; // force update layout
    [self.navigationController.view layoutIfNeeded]; // to fix height of the navigation bar
}

Mise à jour Swift 4

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout() // force update layout
    navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
}

Vous pouvez ajouter une contrainte de hauteur 44 à la barre de recherche pour iOS 11.

// Rapide

if #available(iOS 11.0, *) {
    searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true
}

// Objectif c

if (@available(iOS 11.0, *)) {
    [searchBar.heightAnchor constraintEqualToConstant:44].active = YES;
}

Je crois que dans iOS 11 UISearchBar a maintenant la hauteur égale à 56, et UINavigationBar utilise la mise en page automatique pour s'adapter à ses sous-vues, ce qui augmente la hauteur. Si vous souhaitez toujours avoir UISearchBar comme titleView comme dans la version antérieure à iOS 11, j'ai découvert que la meilleure façon de le faire est d'intégrer UISearchBar dans une vue personnalisée, de définir la hauteur de cette vue sur 44 et de l'attribuer à navigationItem.titleView

class SearchBarContainerView: UIView {  

    let searchBar: UISearchBar  

    init(customSearchBar: UISearchBar) {  
        searchBar = customSearchBar  
        super.init(frame: CGRect.zero)  

        addSubview(searchBar)  
    }

    override convenience init(frame: CGRect) {  
        self.init(customSearchBar: UISearchBar())  
        self.frame = frame  
    }  

    required init?(coder aDecoder: NSCoder) {  
        fatalError("init(coder:) has not been implemented")  
    }  

    override func layoutSubviews() {  
        super.layoutSubviews()  
        searchBar.frame = bounds  
    }  
}  

class MyViewController: UIViewController {  

    func setupNavigationBar() {  
        let searchBar = UISearchBar()  
        let searchBarContainer = SearchBarContainerView(customSearchBar: searchBar)  
        searchBarContainer.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 44)  
        navigationItem.titleView = searchBarContainer  
    }  
} 

essayez ce code sur le contrôleur de vue "ACKNOWLEDGMENTS" dans viewDidLoad

self.extendedLayoutIncludesOpaqueBars = true

Merci à tous! J'ai finalement trouvé une solution.

Ajout du code suivant à ViewController avec UISearchBar.

1. Premier pas: viewDidLoad

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.extendedLayoutIncludesOpaqueBars = YES;
    ...
}

override func viewDidLoad() {
    super.viewDidLoad()
    self.extendedLayoutIncludesOpaqueBars = true
}

2. Deuxième étape:viewWillDisappear

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
     // force update layout
    [self.navigationController.view setNeedsLayout]; 
    // to fix height of the navigation bar
    [self.navigationController.view layoutIfNeeded];  
}

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.view.setNeedsLayout() // force update layout
        navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
    }

En Objective-C

if (@available(iOS 11.0, *)) {
        [self.searchBar.heightAnchor constraintLessThanOrEqualToConstant: 44].active = YES;
}              

Cela m'arrive aussi, tout fonctionne bien dans iOS 12.4 et devient bizarre dans 13 ci-dessus. Le problème réside dans l'augmentation de la hauteur de la barre de navigation iOS 13 de 88 à 100 après le saut de UIViewController qui implémente searchBar.

Essayez ceci dans votre UIViewController qui implémente searchBar.

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout()
    navigationController?.view.layoutIfNeeded()
}

Aperçu après correction:

Aperçu avant de réparer:

EDIT: La réponse @zgjie est une meilleure solution pour ce problème: https://stackoverflow.com/a/46356265/1713123

Cela semble se produire car dans iOS 11, la valeur de hauteur par défaut de SearchBar a été modifiée à 56, au lieu de 44 sur les versions iOS précédentes.

Pour l'instant, j'ai appliqué cette solution de contournement en définissant la hauteur de searchBar sur 44:

let barFrame = searchController.searchBar.frame
searchController.searchBar.frame = CGRect(x: 0, y: 0, width: barFrame.width, height: 44)    

Une autre solution pourrait être d'utiliser la nouvelle propriété searchController sur navigationItem dans iOS 11 :

navigationItem.searchController = searchController

Mais de cette façon, la barre de recherche apparaît sous le titre de navigation.

Toutes les solutions ne fonctionnaient pas pour moi, alors avant de pousser le contrôleur de vue, je l'ai fait:

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    self.navigationItem.titleView = UIView()
}

Et pour rendre la barre de recherche présente lors du retour:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    self.navigationItem.titleView = UISearchBar()
}

Je ne pouvais pas utiliser la solution de garder la barre de navigation à 44. Cela m'a donc pris une journée mais finalement, j'ai trouvé une solution qui ne change pas la hauteur de la barre et positionne le bouton au milieu de la barre. Le problème est que les boutons sont placés dans une vue de pile qui est configurée comme vue de pile horizontale et ne s'ajuste donc pas au changement de hauteur.

Ceci est fait sur init:

UIBarButtonItem *cancelButton;
if (@available(iOS 11.0, *)) {
    // For iOS11 creating custom button to accomadate the change of navbar + search bar being 56 points
    self.navBarCustomButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.navBarCustomButton setTitle:@"Cancel"];
    [self.navBarCustomButton addTarget:self action:@selector(cancelButtonTapped) forControlEvents:UIControlEventTouchUpInside];
    cancelButton = [[UIBarButtonItem alloc] initWithCustomView:self.navBarCustomButton];
} else {
    cancelButton = [[UIBarButtonItem alloc] initWithTitle:MagicLocalizedString(@"button.cancel", @"Cancel")
                                                                                         style:UIBarButtonItemStylePlain
                                                                                        target:self
                                                                                        action:@selector(cancelButtonTapped)];
}

on viewWillApear (ou à tout moment après l'ajout de la vue à la pile de navigation)

   if (@available(iOS 11.0, *)) {
        UIView *buttonsStackView = [navigationController.navigationBar subviewOfClass:[UIStackView class]];
        if (buttonsStackView ) {
            [buttonsStackView.centerYAnchor constraintEqualToAnchor:navigationController.navigationBar.centerYAnchor].active = YES;
            [self.navBarCustomButton.heightAnchor constraintEqualToAnchor:buttonsStackView.heightAnchor];
        }
    }

Et subviewOfClass est une catégorie sur UIView:

- (__kindof UIView *)subviewOfClass:(Class)targetClass {
     // base case
     if ([self isKindOfClass:targetClass]) {
        return self;
     }

     // recursive
    for (UIView *subview in self.subviews) {
        UIView *dfsResult = [subview subviewOfClass:targetClass];

        if (dfsResult) {
           return dfsResult;
       }
   }
   return nil;
}

Tout ce que vous avez à faire est de sous-classer UISearchBar et de remplacer "intrinsicContentSize":

@implementation CJSearchBar
-(CGSize)intrinsicContentSize{
    CGSize s = [super intrinsicContentSize];
    s.height = 44;
    return s;
}
@end

Impossible de commenter, mais je voulais partager quelques problèmes supplémentaires que j'ai rencontrés en passant de nombreuses heures à essayer d'aller au fond de ce problème, même après avoir utilisé l'une des autres solutions.

Il semble que la meilleure solution pour moi était la réponse d'Andrew :

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout() // force update layout
    navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
}

Cependant, au moins dans iOS 12.1 , si votre UINavigationBar:

• s'est isTranslucentmis àfalse , le contrôleur de vue avec la barre de recherche ne semble pas avoir la disposition de sa vue ajustée lors du rejet interactif (le rejet normal via le bouton de retour semble fonctionner).
• si son image d'arrière-plan est définie à l'aide de setBackgroundImage(UIImage(), for: .default), l'animation de transition ne fonctionne pas correctement et reviendra à sa position après avoir terminé.

Cependant, ces propriétés particulières ont été définies pour que la barre de navigation apparaisse d'une certaine manière, donc je dois faire quelques ajustements pour la récupérer, ou supporter le comportement étrange. Je vais essayer de me rappeler de mettre à jour ce qui précède si je rencontre autre chose ou si je trouve d'autres solutions ou différences dans d'autres versions du système d'exploitation.

Dans mon cas, la plus grande hauteur de UINavigationBar n'était pas un problème pour moi. J'avais juste besoin de réaligner les éléments des boutons de la barre gauche et droite. C'est la solution que j'ai trouvée:

- (void)iOS11FixNavigationItemsVerticalAlignment
{
    [self.navigationController.navigationBar layoutIfNeeded];

    NSString * currSysVer = [[UIDevice currentDevice] systemVersion];
    if ([currSysVer compare:@"11" options:NSNumericSearch] != NSOrderedAscending)
    {
        UIView * navigationBarContentView;
        for (UIView * subview in [self.navigationController.navigationBar subviews])
        {
            if ([subview isKindOfClass:NSClassFromString(@"_UINavigationBarContentView")])
            {
                navigationBarContentView = subview;
                break;
            }
        }

        if (navigationBarContentView)
        {
            for (UIView * subview in [navigationBarContentView subviews])
            {
                if (![subview isKindOfClass:NSClassFromString(@"_UIButtonBarStackView")]) continue;

                NSLayoutConstraint * topSpaceConstraint;
                NSLayoutConstraint * bottomSpaceConstraint;

                CGFloat topConstraintMultiplier = 1.0f;
                CGFloat bottomConstraintMultiplier = 1.0f;

                for (NSLayoutConstraint * constraint in navigationBarContentView.constraints)
                {
                    if (constraint.firstItem == subview && constraint.firstAttribute == NSLayoutAttributeTop)
                    {
                        topSpaceConstraint = constraint;
                        break;
                    }

                    if (constraint.secondItem == subview && constraint.secondAttribute == NSLayoutAttributeTop)
                    {
                        topConstraintMultiplier = -1.0f;
                        topSpaceConstraint = constraint;
                        break;
                    }
                }

                for (NSLayoutConstraint * constraint in navigationBarContentView.constraints)
                {
                    if (constraint.firstItem == subview && constraint.firstAttribute == NSLayoutAttributeBottom)
                    {
                        bottomSpaceConstraint = constraint;
                        break;
                    }

                    if (constraint.secondItem == subview && constraint.secondAttribute == NSLayoutAttributeBottom)
                    {
                        bottomConstraintMultiplier = -1.0f;
                        bottomSpaceConstraint = constraint;
                        break;
                    }
                }

                CGFloat contentViewHeight = navigationBarContentView.frame.size.height;
                CGFloat subviewHeight = subview.frame.size.height;
                topSpaceConstraint.constant = topConstraintMultiplier * (contentViewHeight - subviewHeight) / 2.0f;
                bottomSpaceConstraint.constant = bottomConstraintMultiplier * (contentViewHeight - subviewHeight) / 2.0f;
            }
        }
    }
}

Fondamentalement, nous recherchons des vues de pile contenant des éléments de bouton de barre, puis nous modifions les valeurs de leurs contraintes supérieures et inférieures. Oui, c'est un hack de saleté, et je ne recommanderai pas de l'utiliser si vous pouvez résoudre votre problème d'une autre manière.

//
//  Created by Sang Nguyen on 10/23/17.
//  Copyright © 2017 Sang. All rights reserved.
//

import Foundation
import UIKit

class CustomSearchBarView: UISearchBar {
    final let SearchBarHeight: CGFloat = 44
    final let SearchBarPaddingTop: CGFloat = 8
    override open func awakeFromNib() {
        super.awakeFromNib()
        self.setupUI()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupUI()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
       // fatalError("init(coder:) has not been implemented")
    }
    func findTextfield()-> UITextField?{
        for view in self.subviews {
            if view is UITextField {
                return view as? UITextField
            } else {
                for textfield in view.subviews {
                    if textfield is UITextField {
                        return textfield as? UITextField
                    }
                }
            }
        }
        return nil;
    }
    func setupUI(){
        if #available(iOS 11.0, *) {
            self.translatesAutoresizingMaskIntoConstraints = false
            self.heightAnchor.constraint(equalToConstant: SearchBarHeight).isActive = true
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if #available(iOS 11.0, *) {
            if let textfield = self.findTextfield() {
                textfield.frame = CGRect(x: textfield.frame.origin.x, y: SearchBarPaddingTop, width: textfield.frame.width, height: SearchBarHeight - SearchBarPaddingTop * 2)`enter code here`
                return
            }
        }
    }
}

J'ai trouvé que la solution de Mai Mai était la seule qui soit vraiment utilisable.
Cependant, ce n'est toujours pas parfait:
lors de la rotation de l'appareil, la barre de recherche n'est pas correctement redimensionnée et reste dans la plus petite dimension.

J'ai trouvé une solution pour cela. Voici mon code en Objective C avec les parties pertinentes annotées:

// improvements in the search bar wrapper
@interface SearchBarWrapper : UIView
@property (nonatomic, strong) UISearchBar *searchBar;
- (instancetype)initWithSearchBar:(UISearchBar *)searchBar;
@end
@implementation SearchBarWrapper
- (instancetype)initWithSearchBar:(UISearchBar *)searchBar {
    // setting width to a large value fixes stretch-on-rotation
    self = [super initWithFrame:CGRectMake(0, 0, 4000, 44)];
    if (self) {
        self.searchBar = searchBar;
        [self addSubview:searchBar];
    }
    return self;
}
- (void)layoutSubviews {
    [super layoutSubviews];
    self.searchBar.frame = self.bounds;
}
// fixes width some cases of resizing while search is active
- (CGSize)sizeThatFits:(CGSize)size {
    return size;
}
@end

// then use it in your VC
@implementation MyViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.titleView = [[SearchBarWrapper alloc] initWithSearchBar:self.searchController.searchBar];
}
@end

Maintenant, il reste encore un cas que je n'ai pas encore compris. Pour reproduire, procédez comme suit:
- démarrer en portrait
- activer le champ de recherche
- faire pivoter en paysage
- erreur: la barre ne se redimensionne pas

J'ai corrigé cela en ajoutant la contrainte à viewDidAppear sur le contrôleur de vue de la carte où la barre de recherche est intégrée

public override func viewDidAppear(_ animated: Bool) {
    if #available(iOS 11.0, *) {

        resultSearchController?.searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true
        // searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true
    }
}

Salut aux personnes qui l'utilisent UISearchControlleret l'attachent ensuite UISearchBarau navigationItem.titleView. J'ai passé 4 à 5 heures de ma journée pour résoudre ce problème. Suivre l'approche recommandée d'iOS 11+, qui consiste à mettre le searchControllerà la navigation.searchControllern'est pas juste pour mon cas. L'écran qui a ce searchController / searchBar a un backButton, un personnalisé.

J'ai testé cela dans iOS 10, iOS 11 et 12. Sur différents appareils. Je devais juste le faire. Je ne peux pas rentrer chez moi sans résoudre ce démon. C'est le plus parfait que je puisse faire pour aujourd'hui, compte tenu de mon délai serré.

Donc je veux juste partager ce dur travail que j'ai fait, c'est à vous de tout mettre où vous voulez (ex. Variables dans votre viewModel). Et voilà:

Dans mon premier écran (disons l'écran d'accueil, qui n'a pas ce contrôleur de recherche), j'ai ceci dans mon viewDidLoad().

self.extendedLayoutIncludesOpaqueBars = true

Dans mon deuxième écran, celui qui a le searchController, j'ai ceci dans mon viewDidAppear.

override func viewDidAppear (_ animated: Bool) {super.viewDidAppear (animé)

    let systemMajorVersion = ProcessInfo.processInfo.operatingSystemVersion.majorVersion
    if systemMajorVersion < 12 {
        // Place the search bar in the navigation item's title view.
        self.navigationItem.titleView = self.searchController.searchBar
    }

    if systemMajorVersion >= 11 {

        self.extendedLayoutIncludesOpaqueBars = true

        UIView.animate(withDuration: 0.3) {
            self.navigationController?.navigationBar.setNeedsLayout()
            self.navigationController?.navigationBar.layoutIfNeeded()
        }

        self.tableView.contentInset = UIEdgeInsets(top: -40, left: 0, bottom: 0, right: 0)

        if self.viewHadAppeared {
            self.tableView.contentInset = .zero
        }
    }

    self.viewHadAppeared = true // this is set to false by default.
}

et voici ma déclaration de searchController:

lazy var searchController: UISearchController = {
    let searchController = UISearchController(searchResultsController: nil)
    searchController.hidesNavigationBarDuringPresentation = false
    searchController.dimsBackgroundDuringPresentation = false
    searchController.searchBar.textField?.backgroundColor = .lalaDarkWhiteColor
    searchController.searchBar.textField?.tintColor = .lalaDarkGray
    searchController.searchBar.backgroundColor = .white
    return searchController
}()

J'espère donc que cela aidera quelqu'un un jour.

J'ai essayé diverses choses pour ramener la taille à l'original 44, mais la barre de recherche a toujours l'air et se comporte toujours bizarrement - comme être trop étirée, décalée en Y et autres.

J'ai trouvé une bonne solution ici (via un autre article de stackoverflow): https://github.com/DreamTravelingLight/searchBarDemo

Dérivez simplement votre viewcontroller du SearchViewController et incluez dans votre projet les classes SearchViewController et WMSearchbar. A travaillé hors de la boîte pour moi sans aucun laid si (iOS11) sinon ... laideur.

Dans mon cas, je dois diminuer la hauteur du textField 36pt -> 28pt.

J'ai donc essayé de changer la hauteur du cadre, la hauteur du calque. Mais les moyens n'ont pas fonctionné.

Enfin, j'ai trouvé une solution qui est le masque. Je pense que ce n'est pas un bon moyen, mais cela fonctionne.

    let textField              = searchBar.value(forKey: "searchField") as? UITextField
    textField?.font            = UIFont.systemFont(ofSize: 14.0, weight: .regular)
    textField?.textColor       = #colorLiteral(red: 0.1960784314, green: 0.1960784314, blue: 0.1960784314, alpha: 1)
    textField?.textAlignment   = .left

    if #available(iOS 11, *) {
        let radius: CGFloat           = 5.0
        let magnifyIconWidth: CGFloat = 16.0
        let inset                     = UIEdgeInsets(top: 4.0, left: 0, bottom: 4.0, right: 0)

        let path = CGMutablePath()
        path.addArc(center: CGPoint(x: searchBar.bounds.size.width - radius - inset.right - magnifyIconWidth, y: inset.top + radius), radius: radius, startAngle: .pi * 3.0/2.0, endAngle: .pi*2.0, clockwise: false)                        // Right top
        path.addArc(center: CGPoint(x: searchBar.bounds.size.width - radius - inset.right - magnifyIconWidth, y: searchBar.bounds.size.height - radius - inset.bottom), radius: radius, startAngle: 0, endAngle: .pi/2.0, clockwise: false)  // Right Bottom
        path.addArc(center: CGPoint(x: inset.left + radius, y: searchBar.bounds.size.height - radius - inset.bottom), radius: radius, startAngle: .pi/2.0, endAngle: .pi, clockwise: false)                                                  // Left Bottom
        path.addArc(center: CGPoint(x: inset.left + radius, y: inset.top + radius),  radius: radius, startAngle: .pi, endAngle: .pi * 3.0/2.0, clockwise: false)                                                                             // Left top

        let maskLayer      = CAShapeLayer()
        maskLayer.path     = path
        maskLayer.fillRule = kCAFillRuleEvenOdd

        textField?.layer.mask = maskLayer
    }

Vous pouvez changer les inserts, si vous voulez changer le cadre du textField.