CODEWITHSUNDEEP
iosuisearchbaruitoolbar
Avba
Avba

Reputation: 15266

Create a clear UISearchBar

I need a uisearchbar to be clear

I've tried all suggested methods - setting the background image to a clear one etc.

But - the UISearchbar always seems to have a frame - which can be set (using the image method) and an overlay with a tint (this is the portion of the search bar which is inset from the search bar boundaries) which always has the same height and a blackish tint -

I can not get rid of this tint using any of the searchbar or toolbar methods - is there a hack to make this clear - or strech it to all the corners of the UISearchbar???

Here is a snippet of the last incarnation I am trying - with no luck :(

self.searchBar = [[UISearchBar alloc] initWithFrame:searchBarBackground.bounds];
        self.searchBar.placeholder = NSLocalizedString(@"Search", nil);
        self.searchBar.searchBarStyle = UISearchBarStyleMinimal;
        [searchBarBackground addSubview:self.searchBar];
        self.searchBar.translucent = YES;
        self.searchBar.backgroundImage = [UIImage new];
        self.searchBar.scopeBarBackgroundImage = [UIImage new];

Adding a hierarchy dump of the search bar

 <UISearchBar: 0x17f36340; frame = (0 0; 240 44); text = ''; opaque = NO; gestureRecognizers = <NSArray: 0x17f35e00>; layer = <CALayer: 0x17f36270>>
 | <UIView: 0x17f36010; frame = (0 0; 240 44); clipsToBounds = YES; autoresize = W+H; layer = <CALayer: 0x17f35fe0>>
 |    | <UISearchBarBackground: 0x17f35bc0; frame = (0 0; 240 44); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x17f35ac0>>
 |    |    | <_UIBackdropView: 0x17f317d0; frame = (0 0; 240 44); hidden = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <_UIBackdropViewLayer: 0x17f311e0>>
 |    | <UISearchBarTextField: 0x17f34e40; frame = (0 0; 0 0); text = ''; clipsToBounds = YES; opaque = NO; layer = <CALayer: 0x17f34e10>>
 |    |    | <_UISearchBarSearchFieldBackgroundView: 0x17f337c0; frame = (0 0; 0 0); autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0x17f33900>>
 |    |    |    | <_UISearchBarSearchFieldBackgroundView: 0x17f32540; frame = (0 0; 0 0); hidden = YES; opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0x17f32480>>
 |    |    |    | <_UISearchBarSearchFieldBackgroundView: 0x17f31e00; frame = (0 0; 0 0); opaque = NO; autoresize = W+H; userInteractionEnabled = NO; layer = <CALayer: 0x17f31ea0>>


 *

/

Upvotes: 1

Views: 893

Answers (2)

Ansyar Hafid
Ansyar Hafid

Reputation: 279

For SWIFT:

  1. Create a clear PNG background image
  2. Set your UISearchBar style to default value

  3. in your viewDidLoad or wherever you want it add this code:

    yourSearchBar.setSearchFieldBackgroundImage(UIImage(named: "yourClearBackgroundImage"), forState: .Normal)
yourSearchBar.backgroundImage = UIImage()

Upvotes: 1

Avba
Avba

Reputation: 15266

What a headache for something so trivial as setting the background of my UISearchbar to "white with alpha"! - This is how I was finally able to create the look I wanted. A "clear" UISearchbar ontop of a whitesh background

self.searchBar = [[UISearchBar alloc] initWithFrame:SearchBarFrame];
        self.searchBar.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
        UIView *whiteView = [[UIView alloc] initWithFrame:self.searchBar.bounds];
        whiteView.backgroundColor = [UIColor colorWithWhite:1 alpha:0.5];
        whiteView.layer.cornerRadius = 5;

        [self.searchBar insertSubview:whiteView atIndex:0];

        self.searchBar.placeholder = NSLocalizedString(@"Search", nil);
        self.searchBar.searchBarStyle = UISearchBarStyleMinimal;
        [self addSubview:self.searchBar];
        self.searchBar.translucent = YES;
        self.searchBar.backgroundImage = [UIImage new];
        self.searchBar.scopeBarBackgroundImage = [UIImage new];
        UIImage *clearImage = [UIImage imageWithColor:[UIColor clearColor] andSize:SearchBarFrame.size];
        [self.searchBar setSearchFieldBackgroundImage:clearImage forState:UIControlStateNormal];

And the helper method

+ (UIImage *)imageWithColor:(UIColor *)color andSize:(CGSize)size
{
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    rect.size = size;
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

Upvotes: 2

Related Questions