iOS 11 : barre de recherche dans la barre de navigation

Question

Avec iOS 11, Apple a redessiné la barre UISearchBar en arrondissant les angles et en augmentant la hauteur. L'ajout d'une UISearchBar à la barre de navigation est assez simple : il suffit de la définir comme titleView de l'élément de navigation à l'aide de la commande navigationItem.titleView = searchBar .

Cependant, dans iOS 11, cela ne semble plus fonctionner comme prévu. Jetez un coup d'œil aux écrans où nous comparons la même configuration sous iOS 10 et iOS 11.

iOS 10

iOS 11

Vous pouvez clairement voir que la SearchBar augmente la taille de la NavigationBar mais que les boutons de la barre ne sont pas alignés correctement. De plus, la barre de recherche n'utilise plus l'espace disponible sur la gauche.

Placez la barre de recherche dans une vue enveloppante pour obtenir le bouton d'annulation sur l'iPad, comme décrit ici. Le bouton d'annulation n'apparaît pas dans la barre de recherche UISearchBar. ne semble pas non plus fonctionner puisque la barre de recherche n'est alors plus visible du tout.

Si quelqu'un a des problèmes similaires ou sait déjà comment réparer/améliorer ce problème, je lui en serai très reconnaissant.

Il a été construit en utilisant Xcode 9 Beta 4. Peut-être que les futures versions corrigeront ce problème.

UPDATE :

Comme ce problème n'est pas résolu, nous avons décidé d'utiliser la solution suivante. Nous avons ajouté un nouvel élément UIBarButtonItem à la barre de navigation qui présente ensuite un nouveau ViewController dans lequel nous avons uniquement placé une barre de recherche et rien d'autre dans la barre de navigation, ce qui semble fonctionner. L'utilisation de la réponse sélectionnée est peut-être la meilleure solution puisque Apple, avec iOS 11, veut que nous utilisions ce nouveau design même s'il ne nous donne pas le résultat que nous voulions à l'origine. Une autre façon de résoudre ce problème pourrait être une barre de recherche personnalisée, mais c'est un autre sujet.

Answer 1

Une nouvelle propriété de searchController sur navigationItem est disponible dans iOS 11.

https://developer.apple.com/documentation/uikit/uinavigationitem/2897305-searchcontroller

Utilisez comme ça...

if #available(iOS 11.0, *) {
     navigationItem.searchController = searchController
} else {
     // Fallback on earlier versions
     navigationItem.titleView = searchController?.searchBar
}

En Objective-C, l'instruction if ressemble à ceci :

if (@available(iOS 11.0, *)) {

Sous iOS 11, si vous ne définissez pas le paramètre navigationItem.hidesSearchBarWhenScrolling = false la barre de recherche peut être initialement cachée, à moins que l'utilisateur ne la fasse défiler pour la faire apparaître. Si vous lui attribuez la valeur false, elle apparaît empilée sous le titre, sans que l'utilisateur doive la faire défiler.

Answer 2

Vous pouvez modifier la hauteur de UISearchBar dans iOS 11 en ajoutant une contrainte de hauteur 44 :

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

Answer 3

J'ai eu le même problème et après quelques jours de recherche sur Internet, j'ai trouvé cette page https://translate.google.com/translate?hl=en&sl=zh-CN&u=http://www.jianshu.com/p/262f6e34a7d3&prev=search .

Cette page mène à ce repo git - https://github.com/DreamTravelingLight/searchBarDemo - Ce projet de démonstration montre comment utiliser l'ancienne méthode avec titleView pour avoir une barre de recherche sans le problème de taille.

Les lignes clés sont les suivantes

_searchBar = [self addSearchBarWithFrame:CGRectMake(0, 0, kScreenWidth - 2 * 44 - 2 * 15, 44)];
UIView *wrapView = [[UIView alloc] initWithFrame:_searchBar.frame];
[wrapView addSubview:_searchBar];
self.navigationItem.titleView = wrapView;

Si vous intégrez l'UISearchBar dans une vue et que vous définissez cette wrapView comme titleView, l'UISearchBar aura la taille que vous lui avez définie et s'adaptera à la barre de navigation comme prévu.

Merci, David

Answer 4

Je pense que vous devrez vous contenter de définir la nouvelle propriété UINavigationItem.searchController sur votre objet UISearchController. C'est ainsi que vous obtenez le nouvel effet tel qu'il est présenté dans Messages. Il semble que l'ancien comportement ait tout simplement disparu. J'espère me tromper, mais toute l'API a été remaniée pour la version 11. Je sais qu'il y a des bogues en général, donc nous verrons avec les nouvelles bêtas et le GM si cela sera corrigé. (Écrit au moment de la bêta 6)

Answer 5

Cela m'a aidé :

    if ([self.navigationItem respondsToSelector:@selector(setSearchController:)])
    {
        [self.navigationItem performSelector:@selector(setSearchController:) withObject:self.searchController];
    }
    else
    {
        self.tableView.tableHeaderView = self.searchController.searchBar;
    }