UISearchBar aumenta l'altezza della barra di navigazione in iOS 11

Ho il mio UISearchBaressere parte della barra di navigazione come:

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

Dopo l'aggiornamento a iOS 11qualcosa di strano è successo alla barra di ricerca nella mia app. In iOS 10precedenza avevo la mia barra di navigazione simile a:

Ora con iOS 11ho:

Come puoi vedere c'è una differenza nell'arrotondamento delle due barre di ricerca che non mi disturba. Il problema è che la barra di ricerca aumenta l'altezza della barra di navigazione. Quindi quando vado su un altro controller sembra anche strano:

In effetti l'altezza della strana linea nera più l'altezza della barra di navigazione corrente è uguale all'altezza della barra di navigazione mostrata nella seconda immagine ...

Qualche idea su come sbarazzarsi della linea nera e avere un'altezza della barra di navigazione coerente su tutti i controller di visualizzazione?

Ho una linea nera sotto NavigationBar con SearchBar in iOS 11 in due casi:

• quando ho spinto un altro ViewControllers da ViewController con UISearchBar

• quando ho chiuso ViewController con UISearchBar con "trascina a destra per chiudere"

La mia soluzione era: aggiungere questo codice al mio ViewController con 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
}

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

Puoi aggiungere un vincolo di altezza 44 alla barra di ricerca per iOS 11.

// Swift

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

// Objective-C

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

Credo che in iOS 11 UISearchBar ora abbia l'altezza uguale a 56 e UINavigationBar utilizza il layout automatico per adattarsi alle sue visualizzazioni secondarie, quindi aumenta l'altezza. Se vuoi ancora avere UISearchBar come titleView come in pre-iOS 11, ho scoperto che il modo migliore per farlo è incorporare UISearchBar in una visualizzazione personalizzata e impostare l'altezza di questa visualizzazione su 44 e assegnarla a 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  
    }  
} 

prova questo codice sul controller di visualizzazione "ACKNOWLEDGMENTS" in viewDidLoad

self.extendedLayoutIncludesOpaqueBars = true

Grazie a tutti! Finalmente ho trovato una soluzione.

Aggiunta del codice seguente a ViewController con UISearchBar.

1. Primo passo: viewDidLoad

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

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

2. Secondo passo: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
    }

In Objective-C

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

Questo è successo anche a me, tutto funziona bene in iOS 12.4 e diventa strano in 13 sopra. Il problema è nell'aumento dell'altezza della barra di navigazione di iOS 13 da 88 a 100 dopo il salto da UIViewController che implementa searchBar.

Prova questo nel tuo UIViewController che implementa searchBar.

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

Anteprima dopo il fissaggio:

Anteprima prima del fissaggio:

EDIT: la risposta @zgjie è una soluzione migliore per questo problema: https://stackoverflow.com/a/46356265/1713123

Sembra che ciò accada perché in iOS 11 il valore di altezza predefinito di SearchBar è stato modificato in 56, invece di 44 nelle versioni iOS precedenti.

Per ora, ho applicato questa soluzione alternativa, impostando l'altezza di searchBar su 44:

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

Un'altra soluzione potrebbe essere utilizzare la nuova proprietà searchController su navigationItem in iOS 11 :

navigationItem.searchController = searchController

Ma in questo modo da searchBar appare sotto il titolo di navigazione.

Tutta la soluzione non ha funzionato per me, quindi prima di spingere il controller di visualizzazione ho fatto:

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

    self.navigationItem.titleView = UIView()
}

E per rendere presente la barra di ricerca quando torni indietro:

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

    self.navigationItem.titleView = UISearchBar()
}

Non potevo usare la soluzione di mantenere il navBar a 44. Quindi mi ci è voluto un giorno, ma alla fine ho trovato una soluzione che non cambia l'altezza della barra e posiziona il pulsante al centro della barra. Il problema è che i pulsanti sono posizionati in una vista pila che è configurata come vista pila orizzontale e quindi non si adatta alla variazione di altezza.

Questo viene fatto su 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 (o in qualsiasi momento dopo che la vista è stata aggiunta allo stack di navigazione)

   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];
        }
    }

E subviewOfClass è una categoria su 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;
}

Tutto quello che devi fare è sottoclassare UISearchBar e sovrascrivere "intrinsicContentSize":

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

Impossibile commentare, ma volevo condividere alcuni problemi aggiuntivi che ho riscontrato mentre trascorrevo molte ore cercando di arrivare alla fine di questo problema anche dopo aver utilizzato una delle altre soluzioni.

Sembra che la soluzione migliore per me sia stata la risposta di 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
}

Tuttavia, almeno in iOS 12.1 , se UINavigationBar:

• è isTranslucentimpostato su false, il controller di visualizzazione con la barra di ricerca sembra non ripristinare il layout della visualizzazione quando viene chiuso in modo interattivo (il normale licenziamento tramite il pulsante Indietro sembra funzionare).
• ha la sua immagine di sfondo impostata usando setBackgroundImage(UIImage(), for: .default), l'animazione di transizione non funziona correttamente e tornerà alla sua posizione dopo aver terminato.

Queste proprietà particolari sono state impostate per far sì che la barra di navigazione appaia in un certo modo, quindi ho bisogno di apportare alcune modifiche per ripristinarla o sopportare il comportamento strano. Cercherò di ricordarmi di aggiornare quanto sopra se mi imbatto in qualcos'altro o trovo altre soluzioni o differenze in altre versioni del sistema operativo.

Nel mio caso, l'altezza di UINavigationBar maggiore non era un problema per me. Avevo solo bisogno di riallineare gli elementi dei pulsanti della barra sinistra e destra. Questa è la soluzione che ho trovato:

- (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;
            }
        }
    }
}

Fondamentalmente, cerchiamo viste stack che contengono elementi del pulsante della barra e quindi cambiamo i valori dei vincoli superiore e inferiore. Sì, è un trucco sporco e non consiglierò di usarlo se puoi risolvere il tuo problema in qualsiasi altro modo.

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

Ho scoperto che la soluzione di Mai Mai è l'unica realmente utilizzabile.
Tuttavia non è ancora perfetto:
quando si ruota il dispositivo, la barra di ricerca non viene ridimensionata correttamente e rimane nella dimensione più piccola.

Ho trovato una soluzione per questo. Ecco il mio codice in Objective C con le parti rilevanti annotate:

// 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

Ora c'è ancora un caso che non ho ancora scoperto. Per riprodurre, procedi come segue:
- inizia in verticale
- attiva il campo di ricerca
- ruota in orizzontale
- errore: la barra non si ridimensiona

Ho risolto questo problema aggiungendo il vincolo a viewDidAppear sul controller della visualizzazione mappa in cui è incorporata la barra di ricerca

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

Ciao alla gente che utilizza UISearchControllere quindi collegare la sua UISearchBaral navigationItem.titleView. Ho speso 4-5 ore folli della mia giornata per risolvere questo problema. In seguito alla iOS 11+ raccomandato approccio, che sta mettendo la searchControlleralla navigation.searchControllernon è giusto per il mio caso. La schermata che ha questo searchController / searchBar ha un backButton, uno personalizzato.

L'ho testato su iOS 10, iOS 11 e 12. In diversi dispositivi. Ho solo dovuto. Non posso tornare a casa senza risolvere questo demone. Questo è il massimo che potrei fare per oggi, data la mia stretta scadenza.

Quindi voglio solo condividere questo duro lavoro che ho fatto, sta a te mettere tutto dove vuoi (es. Variabili nel tuo viewModel). Eccolo:

Nella mia prima schermata (ad esempio schermata iniziale, che non ha questo controller di ricerca), ho questo nel mio file viewDidLoad().

self.extendedLayoutIncludesOpaqueBars = true

Nella mia seconda schermata, quella che ha il searchController, ho questo nel mio viewDidAppear.

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

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

ed ecco la mia dichiarazione di 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
}()

Quindi spero che questo aiuti qualcuno un giorno.

Ho provato varie cose per riportare la dimensione all'originale 44, ma poi la barra di ricerca sembra e si comporta sempre in modo strano, come essere troppo allungata, offset y e simili.

Ho trovato una bella soluzione qui (tramite qualche altro post di stackoverflow): https://github.com/DreamTravelingLight/searchBarDemo

Basta derivare il tuo viewcontroller da SearchViewController e includere nel tuo progetto le classi SearchViewController e WMSearchbar. Ha funzionato fuori dagli schemi per me senza alcun brutto se (iOS11) altro ... brutto.

Nel mio caso, devo diminuire l'altezza del textField di 36pt -> 28pt.

Quindi ho provato a cambiare l'altezza della cornice, l'altezza del livello. Ma i modi non hanno funzionato.

Finalmente ho trovato una soluzione che è la maschera. Penso, non è un buon modo ma funziona.

    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
    }

Puoi cambiare gli inserti, se vuoi cambiare la cornice del textField.