自定义 NavigationBar 中的 UISearchBar

Posted

技术标签:

【中文标题】自定义 NavigationBar 中的 UISearchBar【英文标题】:UISearchBar inside a custom NavigationBar 【发布时间】:2015-10-12 21:02:36 【问题描述】:

我正在开发一个 iPhone 应用程序,并且我正在继承 UINavigationBar 来创建我的自定义导航栏。我想要的是一个更高的导航栏,以及一个 UISearchBar 在 titleView 中。我想在导航栏中有更多空间,因为我想在底部的搜索栏下方放置一个分段控件。这是我到目前为止所做的:

// Custom navigation bar implementation

const CGFloat BUNavigationBarHeightIncrease = 38.0f;

@implementation BUNavigationBar

// This resizes the navigation bar height
- (CGSize)sizeThatFits:(CGSize)size 

    CGSize amendedSize = [super sizeThatFits:size];
    amendedSize.height += BUNavigationBarHeightIncrease;

    return amendedSize;


// This repositions the navigation buttons 
- (void)layoutSubviews 
    [super layoutSubviews];

    NSArray *classNamesToReposition = @[@"UINavigationButton"];

    for (UIView *view in [self subviews]) 

        if ([classNamesToReposition containsObject:NSStringFromClass([view class])]) 

            CGRect frame = [view frame];
            frame.origin.y -= BUNavigationBarHeightIncrease;

            [view setFrame:frame];
        
    


@end

我正在将此导航栏分配给这样的导航控制器:

- (IBAction)searchButton:(id)sender 
    SearchViewController *searchViewController = [[SearchViewController alloc] init];
    UINavigationController *searchNavigationController = [[UINavigationController alloc] initWithNavigationBarClass:[BUNavigationBar class] toolbarClass:nil];
    [searchNavigationController setViewControllers:[NSArray arrayWithObjects:searchViewController, nil]];

    [self presentViewController:searchNavigationController animated:YES completion:nil];

在 SearchViewController 的 viewDidLoad 中,我有这个:

- (void)viewDidLoad 
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    self.searchBar = [[UISearchBar alloc] init];
    self.cancelButton = [[UIBarButtonItem alloc] initWithTitle:@"Cancel" style:UIBarButtonItemStylePlain target:self action:@selector(cancelButton:)];

    [self.searchBar setSearchBarStyle:UISearchBarStyleMinimal];
    [self.searchBar setPlaceholder:@"Search"];

    // For debugging purposes
    [self.searchBar setBackgroundColor:[UIColor greenColor]];

    [self.navigationItem setTitleView:self.searchBar];
    [self.navigationItem setRightBarButtonItem:self.cancelButton];

这就是屏幕的样子: Simulator screenshot

搜索栏位于中间,框架已被拉伸以填满整个导航栏(以绿色显示)。相反,我想要的是让搜索栏保持在默认高度,并向上移动到导航栏的顶部。我怎样才能做到这一点?

【问题讨论】:

【参考方案1】:

只需在 viewDidLoad 中调用下面的函数

 - (void)CustomizeNavigationBarForSearch

    self.navigationItem.leftBarButtonItem = nil;
    self.navigationItem.rightBarButtonItem = nil;

    self.navigationController.navigationBar.translucent = YES;
    self.navigationItem.hidesBackButton = YES;

    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"ImgNavBarBG"] forBarMetrics:UIBarMetricsDefault];

    //Menu
    UIButton *btnMenu = [UIButton buttonWithType:UIButtonTypeCustom];
    [btnMenu setFrame:CGRectMake(-5, 5, 35, 35)];
    [btnMenu setImage:[UIImage imageNamed:@"BtnMenuDrawer"] forState:UIControlStateNormal];
    [btnMenu setImage:[UIImage imageNamed: isMain ? @"BtnMenuDrawer" : @"BtnBack"] forState:UIControlStateNormal];
    [btnMenu addTarget:self action:isMain ? @selector(clickOnMenu:) : @selector(clickOnBack:) forControlEvents:UIControlEventTouchUpInside];

    UIBarButtonItem *fixedspace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace target:nil action:nil];
    fixedspace.width = -12.0f;
    UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc] initWithCustomView:btnMenu];
    self.navigationItem.leftBarButtonItems = @[fixedspace, leftBarButton];

    //Search
    searchPlayer = [[UISearchBar alloc] initWithFrame:CGRectMake(30, 2, SCREEN_WIDTH - 80 - 30, 30)];
    searchPlayer.placeholder = @"Search";
    searchPlayer.showsCancelButton = NO;
    searchPlayer.delegate = self;

    searchPlayer.searchBarStyle = UISearchBarStyleMinimal;

    searchPlayer.barTintColor = [UIColor clearColor];
    [searchPlayer setAutocapitalizationType:UITextAutocapitalizationTypeNone];
    [searchPlayer sizeToFit];


    //Search Text field customization
    [UITextField appearanceWhenContainedIn:[UISearchBar class], nil].backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.5];
    [UITextField appearanceWhenContainedIn:[UISearchBar class], nil].textColor = [UIColor whiteColor];
    [UITextField appearanceWhenContainedIn:[UISearchBar class], nil].font = THEME_FONT_BOLD(15.0);
    [[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setDefaultTextAttributes:@NSForegroundColorAttributeName:[UIColor whiteColor]];

    id barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil];
    [barButtonAppearanceInSearchBar setTitleTextAttributes:@NSFontAttributeName:THEME_FONT(15.0),
                                                         NSForegroundColorAttributeName : [UIColor whiteColor]
                                                          forState:UIControlStateNormal];
    [barButtonAppearanceInSearchBar setTitle:@"Cancel"];

    [searchPlayer setValue:[UIColor lightGrayColor] forKeyPath:@"_searchField._placeholderLabel.textColor"];

    self.navigationItem.titleView = searchPlayer;

【讨论】:

以上是关于自定义 NavigationBar 中的 UISearchBar的主要内容,如果未能解决你的问题,请参考以下文章

带有自定义 NavigationBar 的 UINavigationController

微信小程序自定义navigationBar

在 Swift 中设置自定义 NavigationBar 的最简单方法是啥?

iOS NavigationBar 导航栏自定义

iPhone - NavigationBar 自定义背景 [重复]

iOS 7 NavigationBar 后退按钮自定义图像没有标签