重新创建 Quora 应用程序 iOS 7 UISearchBar

Question

Quora 的 iOS 7 应用程序似乎在主 UINavigationController 的 UINavigationBar 中显示了一个 UISearchBar。通过点击该栏中的右侧栏按钮项来触发搜索，并从右侧进行动画处理。一切似乎都发生在单个视图控制器中。

Apple 在 iOS 7 中向 UISearchDisplayController 引入了“displaysSearchBarInNavigationBar”属性，但我不相信 Quora 已经使用了这个。设置后，导航栏中不可能有 titleView，Quora 应用程序肯定有这个。

Apple 的日历应用程序使用单独的视图控制器进行搜索，但将搜索与内容保持在同一个视图控制器中，就像 Quora 所做的那样，对用户来说是更好的体验。

我想到的唯一方法可能是使用自定义 UIViewController 转换，但这感觉有点矫枉过正。有没有更简单的方法来创建它？

Answer 1

这是我编写的一个快速示例视图控制器，用于模仿 Quora“扩展搜索域”效果。我将由您来合并“搜索结果”表格视图。

我使用了UITextField（子类化以便我可以更改占位符文本的颜色...），但您可以使用UISearchBar。或者您可能想要创建一个包含UITextField 和任何“关闭”按钮的自定义视图。在我的示例中，我使用了UITextField rightView 来按住关闭按钮；在 Quora 案例中，它们在文本字段外有关闭按钮，就像真正的 UISearchBar。但我认为您不能更改UISearchBar 上关闭按钮的文本/图像（至少不容易）。

您可能会想出一个干净地集成内置 searchViewController 的解决方案，但这可能太麻烦了。

@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