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

Question

Quora 的 iOS 7 应用程序似乎在主 UINavigationController 的 UINavigationBar 中显示了一个 UISearchBar。通过点击该栏中的右侧栏按钮项目来触发搜索，并从右侧开始动画。一切似乎都发生在单个 View Controller 中。

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

Apple 的日历应用程序使用单独的 View Controller 进行搜索，但将搜索与内容保持在同一 View Controller 中(如 Quora 所做的那样)对于用户来说是一种更好的体验。

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

Answer 1

这是我编写的一个快速示例 View Controller ，用于模仿 Quora“扩展搜索字段”效果。我将让您自行决定是否合并“搜索结果”表格 View 。

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

您可能会想出一个干净地集成内置 searchViewController 的解决方案，但就其值(value)而言可能会太麻烦。

@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