La adición de UISearchBar mediante programación a UITableView

Estoy intentando agregar un UISearchBar (con su correspondiente lógica de búsqueda), pero hay un problema: estoy utilizando el UITableViewController subclase generado automáticamente UITableView en lugar de una por separado nib archivo, y la manipulación de todo mediante programación en términos de la vista de tabla.

En el Interface Builder, hay una opción para agregar un Barra de Búsqueda y Búsqueda de Controlador de Pantalla de a un nib. Es allí una manera de realizar esta misma tarea mediante programación o es a mi favor para abandonar el defecto UITableView y la transferencia a un programa personalizado de UITableView archivo nib para que yo pueda agregar fácilmente el UISearchbar?

También, he tratado de probar sólo la adición de una Barra de Búsqueda a mi UITableView encabezado (que es donde yo quiero que vaya) mediante el siguiente código en mi viewDidLoad la aplicación, sino que se muestra detrás de la mesa, cabecera de la sección y por lo tanto es invisible a menos que la tabla se desplaza hacia abajo para mostrar lo que sería el espacio en blanco. ¿Qué pasa con esto?

UISearchBar *testbar = [[UISearchBar alloc] init];

[[self tableView] setTableHeaderView:testbar];
InformationsquelleAutor Gary Hedren | 2011-08-04

4 Kommentare

  1. 21

    Establecer el marco para la UISearchBar:

    //Change the position according to your requirements
    self.searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 70, 320, 44)];

    Si su punto de vista es una subclase de UITableViewController, cambiar a UIViewController.

    • En su archivo nib, crear una vista y arrastre el formato tableview en virtud de que
      ver y cambiar la clase de referencia para que vista a su
      UIViewController.

    • Crear un IBOutlet de UITableView * myTableView y conectarlo a
      su archivo nib. sólo se necesita cambiar en su VC archivo por ejemplo de auto para [self.myTableView reloadData];

    Ahora usted puede ajustar el tableView y la barra de búsqueda en la punta de sí mismo.

    UISearchDisplay controlador tiene su propio UITableView que muestra los resultados de una búsqueda de los datos administrados por el otro controlador de vista. Aquí el searchDisplaycontroller combina la barra de búsqueda y en formato tableview para mostrar el resultado de los datos en el formato tableview por lo que no requiere un formato tableview.

    • Yo uso la (0, 0, 320, 44)
    • hmm por lo que este solucionado el problema? es por eso que me dijo para Cambiar la posición de acuerdo a su requerimiento. he actualizado mi respuesta así 🙂
    • Lo siento, escribí el comentario rápidamente. Lo que yo quería decir es que (0, 0, 320, 44) es el único marco posible, como el encabezado de tabla de la vista que siempre se coloca arriba a la izquierda y toma todo el ancho, y el UISearchBar es siempre 44px altura. Usted puede establecer lo que quiera, va a tener este marco
    • he editado mi respuesta. leer de nuevo.
    • Agrega innecesariamente el proceso, he reproducido su problema y funciona : UISearchBar *testbar = [[UISearchBar alloc] initWithFrame:CGRectMake(0,170,320,44)]; [[auto en formato tableview] setTableHeaderView:testbar];
    • En mi primera respuesta me dijo que para cambiar el marco, a continuación, usted dijo que «encabezado de tabla de la vista que siempre se coloca arriba a la izquierda y toma todo el ancho, y el UISearchBar es siempre 44px altura.» así que yo le di a la segunda opción. no he dicho en mi respuesta que usted debe quitar [[auto en formato tableview] setTableHeaderView:testbar];
    • Hola, gracias por la ayuda, que sin duda aparece en el lugar correcto ahora (aunque siempre estoy cansado de usar CGRectMakes sobre los métodos de delegado si puedo. De todos modos, he hecho un poco de mirar a su alrededor y parece que UITableView tiene un built-in UISearchDisplay controlador, por lo que yo debería ser capaz de aprovechar y olvidarse de Interface Builder, haga?
    • como usted dijo «parece que UITableView tiene un built-in UISearchDisplay controlador» es incorrecto. UISearchDisplay controlador ha de búsqueda en formato tableview que muestra los resultados de una búsqueda de los datos administrados por el otro controlador de vista. Aquí el searchDisplaycontroller combina la barra de búsquedas y en formato tableview que muestra el resultado de los datos en el formato tableview por lo que no requiere por separado en formato tableview. lo Siento, no mencionar esta descripción en mi respuesta para hacerla más clara, cómo funciona.. 🙂
    • Esta respuesta de las grandes obras de la búsqueda que no tiene searchDisplayController. Porque si se ha de búsqueda, barra tiene un color de fondo gris. ¿Conoces alguna solución para quitar ese fondo?

  2. 74

    Para agregar un UISearchBar a un UITableView hay estas cosas para hacer:

    • Declarar e inicializar UISearchBar
    • Declarar e inicializar el UISearchDisplayController
    • Agregar la barra de búsquedas para el formato tableview
    • Implementar el UISearchDisplayController delegado
    • En el archivo de encabezado declaro mi barra de búsquedas, searchDisplayController y las matrices que contienen los datos a mostrar.

    ViewController.h:

    #import 
    
    @interface ViewController : UITableViewController
    {
        NSArray *originalData;
        NSMutableArray *searchData;
    
        UISearchBar *searchBar;
        UISearchDisplayController *searchDisplayController;
    }
    
    @end

    También he añadido 2 delegados a la clase: UISearchBarDelegate y UISearchDisplayDelegate, sin que la barra de búsquedas, simplemente no funciona!

    Inicializar los datos:

    //ViewController.m
    
    - (id)initWithStyle:(UITableViewStyle)style
    {
        self = [super initWithStyle:style];
        if (self) {
            NSArray *group1 = [[NSArray alloc] initWithObjects:@"Napoli", @"Juventus", @"Inter", @"Milan", @"Lazio", nil];
            NSArray *group2 = [[NSArray alloc] initWithObjects:@"Real Madrid", @"Barcelona", @"Villareal", @"Valencia", @"Deportivo", nil];
            NSArray *group3 = [[NSArray alloc] initWithObjects:@"Manchester City", @"Manchester United", @"Chelsea", @"Arsenal", @"Liverpool", nil];
    
            originalData = [[NSArray alloc] initWithObjects:group1, group2, group3, nil];
            searchData = [[NSMutableArray alloc] init];
        }
        return self;
    }

    Ahora tenemos que inicializar nuestro objeto dos, me comentó el código para explicar lo que quiero hacer:

    //ViewController.m
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    /*the search bar widht must be > 1, the height must be at least 44
    (the real size of the search bar)*/
    
        searchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];
    /*contents controller is the UITableViewController, this let you to reuse
    the same TableViewController Delegate method used for the main table.*/
    
        searchDisplayController.delegate = self;
        searchDisplayController.searchResultsDataSource = self;
    //set the delegate = self. Previously declared in ViewController.h
    
        self.tableView.tableHeaderView = searchBar; //this line add the searchBar
                                                    //on the top of tableView.
    }

    Decidí no ir a la parte sobre el formato tableview de células de la inicialización, se puede encontrar en el código fuente descargable. 🙂

    Cuando el formato tableview está listo es el momento de implementar la UISearchDisplayControllerDelegate!

    El delegado tiene muchos métodos para el control de cada aspecto de la búsqueda, pero el más importante es

    - (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString

    Este método es llamado cada vez que se inserte un nuevo carácter en la barra de búsquedas, usted tendrá la searchString, realizar la búsqueda a través de los elementos de la tabla y volver en SÍ.

    - (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString
    {
        [searchData removeAllObjects];
        /*before starting the search is necessary to remove all elements from the
          array that will contain found items */
    
        NSArray *group; 
    
    /* in this loop I search through every element (group) (see the code on top) in
    the "originalData" array, if the string match, the element will be added in a
    new array called newGroup. Then, if newGroup has 1 or more elements, it will be
    added in the "searchData" array. shortly, I recreated the structure of the
    original array "originalData". */
    
        for(group in originalData) //take the n group (eg. group1, group2, group3)
                                   //in the original data
        {
            NSMutableArray *newGroup = [[NSMutableArray alloc] init];
            NSString *element;
    
            for(element in group) //take the n element in the group
            {                    //(eg. @"Napoli, @"Milan" etc.)
                NSRange range = [element rangeOfString:searchString
                                         options:NSCaseInsensitiveSearch];
    
                if (range.length > 0) { //if the substring match
                    [newGroup addObject:element]; //add the element to group
                }
            }
    
            if ([newGroup count] > 0) {
                [searchData addObject:newGroup];
            }
    
            [newGroup release];
        }
    
        return YES;
    }

    ¡Eso es todo! Este método se realiza una búsqueda de texto completo en todo el elemento. Al final de la búsqueda del formato tableview de recarga de sí mismo. Ver el código fuente para ver otros detalles.

    Descargar archivo fuente (Link ACTUALIZADO! (04.01.2016) )

    • En viewDidLoad tengo que incluir esta línea también: searchDisplayController.searchResultsDataSource = auto; de lo contrario formato tableview es no recargar shouldReloadTableForSearchString
    • Link de descarga roto.
    • Puede usted proporcionar activo el enlace para descargar el código?
    • Lo siento pero he perdido el código de ejemplo y el sitio web no está más en línea 🙁
    • ACTUALIZACIÓN: he encontrado código de ejemplo en mi viejo hardisk! 🙂 Aquí es: aurealab.net/minux/UISearchBarSample.zip
    • De esta manera está en desuso en favor de UISearchController
    • UISearchDisplayController es depricated de iOS8, así que ahora tenemos que usar UISearchController. stackoverflow.com/questions/33711358/…

  3. 2

    Implementar - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section. Esto va a resolver el problema de la sección Etiqueta que cubre la headerView

  4. 1

    en swift:

        let searchController = UISearchController(searchResultsController: nil)
    
        let topConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 40)
        let leftConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Left, multiplier: 1, constant: 0)
        let rightConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Right, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 0)
        let heightConstraint = NSLayoutConstraint(item: searchController.searchBar, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 44)
        searchController.searchBar.translatesAutoresizingMaskIntoConstraints = false
    
        searchController.searchBar.addConstraint(heightConstraint)
    
        searchController.searchBar.placeholder = "Search Here"
        searchController.searchResultsUpdater = self
        searchController.searchBar.delegate = self
    
        self.view.addSubview(searchController.searchBar)
    
        self.view.addConstraints([topConstraint, leftConstraint, rightConstraint])

    agregar delegado:

        class ViewController: UIViewController, UISearchBarDelegate

    ahora agregar a delegado método para volver a cargar la vista de la tabla:

        func searchBarTextDidBeginEditing(searchBar: UISearchBar) {
            //add your custome code here after search a string
            tableView.reloadData()
        }
    
        func searchBarTextDidEndEditing(searchBar: UISearchBar) {
            //add your custome code here after finishing search 
            tableView.reloadData()
    
        }

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea