How to iBooks like search UI on table

问题

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.

回答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

来源：https://stackoverflow.com/questions/5902035/how-to-ibooks-like-search-ui-on-table

标签

iphone

uisearchbar