web-dev-qa-db-fra.com

Barre de recherche iOS 11 dans la barre de navigation

Avec iOS 11, Apple a redessiné la barre UISearchBar en rendant les angles plus arrondis et la hauteur plus grande. Ajouter un UISearchBar à la navigationBar est assez simple, il suffit de le définir comme titleView de navigationItem à l'aide de navigationItem.titleView = searchBar.

Cependant, sous iOS 11, il ne semble plus fonctionner comme prévu. Regardez les écrans où nous comparons la même configuration avec iOS 10 et iOS 11

iOS 10 enter image description here

iOS 11 enter image description here

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

Placer le searchBar dans une vue wrapper pour obtenir le bouton d'annulation sur l'iPad comme décrit ici le bouton Annuler n'est pas affiché dans UISearchBar ne semble plus fonctionner car le searchBar n'est alors pas visible du tout.

Si quelqu'un a des problèmes similaires ou sait déjà comment résoudre/améliorer ceci, je serais très reconnaissant.

Cela a été construit en utilisant Xcode 9 Beta 4. Peut-être que les versions futures vont résoudre ce problème.

UPDATE:

Comme cela ne se corrige pas, nous avons décidé d'utiliser la solution suivante. Nous avons ajouté un nouvel UIBarButtonItem à la barre de navigation, qui présente ensuite un nouveau ViewController dans lequel nous mettons uniquement une barre de recherche et rien d'autre dans la barre de navigation qui semble fonctionner. Utiliser la réponse sélectionnée peut être la meilleure solution car Apple avec iOS 11 veut que nous utilisions ce nouveau design même s’il ne nous donne pas le résultat que nous souhaitions à l’origine. Un autre moyen de résoudre ce problème pourrait être une barre de recherche personnalisée, mais ceci est un autre sujet.

uinavigationbaruisearchbarios11
69
PatrickDotStar

Il existe une nouvelle propriété searchController sur navigationItem 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, *)) {

Sur iOS 11, si vous ne définissez pas navigationItem.hidesSearchBarWhenScrolling = false, la barre de recherche peut initialement être masquée, à moins que l'utilisateur ne fait défiler l'écran vers le bas pour le révéler. Si vous le définissez sur false, il apparaît empilé en dessous du titre sans que l'utilisateur ait à faire défiler.

51
Justin Domnitz

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

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

Cette page mène à ce dépôt git - https://github.com/DreamTravelingLight/searchBarDemo - Ce projet de démonstration montre comment utiliser l'ancienne méthode avec titleView pour conserver un searchBar sans problème de dimensionnement.

Les lignes clés sont ces

_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 incorporez la barre UISearchBar dans une vue et définissez cette vue wrap comme titleView, la taille de la barre UISearchBar sera la même que celle que vous avez définie et correspondra à la barre de navigation.

Merci David

4
David Schechter

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;
    }
1
Raunak

Si vous voulez vraiment utiliser le UISearchBar natif (et éviter de créer vos composants personnalisés) dans iOS 11+ navigationBar, vous pouvez créer un conteneur. afficher pour que searchBar ait le plein contrôle du cadre. Cette vue de conteneur serait la vue d'ensemble du searchBar que vous transmettez.

quelque chose comme:

class SearchBarContainerView: UIView {

    let searchBar: UISearchBar

    required init?(coder aDecoder: NSCoder) {
        searchBar = UISearchBar()
        super.init(coder: aDecoder)
    }

    init(searchBar: UISearchBar) {
        self.searchBar = searchBar
        super.init(frame: CGRect(x: 0.0, y: 0.0, width: 0.0, height: 44.0))
        addSubview(searchBar)
    }

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

et ensuite:

let containerView = SearchBarContainerView(searchBar: searchController.searchBar)
containerView.frame.size.width = navigationController?.navigationBar.frame.size.width ?? 0.0
navigationItem.titleView = containerView

Note Il s’agit simplement d’une démonstration rapide et elle n’est pas prête pour les changements de trame navigationBar (rotation de l’affichage, etc.). Vous pouvez résoudre cela avec, par exemple, autoresizingMask.

1
Jakub Truhlář

Je pense que vous devrez régler la nouvelle propriété UINavigationItem.searchController sur votre objet UISearchController. C'est ainsi que vous obtenez le nouvel effet tel qu'il apparaît dans Messages. On dirait que l'ancien comportement est tout simplement parti. J'espère que je me trompe, mais l'ensemble de l'API a subi une refonte complète pour 11. Je sais que c'est un buggy en général, donc nous verrons de nouvelles bêtas et le GM si cela est corrigé. (Écriture au moment de la bêta 6)

1
cook