CODEWITHSUNDEEP
iphoneuisearchbar
Oscar
Oscar

Reputation: 1929

How to customize appearance of UISearchBar

I want to customize the search bar, I mean the white box. Can I do it? Is there some documentation about that? Is there a way to hide the white box, but not the letters. Can I at least make the box smaller? I mean less height

Upvotes: 42

Views: 56970

Answers (9)

user11130801
user11130801

Reputation: 1

(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

Upvotes: 0

Maselko
Maselko

Reputation: 4128

Some examples in Swift

UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).defaultTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]
        UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: "", attributes: [NSForegroundColorAttributeName : UIColor.whiteColor()])
        UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).tintColor = UIColor.whiteColor()

  UISearchBar.appearance().setImage(UIImage(named: "searchBarSearchIcon"), forSearchBarIcon: UISearchBarIcon.Search, state: UIControlState.Normal)
        UISearchBar.appearance().setImage(UIImage(), forSearchBarIcon: UISearchBarIcon.Clear, state: UIControlState.Normal)

Upvotes: 2

wj2061
wj2061

Reputation: 6885

Here is some common properties you can change to customize UISearchBar: enter image description here

Upvotes: 24

Waqas Haider Sheikh
Waqas Haider Sheikh

Reputation: 870

use the below code to transparent your searchbar 

// Set it to your UISearchBar appearance

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

Upvotes: 1

Kirit Vaghela
Kirit Vaghela

Reputation: 12664

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

Upvotes: 17

James Tang
James Tang

Reputation: 995

There're few attempts out there including subclass UISearchBar and hack it's layoutSubviews or drawLayer:. After iOS 5, the best method is to use 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];

Upvotes: 1

Oscar
Oscar

Reputation: 1929

Here is the solution I was looking for: Subclassing a UISearchBar, & overwriting the method layoutSubviews

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

Upvotes: 27

Jhaliya - Praveen Sharma
Jhaliya - Praveen Sharma

Reputation: 31722

You could change the background of UISearchBar

Customize a UISearchBar background

How to Control UISearchBar Background Color

Upvotes: 7

Ilker Baltaci
Ilker Baltaci

Reputation: 11779

By IOS 5.0 you have the chance to use 

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

Upvotes: 57

Related Questions