Recreating the Quora app iOS 7 UISearchBar

Question

Quora's iOS 7 app seemingly displays a UISearchBar in the main UINavigationController's UINavigationBar. Search is triggered by tapping on the right bar button item in that bar and animates in from the right. Everything appears to happen in a single view controller.

Apple introduced the "displaysSearchBarInNavigationBar" property to UISearchDisplayController in iOS 7, but I don't believe that Quora have used this. It's not possible to have a titleView in the navigation bar when set and the Quora app certainly appears to have this.

Apple's Calendar app uses a separate view controller for search, but keeping search in the same view controller as the content, as Quora do, is a nicer experience for the user.

The only way I've thought to do this might be to use custom UIViewController transitions, but that feels like an overkill. Is there a simpler way to create this?

Answer 1

Here's a quick sample view controller I wrote to mimic the Quora "expanding search field" effect. I'll leave it up to you to incorporate a "search results" tableview.

I used a UITextField (subclassed so I could change the color of the placeholder text...), but you MIGHT be able to use a UISearchBar. Or you might want to make a custom view that contains the UITextField and any "close" button. In my example I used the UITextField rightView to hold a close button; in the Quora case they have the close button outside the text field, like a real UISearchBar. But I don't think you can can change the text/image of the close button on a UISearchBar (at least not easily).

It's possible that you could come up with a solution that cleanly integrated the built-in searchViewController, but it might be too much trouble for its worth.

@interface TSTextField : UITextField
@end
@implementation TSTextField
- (void) drawPlaceholderInRect: (CGRect) rect
{
    CGFloat fontHeight = self.font.lineHeight;

    CGFloat yOffset = (rect.size.height - fontHeight) / 2.0;

    rect = CGRectMake( 0, yOffset, rect.size.width, fontHeight );

    [[self placeholder] drawInRect: rect
                    withAttributes: @{ NSFontAttributeName : self.font,
                                       NSForegroundColorAttributeName : self.isEditing ? self.textColor : [UIColor whiteColor] }];
}
@end

@interface TSViewController () <UITextFieldDelegate>
@end

@implementation TSViewController

- (void) viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.barTintColor = [UIColor redColor];

    UITextField* searchField = [[TSTextField alloc] initWithFrame: CGRectMake(0, 0, 85, 30)];
    searchField.backgroundColor = [UIColor clearColor];
    searchField.borderStyle = UITextBorderStyleNone;
    searchField.textColor = [UIColor whiteColor];
    searchField.textAlignment = NSTextAlignmentRight;
    searchField.placeholder = @"Search";
    searchField.delegate = self;

    UIButton* magnifyButton = [UIButton buttonWithType: UIButtonTypeSystem];
    [magnifyButton setTitle: @"🔍" forState: UIControlStateNormal];
    [magnifyButton sizeToFit];
    [magnifyButton addTarget: self action: @selector( close: ) forControlEvents: UIControlEventTouchUpInside];
    searchField.leftView = magnifyButton;
    searchField.leftViewMode = UITextFieldViewModeAlways;

    UIButton* closeButton = [UIButton buttonWithType: UIButtonTypeSystem];
    [closeButton setTitle: @"ⓧ" forState: UIControlStateNormal];
    [closeButton sizeToFit];
    [closeButton addTarget: self action: @selector( close: ) forControlEvents: UIControlEventTouchUpInside];
    searchField.rightView = closeButton;
    searchField.rightViewMode = UITextFieldViewModeWhileEditing;

    UIBarButtonItem* bbi = [[UIBarButtonItem alloc] initWithCustomView: searchField];
    self.navigationItem.rightBarButtonItem = bbi;

}

- (BOOL) textFieldShouldBeginEditing:(UITextField *)textField
{
    UITextField* searchField = (UITextField*)self.navigationItem.rightBarButtonItem.customView;
    searchField.borderStyle = UITextBorderStyleRoundedRect;
    searchField.backgroundColor = [UIColor whiteColor];
    searchField.textColor = [UIColor blackColor];
    searchField.text = @"";
    searchField.textAlignment = NSTextAlignmentLeft;

    [UIView transitionWithView: searchField
                      duration: 0.25
                       options: UIViewAnimationOptionAllowAnimatedContent | UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{

                        searchField.frame = CGRectMake( 0, 0, 290, searchField.frame.size.height);
                    }
                    completion: nil];

    return YES;
}

- (void) close: (id) sender
{
    UITextField* searchField = (UITextField*)self.navigationItem.rightBarButtonItem.customView;
    searchField.rightViewMode = UITextFieldViewModeNever;

    [UIView transitionWithView: searchField
                      duration: 0.25
                       options: UIViewAnimationOptionAllowAnimatedContent | UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{

                        searchField.frame = CGRectMake( 0, 0, 85, searchField.frame.size.height);
                        searchField.backgroundColor = [UIColor clearColor];
                        searchField.text = @"";
                        searchField.borderStyle = UITextBorderStyleNone;
                        searchField.textColor = [UIColor whiteColor];
                        searchField.textAlignment = NSTextAlignmentRight;

                        [searchField resignFirstResponder];
                     }

                     completion:^(BOOL finished) {

                         searchField.rightViewMode = UITextFieldViewModeWhileEditing;
                     }];
}

@end