web-dev-qa-db-fra.com

Ajout d'un bouton à gauche de UISearchBar

Je me déchire les cheveux sur celui-ci. Mon client souhaite ajouter un bouton à gauche d'une barre de recherche, comme dans l'exemple ci-dessous:

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

Mais je n'arrive pas à comprendre comment le faire. Apple ne semble fournir aucune méthode documentée pour ajouter des boutons personnalisés à une barre UISearchBar, et encore moins à la gauche de la barre de recherche. 

J'ai essayé de bidouiller dans Interface Builder en ajoutant une barre UITool avec un bouton à gauche, mais je ne trouve aucune combinaison de styles où les deux s'alignent correctement pour donner l'impression qu'ils ne font qu'un. Il y a toujours ce qui ressemble à une différence de pixel dans l'alignement vertical, comme vous pouvez le voir sur l'image ci-dessous:

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

J'ai cherché autour et je ne trouve pas la réponse, mais comme vous pouvez le voir sur la capture d'écran, cela doit être possible!

Merci d'avance pour votre aide.

Erik

iphoneuisearchbar
29
Erik Carlson

Utilisez une barre de navigation au lieu d'une barre d'outils. Définissez la barre de recherche sur la vue du titre de la barre de navigation.

Dans Interface Builder:

screenshot 1

Résultat: 

screenshot 2

39
kennytm

Vous pouvez également remplacer l'image de signet et ajuster son décalage si nécessaire. 
Par exemple:

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

Gérez l'événement button dans la méthode déléguée: 

- (void)searchBarBookmarkButtonClicked:(UISearchBar *)searchBar

Voici à quoi ça ressemble:

white tinted UISearchBar with custom bookmark image

18
Yariv

La première solution consiste à utiliser UINavigationBar au lieu de UIToolbar, comme l’a remarqué KennyTM. Mais vous n’êtes peut-être pas satisfait de la barre de navigation, comme dans mon cas, lorsque j’ai besoin d’utiliser 3 boutons (la barre de navigation n’autorise l’utilisation que de 2 boutons) - voir l’image de gauche. Voici comment je l'ai fait:

  1. Utilisez Toolbar avec 3 boutons et Flexible Space Bar Button Item à l’endroit où la barre de recherche doit être placée.
  2. Placez la barre de recherche sur (pas dans) la barre d’outils. Pour le faire dans Interface Builder, ne faites pas glisser la barre de recherche dans la barre d’outils. Au lieu de cela, placez-le quelque part à proximité, puis déplacez-le à l'aide des touches fléchées du clavier (ou en modifiant la position X et Y dans Interface Builder).
  3. La barre de recherche a laissé une ligne noire en dessous (voir la photo de droite). Pour le cacher, je mets une vue supplémentaire avec la hauteur 1px et un fond blanc dessus.

Cela semble un peu sale pour moi, alors si vous avez une meilleure solution, faites-le-moi savoir.

screenshot

8
Mike Keskinov

La solution la plus simple est d’ajouter votre barre de recherche dans le TOP de votre barre d’outils (pas dans), je vous donne la meilleure solution que j’utilise dans mon entreprise 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];
4
Thomas Decaux

je répondais à une vieille question mais je me débattais moi-même avec celle-ci récemment et je trouvais quelques lacunes avec les autres réponses à la situation que je tentais de résoudre. voici ce que j'ai fait dans une sous-classe de UISearchBar:

ajoutez d’abord une propriété UIButton (ici "selectButton"). puis substituez la méthode initWithFrame et effectuez une opération similaire à celle-ci:

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

Maintenant, vous souhaitez remplacer la méthode de présentation des sous-vues pour redimensionner la barre de recherche à la largeur appropriée, selon que le bouton Annuler est affiché ou non. Cela devrait ressembler à ceci:

-(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)];
}

Notez que dans la méthode ci-dessus, j'ai ajouté une constante pour cancelButtonWidth. J'ai essayé d'ajouter du code pour obtenir la largeur de [self cancelButton], mais cela ne semble accessible qu'à l'exécution et ne permet pas au projet de se compiler. En tout cas, cela devrait être un bon début pour ce dont vous avez besoin

3
Will Ayd

Si vous voulez un bouton personnalisé à droite, prenant la place du bouton Cancel, utilisez simplement ce code (valide pour iOS 9 et versions supérieures):

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