uinavigationbar - large - iOS 11 SearchBar en NavigationBar

large titles navigation bar

Question

Con iOS 11, Apple ha rediseñado la UISearchBar al hacer que las esquinas sean más redondeadas y la altura sea más grande. Agregar una UISearchBar a la barra de navegación es bastante simple simplemente configurándolo como titleView de navigationItem usando navigationItem.titleView = searchBar .

Sin embargo, en iOS 11 ya no parece funcionar como se esperaba. Eche un vistazo a las pantallas donde comparamos la misma configuración con iOS 10 y iOS 11

iOS 10

iOS 11

Puede ver claramente que la barra de búsqueda aumenta el tamaño de la barra de navegación, pero los botones de la barra no se alinean correctamente. Además, la barra de búsqueda ya no usa el espacio disponible a la izquierda.

Poner la barra de búsqueda en una vista de contenedor para obtener el botón de cancelación en iPad como se describe aquí El botón de cancelación ya no se muestra en UISearchBar ya no parece funcionar ya que la barra de búsqueda no es visible en absoluto.

Si alguien tiene problemas similares o ya sabe cómo solucionar / mejorar esto, estaría muy agradecido.

Esto se creó con Xcode 9 Beta 4. Tal vez las futuras versiones solucionen este problema.

ACTUALIZAR:

Como esto no se soluciona, decidimos usar la siguiente solución. Agregamos un nuevo UIBarButtonItem al NavBar que luego presenta un nuevo ViewController donde solo ponemos un searchBar y nada más en el NavBar que parece funcionar. El uso de la respuesta seleccionada puede ser la mejor solución ya que Apple con iOS 11 quiere que usemos este nuevo diseño, incluso si no nos da el resultado que originalmente queríamos. Otra forma de resolver esto podría ser una barra de búsqueda personalizada, pero este es otro tema.

Answer 1

Creo que tendrá que lidiar con la configuración de la nueva propiedad UINavigationItem.searchController para su objeto UISearchController. Así es como obtienes el nuevo efecto como se ve en Mensajes. Parece que el viejo comportamiento simplemente desapareció. Espero estar equivocado, pero toda la API tuvo una revisión general para 11. Sé que es defectuoso en general, así que veremos con versiones beta más recientes y el GM si esto se soluciona. (Escritura en el momento de la Beta 6)

Answer 2

Estaba teniendo el mismo problema y después de unos días buscando en Google, encontré esta página: https://translate.google.com/translate?hl=en&sl=zh-CN&u=http://www.jianshu.com/p/262f6e34a7d3&prev=search .

Esta página lleva a este repositorio de git: https://github.com/DreamTravelingLight/searchBarDemo : este proyecto de demostración muestra cómo usar la forma antigua con titleView para tener una barra de búsqueda sin el problema del tamaño.

Las líneas clave son estas

_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 incrusta la UISearchBar dentro de una vista y establece esa wrapView como titleView, la UISearchBar tendrá el tamaño que configuró y se ajustará a la barra de navegación según lo previsto.

Gracias david

Answer 3

Esto me ayudó a:

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

Answer 4

Hay una nueva propiedad searchController en navigationItem en iOS 11.

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

Usar así ...

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

En Objective-C, la declaración if se ve así:

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

En iOS 11, si no configura navigationItem.hidesSearchBarWhenScrolling = false , la barra de búsqueda puede estar inicialmente oculta, a menos que el usuario se desplace hacia abajo para revelarla. Si lo configura en falso, aparece apilado debajo de donde iría el título sin que el usuario tenga que desplazarse.

Answer 5

Puede cambiar la altura de UISearchBar en iOS 11 agregando una restricción de altura 44:

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

Answer 6

Si realmente desea utilizar la UISearchBar nativa (y evitar las necesidades de crear sus componentes personalizados) en la barra de navigationBar iOS 11+, puede crear una vista de contenedor para que esa searchBar de searchBar tenga control total sobre el marco. Esta vista de contenedor sería la vista general de la barra de searchBar que pasa.

Algo como:

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

Y entonces:

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

Tenga en cuenta que esta es solo una demostración rápida y no está lista para la navigationBar Cambios en el marco de la barra (rotación de la pantalla, etc.). Puede resolver eso con, por ejemplo, autoresizingMask .