使用布局锚使自定义导航栏项居中
Posted
技术标签:
【中文标题】使用布局锚使自定义导航栏项居中【英文标题】:Centering a custom navigation bar item using layout anchors 【发布时间】:2018-07-18 16:12:51 【问题描述】:我创建了一个自定义导航项(带有标题和 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;
预期结果:
我得到的(标题视图不居中):
查看层次结构:
【问题讨论】:
【参考方案1】:你的所作所为是不可能的,也是非法的。您根本没有制作“自定义导航栏项目”(如您的标题中所述)。您正在尝试将子视图直接添加到导航栏。你不能那样做。将某些内容放入导航栏的方法是将其分配给视图控制器的navigationItem
,作为栏按钮项或导航项的真实titleView
。 (您将变量称为titleView
,但实际上并没有将其设为导航项的titleView
。)
【讨论】:
我开始直接调用self.navigationController.navigationBar
,因为我认为我需要访问它的widthAnchor
、topAnchor
、bottomAnchor
、centerXAnchor
。否则如何确保新的navigationItem
占据屏幕宽度的 1/3?
您不负责在导航栏中放置东西。所以不要试图负责。您可以将视图中的视图作为真正的 titleView
并使用 internal 约束来指定它们的大小,但您不能指定 titleView
itself 的位置(它将居中,但这不取决于您)。或者,您可以将自定义视图放在左栏按钮项中,并使用 internal 约束来指定其大小。但它的确切位置并不取决于您。【参考方案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;
【讨论】:
以上是关于使用布局锚使自定义导航栏项居中的主要内容,如果未能解决你的问题,请参考以下文章