How to iBooks like search UI on table

Question

I want to show the search bar of tableview like that in iBooks. How can i reduce the width of searchbar and how it can be shown without any background color.

Also how can i hide the search box initially when the page is displayed.

Answer 1

I can think of two options:

Create your own by subclassing UITextfield

• set border style to UITextBorderStyleNone
• set the leftView to a magnifying glass image
• set the background to a transparent png with only the round border showing
• make use if the uiimages stretchableImageWithLeftCapWidth:topCapHeight method so the background image will looks nice when stretched

Mess around with UISearchbar, not recommended

You can access the subviews of a UISearchbar in this way:

for (UIView *aSubview in [searchbar subviews]) {
            // this will remove the toolbar around the searchbar in iOS 4
    if ([aSubview isKindOfClass:NSClassFromString(@"UISearchBarBackground")]) 
    {
        [aSubview removeFromSuperview];
    }       

    // get a grip on the underlying textfield...
    if ([aSubview isKindOfClass:NSClassFromString(@"UISearchBarTextField")]) 
    {
        UITextField *aTextfield = (UITextField *)aSubview;

        // this won't do anything at it is already none, just experimenting
        aTextfield.borderStyle = UITextBorderStyleNone;

        // this will remove the whole border as it is a custom background
        aTextfield.background = nil;

        // this will remove the magnifying glass
        aTextfield.leftView = nil;

        // play around even more :)
    }       
}

You can hide the searchbar by

• setting the hidden property to YES
• set the frame or center property to somewhere outside the visible area
• set alpha property to 0.0
• adding the searchbar to your view only when needed