如何在iOS 7中更改UISearchBar

Question

I am creating an application for iOS 7, where i need to add UISearchBar in my UITableView. Search functionality is working fine, my problem is i am trying to customize my search bar UI using below code to achieve my output as below screenshot:

here is my code :

searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(40, 29, 266, 27)];
searchBar.delegate = self;
searchBar.barTintColor = [UIColor clearColor];
[[UILabel appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:[UIColor whiteColor]];
[[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"search-bar.png"]forState:UIControlStateNormal];

NSDictionary *attributes =
[NSDictionary dictionaryWithObjectsAndKeys:
 [UIColor whiteColor], UITextAttributeTextColor,
 [UIFont fontWithName:@"HPSimplifiedW01-Regular" size:14.0f], UITextAttributeFont,
 nil];
[[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil]
 setTitleTextAttributes:attributes forState:UIControlStateNormal];
[[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil]
 setTitleTextAttributes:attributes forState:UIControlStateHighlighted];

for (UIView *subView in searchBar.subviews)
{
    for (UIView *secondLevelSubview in subView.subviews){
        if ([secondLevelSubview isKindOfClass:[UITextField class]])
        {
            UITextField *searchBarTextField = (UITextField *)secondLevelSubview;
            searchBarTextField.clearButtonMode = UITextFieldViewModeNever;
            //set font color here
            searchBarTextField.textColor = [UIColor whiteColor];
            searchBarTextField.tintColor = [UIColor whiteColor];

            if ([searchBarTextField respondsToSelector:@selector(setAttributedPlaceholder:)]) {
                UIColor *color = [UIColor whiteColor];
                searchBarTextField.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@"Search" attributes:@{NSForegroundColorAttributeName: color}];

                searchBarTextField.textAlignment = NSTextAlignmentLeft;
                searchBarTextField.leftViewMode = UITextFieldViewModeAlways;

                searchBarTextField.rightView = nil;
                searchBarTextField.leftView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@""]];
            }

            searchBarTextField.font = [UIFont fontWithName:@"HPSimplifiedW04-LightItalic" size:15.0f];

            break;
        }
    }
}

But currently using above code i am getting my output as below screenshot :

Can you please help me to achieve my output as first screen? Thanks

Answer 1

The problem in this case is, that most of the properties we would like to change are the view's layer properties, and not accessible by the appearance proxy. But there is a neat trick to change that:

We can wrap this attributes in category methods.

@interface UITextField (test)
- (void)setLayerCornerRadius:(CGFloat)cornerRadiu;
- (void)setLayerBorderColor:(UIColor *)color;
- (void)setLayerBorderWidth:(CGFloat)width;
@end

@implementation UITextField (test)

- (void)setLayerCornerRadius:(CGFloat)cornerRadius {
    self.layer.cornerRadius = cornerRadius;
}

-(void)setLayerBorderColor:(UIColor *)color
{
    self.layer.borderColor = color.CGColor;
}

-(void)setLayerBorderWidth:(CGFloat)width
{
    self.layer.borderWidth = width;
}
@end

With

[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBackgroundColor:self.searchBar.barTintColor];
[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBorderStyle:UITextBorderStyleNone];
[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setLayerCornerRadius:15];
[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setLayerBorderColor:[UIColor darkGrayColor]];
[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setLayerBorderWidth:1];

we achieve

barTintColor is set in the storyboard

to get rid of the magnifier glass icon, we can do this

[self.searchBar setImage:[[UIImage alloc] init] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

Now the hardest part was to get the placeholder text left aligned.

Therefor I subclassed UISearchBar like

@interface MySearchBar : UISearchBar

@end

@implementation MySearchBar

-(void)setAlternatePropmtLabel:(UILabel *)alternatePropmtLabel
{
    UILabel *l = (UILabel *)[self viewWithTag:1991];
    l = alternatePropmtLabel;
    [self addSubview:l];
    l.tag = 1991;
}

-(UILabel *)alternatePropmtLabel
{
    return (UILabel *)[self viewWithTag:1991];
}


@end

add added

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [[[self superview] viewWithTag:1991] setHidden:YES];
}

to the textfield category. (You should replace 1991 with some nice identifier)
In the storyboard I set MySearchBar as a custom class for the search bar.

Now by using

UILabel *promtLabel = [[UILabel alloc] initWithFrame:CGRectMake(15, 0, 100, 44)];
promtLabel.text = @"prompt";
[(MySearchBar *)self.searchBar setAlternatePropmtLabel:promtLabel];

I get

with "prompt" disappearing on the first touch.

---

The complete code, tweaked a bit:

#import "ViewController.h"

static NSUInteger kAlternatePlaceHolderTag = 1991;

@interface MySearchBar : UISearchBar

@end

@implementation MySearchBar

-(void)layoutSubviews
{
    [super layoutSubviews];
}


-(void)setAlternatePlaceholderLabel:(UILabel *)alternatePlaceholderLabel
{
    UILabel *l = (UILabel *)[self viewWithTag:kAlternatePlaceHolderTag];
    l = alternatePlaceholderLabel;
    [self addSubview:l];
    l.tag = kAlternatePlaceHolderTag;
}

-(UILabel *)alternatePlaceholderLabel
{
    return (UILabel *)[self viewWithTag:kAlternatePlaceHolderTag];
}


@end



@interface UITextField (test)
- (void)setLayerCornerRadius:(CGFloat)cornerRadius;
- (void)setLayerBorderColor:(UIColor *)color;
- (void)setLayerBorderWidth:(CGFloat)width;
@end

@implementation UITextField (test)

- (void)setLayerCornerRadius:(CGFloat)cornerRadius {
    self.layer.cornerRadius = cornerRadius;
}

-(void)setLayerBorderColor:(UIColor *)color
{
    self.layer.borderColor = color.CGColor;
}

-(void)setLayerBorderWidth:(CGFloat)width
{
    self.layer.borderWidth = width;
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [[[self superview] viewWithTag:kAlternatePlaceHolderTag] setHidden:YES];
}


@end



@interface ViewController ()
@property (weak, nonatomic) IBOutlet UISearchBar *searchBar;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    [self.searchBar setImage:[[UIImage alloc] init] forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal];

    UILabel *promtLabel = [[UILabel alloc] initWithFrame:CGRectMake(22, 0, 100, 44)];
    promtLabel.text = @"prompt";
    promtLabel.font = [UIFont fontWithName:@"HelveticaNeue-Italic" size:12];
    promtLabel.textColor = [UIColor whiteColor];
    [(MySearchBar *)self.searchBar setAlternatePlaceholderLabel:promtLabel];

    [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBackgroundColor:self.searchBar.barTintColor];
    [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setBorderStyle:UITextBorderStyleNone];
    [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setLayerCornerRadius:15];
    [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setLayerBorderColor:[UIColor whiteColor]];
    [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setLayerBorderWidth:1];


}


@end