iphone - example - uisearchbardelegate

Agregando el botón a la izquierda de UISearchBar

Question

Estoy arrancándome el pelo en este caso. Mi cliente desea agregar un botón a la izquierda de una barra de búsqueda como el siguiente ejemplo:

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

Pero simplemente no puedo averiguar cómo hacerlo. Parece que Apple no proporciona ningún método documentado para agregar botones personalizados a una barra UISearch, y mucho menos a la izquierda de la barra de búsqueda.

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

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

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

Gracias de antemano por su ayuda.

Erik

Answer 1

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

1. Use la Toolbar con 3 botones y el Flexible Space Bar Button Item de la barra espaciadora Flexible Space Bar Button Item en el lugar donde se debe colocar la barra de búsqueda.
2. Ponga la barra de búsqueda (no en) la barra de herramientas. Para hacerlo en Interface Builder , no arrastre ni 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 con las teclas de flecha del teclado (o cambiando la posición de X e Y en el Interface Builder ).
3. Barra de búsqueda izquierda 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.

Me parece un poco sucio, así que si tienes una solución mejor, avísame.

Answer 2

La solución más fácil es agregar su Barra de Búsqueda en la PARTE SUPERIOR de su Barra de Herramientas, (no en), le doy la mejor solución que utilizo 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

Puede reemplazar la imagen de marcador en su lugar, y ajustar su desplazamiento 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];

Manejar el evento de botón en el método de delegado:

- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar

Así es como se ve:

Answer 4

Respondí a una pregunta anterior aquí, pero recientemente tuve problemas con esta y encontré algunas deficiencias con las otras respuestas para la situación que estaba tratando de resolver. Esto es lo que hice en una subclase de UISearchBar:

primero agregue una propiedad UIButton (aquí "selectButton"). luego invalide el método initWithFrame y haga 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 desea anular el método de subvistas de diseño para cambiar el tamaño de la barra de búsqueda al ancho apropiado, dependiendo de si se muestra o no el botón de cancelar. Eso debería verse 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 agregué una constante para cancelButtonWidth. Intenté agregar código para obtener el ancho de [auto cancelButton] pero parece que solo es accesible en tiempo de ejecución y no permite que el proyecto se compile. En cualquier caso, este debería ser un buen comienzo para lo que necesita.

Answer 5

Si desea un botón personalizado a la derecha, al lado del botón Cancel , solo use este código (válido para iOS 9 y superior):

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

Answer 6

Utilice una barra de navegación en lugar 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: