使用布局锚点将自定义导航栏项目居中

Question

我创建了一个自定义导航项（带有标题和 UISearchBar）来替换 iOS 上的标准导航标题，我正尝试使用布局锚点将其置于 UINavigationBar 的中心。

但是，布局约束 [self.navigationItem.titleView.centerXAnchor constraintEqualToAnchor:self.navigationController.navigationBar.centerXAnchor].active = YES; 不起作用，包含搜索栏的 UIView 显示在 UINavigationBar 的左侧。

其他限制条件：

宽度应为屏幕宽度的 1/3
我想避免将宽度设置为常量以使视图响应方向和其他布局更改

如何使导航栏项目居中？

ScreenViewController.m:

- (void) viewDidLoad {
    [super viewDidLoad];

    // Create the search bar
    self.searchBar = [SearchBar new];

    // Create a new UIView as titleView (otherwise I'm receiving an error)   
    self.navigationItem.titleView = [UIView new];

    // Add into view hierarchy and turn off auto constraints
    [self.navigationController.navigationBar addSubview:self.navigationItem.titleView];
    [self.navigationItem.titleView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.navigationItem.titleView addSubview:self.searchBar.view];            
    [self.searchBar.view setTranslatesAutoresizingMaskIntoConstraints:NO];

    // Set anchors for the wrapping view
    [self.navigationItem.titleView.widthAnchor constraintEqualToAnchor:self.navigationController.navigationBar.widthAnchor multiplier:1.0/3.0].active = YES;
    //[self.navigationItem.titleView.heightAnchor constraintEqualToConstant:50.0].active = YES;
    [self.navigationItem.titleView.topAnchor constraintEqualToAnchor:self.navigationController.navigationBar.topAnchor].active = YES;
    [self.navigationItem.titleView.centerXAnchor constraintEqualToAnchor:self.navigationController.navigationBar.centerXAnchor].active = YES;
    [self.navigationItem.titleView.bottomAnchor constraintEqualToAnchor:self.navigationController.navigationBar.bottomAnchor].active = YES;

    // Set anchors for the search bar
    [self.searchBar.view.widthAnchor constraintEqualToAnchor:self.navigationItem.titleView.widthAnchor multiplier:1.0].active = YES;
    //[self.navigationItem.titleView.heightAnchor constraintEqualToConstant:50.0].active = YES;
    [self.searchBar.view.topAnchor constraintEqualToAnchor:self.navigationItem.titleView.topAnchor].active = YES;
    [self.searchBar.view.bottomAnchor constraintEqualToAnchor:self.navigationItem.titleView.bottomAnchor].active = YES;
    //[self.searchBar.view.leftAnchor constraintEqualToAnchor:self.navigationItem.titleView.leftAnchor].active = YES;
    //[self.searchBar.view.rightAnchor constraintEqualToAnchor:self.navigationItem.titleView.rightAnchor].active = YES;
    [self.searchBar.view.centerXAnchor constraintEqualToAnchor:self.navigationItem.titleView.centerXAnchor].active = YES;
}

预期结果：

我得到的结果（标题视图未居中）：

查看层次结构：

Answer 1

你的所作所为既不可能又违法。您根本没有制作 "custom navigation bar item" （如标题中所述）。您正在尝试将子视图直接添加到导航栏。你不能那样做。将某些内容放入导航栏的方法是将其分配到视图控制器的 navigationItem，作为栏按钮项目或作为导航项目的真实 titleView。（您称您的变量 titleView，但实际上您并未将其设为导航项的 titleView。）

Answer 2

这是我的解决方案，仅更改标题视图，将其宽度锚点设置为导航栏的一小部分以使其响应：

// Create search bar and set it as title view
self.searchBar = [SearchBar new];
self.navigationItem.titleView = self.searchBar.view;

// Turn auto constraints off
[self.searchBar.view setTranslatesAutoresizingMaskIntoConstraints:NO];

// Set the layout anchors
[self.navigationItem.titleView.widthAnchor constraintEqualToConstant:250.0].active = YES; // Had to set the width to a constant
// Was still causing problems
//[self.navigationItem.titleView.widthAnchor constraintEqualToAnchor:self.navigationController.navigationBar.widthAnchor multiplier:1.0/3.0].active = YES;// Still need to access the navigation bar's anchor
[self.navigationItem.titleView.heightAnchor constraintEqualToConstant:50.0].active = YES;

使用布局锚点将自定义导航栏项目居中

Centering a custom navigation bar item using layout anchors

uinavigationbar

uisearchbar

ios

autolayout

layout-anchor