Tutorial: Customizing UISearchBar

 Result:

To customize UISearchBar you have to override the layout subviews method. To make it slightly more flexible I used tags to determine which background image to load. You have to define the tag in interface builder in the right side panel shown below.

//
//  KTSearchBar.h
//  CustomSearchBar
//
//  Created by Kurry L Tran on 12/23/12.
//  Copyright (c) 2012 Kurry L Tran. All rights reserved.
//

#import 

@interface KTSearchBar : UISearchBar
@property (nonatomic, strong) UIView *inputAccessoryView;
@end

//
//  KTSearchBar.m
//  CustomSearchBar
//
//  Created by Kurry L Tran on 12/23/12.
//  Copyright (c) 2012 Kurry L Tran. All rights reserved.
//

#import "KTSearchBar.h"
#import 

#define KEYBOARD_ACCESSORY_HEIGHT 62
#define kBackgroundOneTag 111
#define kBackgroundTwoTag 112
#define kBackgroundThreeTag 113
#define kBackgroundFourTag 114

@implementation KTSearchBar

- (void)awakeFromNib
{
  [[self.subviews objectAtIndex:0] removeFromSuperview];
  UIImageView *backgroundImageView = nil;
  
  self.layer.borderColor = [[self colorWithHex:0x32363c] CGColor];
  NSLog(@"Tag == %d", self.tag);
  if (self.tag == kBackgroundOneTag) {
    backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"searchBarBackground@2x.png"]];
    backgroundImageView.frame = CGRectMake(0.0f, 0.0f, 320, 44);
  }else if(self.tag == kBackgroundTwoTag){
    backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search-bg-all@2x.png"]];
    backgroundImageView.frame = CGRectMake(0.0f, 0.0f, 320, 44);
  }else if(self.tag == kBackgroundThreeTag){
    backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"searchBar@2x.png"]];
    backgroundImageView.frame = CGRectMake(0.0f, 0.0f, 320, 44);
  }else if(self.tag == kBackgroundFourTag){
    backgroundImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"search-bg-all-dark@2x.png"]];
    backgroundImageView.frame = CGRectMake(0.0f, -1.0f, 320, 44);
  }
  
  [self addSubview:backgroundImageView];
  
}


- (void)layoutSubviews {
  
  [self setShowsCancelButton:NO animated:NO];
  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];
    }
  }
  [self bringSubviewToFront:searchField];
  if(!(searchField == nil)) {
    searchField.textColor = [self colorWithHex:0x8b909c];
    searchField.font = [UIFont fontWithName:@"MyriadPro-It" size:18];
    searchField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
    [searchField setBorderStyle:UITextBorderStyleNone];
    [searchField setBackgroundColor:[UIColor clearColor]];
    [searchField setRightView:nil];
    [searchField setBackground:nil];

    if (self.tag != kBackgroundThreeTag) {
      UIImage *image = [UIImage imageNamed:@"MagnifyingGlassDark"];
      UIImageView *iView = [[UIImageView alloc] initWithImage:image];
      searchField.leftView.opaque = YES;
      searchField.leftView = iView;
    }else
      searchField.leftView  = nil;

  }
  [super layoutSubviews];
}

// http://stackoverflow.com/questions/1560081/how-can-i-create-a-uicolor-from-a-hex-string
- (UIColor *) colorWithHex:(int)hex {
  return [UIColor colorWithRed:((float)((hex & 0xFF0000) >> 16))/255.0
                         green:((float)((hex & 0xFF00) >> 8))/255.0
                          blue:((float)(hex & 0xFF))/255.0 alpha:1.0];
}




@end

Sample Project: http://bit.ly/VYuflp