iphone - Come personalizzare l'aspetto di UISearchBar




(8)

Voglio personalizzare la barra di ricerca, intendo la scatola bianca. Posso farlo? C'è qualche documentazione a riguardo? C'è un modo per nascondere la scatola bianca, ma non le lettere. Posso almeno ridurre la scatola? Intendo meno altezza


Answers

// Search Bar Customization
// Background Image
[self.searchDisplayController.searchBar setBackgroundImage:[[UIImage alloc]init]];

// Backgroud Color
[self.searchDisplayController.searchBar setBackgroundColor:[UIColor redColor]];

// Search Bar Cancel Button Color
[[UIBarButtonItem appearanceWhenContainedIn: [UISearchBar class], nil] setTintColor:[UIColor whiteColor]];

// set Search Bar Search icon
[self.searchDisplayController.searchBar setImage:[UIImage imageNamed:@"search_ico.png"]
                                forSearchBarIcon:UISearchBarIconSearch
                                           state:UIControlStateNormal];

// set Search Bar textfield background image
 [[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"search_box.png"]
                                                forState:UIControlStateNormal];

// set Search Bar texfield corder radius
UITextField *txfSearchField = [self.searchDisplayController.searchBar valueForKey:@"_searchField"];
txfSearchField.layer.cornerRadius = 10.8f;

Ci sono pochi tentativi là fuori tra cui UISearchBar sottoclasse e hackerare il layoutSubviews di layoutSubviews o drawLayer: Dopo iOS 5, il metodo migliore è utilizzare UIAppearance.

// Configure your images
UIImage *backgroundImage = [UIImage imageNamed:@"searchbar"];
UIImage *searchFieldImage = [[UIImage imageNamed:@"searchfield"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];

// Set it to your UISearchBar appearance
[[UISearchBar appearance] setBackgroundImage:backgroundImage];
[[UISearchBar appearance] setSearchFieldBackgroundImage:searchFieldImage forState:UIControlStateNormal];

Ecco alcune proprietà comuni che puoi modificare per personalizzare UISearchBar:


Ecco la soluzione che stavo cercando: sottoclassi una UISearchBar e sovrascrivendo il layout del metodo

- (void)layoutSubviews {
   UITextField *searchField;
   NSUInteger numViews = [self.subviews count];
   for(int i = 0; i < numViews; i++) {
      if([[self.subviews objectAtIndex:i] isKindOfClass:[UITextField class]]) { //conform?
        searchField = [self.subviews objectAtIndex:i];
      }
   }
   if(!(searchField == nil)) {
       searchField.textColor = [UIColor whiteColor];
       [searchField setBackground: [UIImage imageNamed:@"buscador.png"] ];
       [searchField setBorderStyle:UITextBorderStyleNone];
   }

   [super layoutSubviews];
}

usa il codice seguente per rendere trasparente la tua barra di ricerca

// Set it to your UISearchBar appearance

[[UISearchBar appearance] setBackgroundColor:[UIColor clearColor]];
[[UISearchBar appearance] setBackgroundImage:backgroundImage];
[[UISearchBar appearance] setSearchFieldBackgroundImage:searchFieldImage 
                                                forState:UIControlStateNormal];

Con IOS 5.0 hai la possibilità di usare

  [[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"searchbar.png"]forState:UIControlStateNormal];


Per aggiungere un UISearchBar a un UITableView ci sono queste cose da fare:

  • Dichiara e inizializza UISearchBar
  • Dichiara e inizializza UISearchDisplayController
  • Aggiungi la barra di ricerca al TableView
  • Implementare il delegato UISearchDisplayController
  • Nel file di intestazione dichiaro la mia searchBar, searchDisplayController e gli array che contengono i dati da visualizzare.

ViewController.h:

#import 

@interface ViewController : UITableViewController
{
    NSArray *originalData;
    NSMutableArray *searchData;

    UISearchBar *searchBar;
    UISearchDisplayController *searchDisplayController;
}

@end

Ho anche aggiunto 2 delegati alla classe: UISearchBarDelegate e UISearchDisplayDelegate, senza, la searchBar semplicemente non funziona!

Inizializza i dati:

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

Ora abbiamo bisogno di inizializzare i nostri due oggetti, ho commentato il codice per spiegare cosa faccio:

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

Ho deciso di saltare la parte relativa all'inizializzazione della cella TableView, è possibile trovarla nel codice sorgente scaricabile. :)

Quando il TableView è pronto è ora di implementare UISearchDisplayControllerDelegate!

Il delegato ha molti metodi per controllare ogni aspetto della ricerca, ma il più importante è

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

Questo metodo viene chiamato ogni volta che inserisci un nuovo carattere nella barra di ricerca, esegui la stringa di ricerca, esegui la ricerca tra gli elementi della tabella e ritorna 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;
}

È tutto! Questo metodo eseguirà una ricerca full-text in tutti gli elementi. Quando la ricerca termina il tableView si ricarica di nuovo. Vedi il codice sorgente per vedere altri dettagli.

Scarica il file sorgente (Link AGGIORNATO! (04.01.2016))





iphone uisearchbar