Agregar botón a la izquierda de UISearchBar

Question

Me estoy arrancando los pelos en este caso. Mi cliente quiere añadir un botón a la izquierda de una barra de búsqueda como el ejemplo a continuación:

alt text http://www.erik.co.uk/images/IMG_0008.PNG

Pero simplemente no puede encontrar la manera de hacerlo. Apple no parece proporcionar ningún método documentado para agregar botones personalizados a un UISearchBar, y mucho menos a la izquierda de la barra de búsqueda.

He intentado hackear en Interface Builder agregando una UIToolbar con un botón a la izquierda pero no encuentro ninguna combinación de estilos donde los dos se alineen correctamente para dar la impresión de que son uno. Siempre hay algo que parece una diferencia de pixel en la alineación vertical, como se puede ver en la imagen siguiente:

alt text http://www.erik.co.uk/images/verticalalignment.png

He buscado alrededor y simplemente no puede encontrar la respuesta, pero como podemos ver de la captura de pantalla debe ser posible!

Gracias de antemano por su ayuda.

Erik

Answer 1

Utilice la barra de navegación una vez de una barra de herramientas. Establezca la barra de búsqueda en la vista de título de la barra de navegación.

En Interface Builder:

Resultado:

Answer 2

La solución más sencilla es añadir su SearchBar en parte superior de su barra de herramientas, (no dentro), te la dan La mejor solución que uso en mi empresa eBuildy:

UIBarButtonItem *mySettingsButton = [[UIBarButtonItem alloc] initWithTitle:@"Settings" style:UIBarButtonItemStyleBordered target:self action:@selector(refresh)]; 
UIBarButtonItem *mySpacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil]; 
UIBarButtonItem *myRefreshButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refresh)]; 
UIToolbar *myTopToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0,0,320,40)]; 
UISearchBar *mySearchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(70,1,220,40)]; 

[myTopToolbar setItems:[NSArray arrayWithObjects:mySettingsButton,mySpacer,myRefreshButton, nil] animated:NO]; 
[self.view addSubview:myTopToolbar]; 
[self.view addSubview:mySearchBar]; 

Answer 3

La primera solución es usar UINavigationBar en lugar de UIToolbar, como notó KennyTM. Pero puede que no esté satisfecho con la barra de navegación, como en mi caso, cuando necesito usar 3 botones (la barra de navegación permite usar solo 2 botones) - vea la imagen de la izquierda. Esto es cómo lo hice:

1. Uso Toolbar con 3 botones y Flexible Space Bar Button Item en el lugar donde la barra de búsqueda debe ser colocado.
2. Poner la barra de búsqueda en (no en) la barra de herramientas. Para hacerlo en Interface Builder, no arrastre & suelte la barra de búsqueda en la barra de herramientas. En su lugar, colóquelo en algún lugar cercano y luego muévalo para colocarlo usando las teclas de flecha del teclado (o cambiando X & posición Y en Interface Builder).
3. Barra de búsqueda a la izquierda de la línea negra debajo de ella (ver la imagen de la derecha). Para ocultarlo pongo una vista adicional con la altura 1px y un fondo blanco sobre ella.

Parece un poco sucio para mí, así que si tiene una solución mejor, hágamelo saber.

Answer 4

respondiendo a una vieja pregunta aquí, pero he tenido problemas con esto yo recientemente y ha encontrado algunas deficiencias con las otras respuestas para la situación en que estaba tratando de abordar. esto es lo que hice en una subclase de UISearchBar:

primero agregue una propiedad UIButton (aquí "selectButton"). a continuación, reemplazar el método initWithFrame y hacer algo similar a lo siguiente:

-(id)initWithFrame:(CGRect)frame{ 
if (self = [super initWithFrame:frame]) 
{ 
    self.selectButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; 
    self.selectButton.contentEdgeInsets = (UIEdgeInsets){.left=4,.right=4}; 
    [self.selectButton addTarget:self action:@selector(pressedButton:) forControlEvents:UIControlEventTouchUpInside]; 

    self.selectButton.titleLabel.numberOfLines = 1; 
    self.selectButton.titleLabel.adjustsFontSizeToFitWidth = YES; 
    self.selectButton.titleLabel.lineBreakMode = UILineBreakModeClip; 

    [self addSubview:self.selectButton]; 
    [self.selectButton setFrame:CGRectMake(5, 6, 60, 31)]; 
} 

return self; 
} 

ahora quiere reemplazar el método subvistas de diseño para cambiar el tamaño de la barra de búsqueda a la anchura apropiada, en función de si o no el botón de cancelación está mostrando. Eso debería ser algo como esto:

-(void)layoutSubviews 
{ 
[super layoutSubviews]; 

float cancelButtonWidth = 65.0; 
UITextField *searchField = [self.subviews objectAtIndex:1]; 

if (self.showsCancelButton == YES) 
    [searchField setFrame:CGRectMake(70, 6, self.frame.size.width - 70 - cancelButtonWidth, 31)]; 
else 
    [searchField setFrame:CGRectMake(70, 6, self.frame.size.width - 70, 31)]; 
} 

Tenga en cuenta que en el método anterior añadí una constante para el cancelButtonWidth. Traté de agregar código para obtener el ancho de [self cancelButton] pero parece que solo es accesible en tiempo de ejecución y no permite la compilación del proyecto. En cualquier caso, este debería ser un buen comienzo para lo que necesita

Answer 5

En su lugar, puede reemplazar la imagen del marcador y ajustar su compensación si es necesario.
Por ejemplo:

[self.searchDisplayController.searchBar setImage:[UIImage imageNamed:@"plus2"] forSearchBarIcon:UISearchBarIconBookmark state:UIControlStateNormal]; 
[self.searchDisplayController.searchBar setPositionAdjustment:UIOffsetMake(-10, 0) forSearchBarIcon:UISearchBarIconBookmark]; 

controlar el evento botón en el método delegado:

- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar

Esto es como se ve:

Answer 6

Si desea una botón personalizado a la derecha, teniendo lugar el Cancel botón, sólo tiene que utilizar el código (válido para iOS 9 en adelante):

[self.searchBar setShowsCancelButton:YES]; 
[[UIBarButtonItem appearanceWhenContainedIn:[self.searchBar class], nil] setTitle:@""]; 
[[UIBarButtonItem appearanceWhenContainedIn:[self.searchBar class], nil] setImage:[UIImage imageNamed:@"search"]]; 

Answer 7

Con un poco de inspiración de las respuestas anteriores el método más limpio que he encontrado para iOS 9 y superior: simplemente lugar la barra de búsqueda en una pila horizontal vista y dejar que la pila no es magia, a continuación, puede añadir tantos botones como te gusta a la izquierda oa la derecha fácilmente

UIStackView *searchStack = [[UIStackView alloc] initWithFrame:searchBar.frame]; 
    searchStack.axis = UILayoutConstraintAxisHorizontal; 
    UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeContactAdd]; 
    [searchStack addArrangedSubview:leftButton]; 
    [searchStack addArrangedSubview:searchBar]; 
    self.tableView.tableHeaderView = searchStack;