如何使用自动布局在iOS 11中将UITextField添加到具有灵活宽度的UIToolbar

Question

我想将UITextField添加到UITooolbar并让UITextField根据需要扩展其宽度以填充该区域,就像UIBarButtonSystemItemFlexibleSpace一样.

下面是一个关于我如何在视图控制器中正常设置工具栏项的片段...

// two UIBarButtonItems
UIBarButtonItem *left = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:nil];
UIBarButtonItem *right = [[UIBarButtonItem alloc] initWithTitle:@"Cancel" style:UIBarButtonItemStylePlain target:nil action:nil];

// the UIBarButtonItem with a UITextField as custom view
UITextField *textField = [[UITextField alloc] init];
textField.borderStyle = UITextBorderStyleRoundedRect;
UIBarButtonItem *text = [[UIBarButtonItem alloc] initWithCustomView:textField];

[self setToolbarItems:@[left, text, right]];

......然后会出现这样的情况.

在iOS 11之前,我对UIToolbar进行了细分,并使用layoutSubviews方法获取CGRectGetWidth(itemView.frame)所有"非灵活"项目的width(),并计算textfields视图框架的可用宽度.在iOS 11中,Apple更改为自动布局所有条形,如WWDC2017会话204中所述,现在该CGRectGetWidth(itemView.frame)方式将无法提供有效宽度,直到视图可见,这也是在iOS 11 UIBarButtonItem图像中指出的未调整尺寸.

我现在如何使用约束和自动布局添加灵活大小的UIBarButtonItems和customViews,这将扩展以填充两个项目之间的完整空闲区域？

编辑1:

如果我只添加文本字段,项目将按预期扩展其宽度.

编辑2:

直接在UIToolbar中使用约束似乎是不可能的,因为项目视图不存在(直到它们被放置？)或没有超视图.

UIBarButtonItem *left = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:nil];
UIView *leftView = [left valueForKey:@"view"];
UIBarButtonItem *right = [[UIBarButtonItem alloc] initWithTitle:@"Cancel" style:UIBarButtonItemStylePlain target:nil action:nil];
UIView *rightView = [right valueForKey:@"view"];

UITextField *textField = [[UITextField alloc] init];
textField.borderStyle = UITextBorderStyleRoundedRect;
UIBarButtonItem *text = [[UIBarButtonItem alloc] initWithCustomView:textField];

NSDictionary *views = NSDictionaryOfVariableBindings(leftView, textField, rightView);
NSString *formatString = @"|-[leftView]-[textField]-[rightView]-|";

NSArray *constraint = [NSLayoutConstraint constraintsWithVisualFormat:formatString options:NSLayoutFormatAlignAllCenterX metrics:nil views:views];
[NSLayoutConstraint activateConstraints:constraint];

[self setToolbarItems:@[left, text, right]];

编辑3:

有了检查UIToolbar的视图层次结构的想法,我最终得到了以下代码来添加约束...

// _UIToolbarContentView
//   + _UIButtonBarStackView
//       + _UIButtonBarButton
//       + UIView
//       + _UITAMICAdaptorView
//       + UIView
//

UIView *contentView = nil;
for (UIView *view in self.navigationController.toolbar.subviews) {
    if ([view.description containsString:@"ContentView"]) {
        contentView = view;
    }
}

UIView *stackView = nil;
for (UIView *view in contentView.subviews) {
    if ([view.description containsString:@"ButtonBarStackView"]) {
        stackView = view;
    }
}

// constrain views on stack
UIView *uiButtonBarButton = [stackView.subviews objectAtIndex:0];
[uiButtonBarButton.leadingAnchor constraintEqualToAnchor:stackView.leadingAnchor].active = YES;

UIView *uiTAMICAdaptorView = [stackView.subviews objectAtIndex:2];
[uiTAMICAdaptorView.leadingAnchor constraintEqualToAnchor:uiButtonBarButton.trailingAnchor].active = YES;
[uiTAMICAdaptorView.trailingAnchor constraintEqualToAnchor:stackView.trailingAnchor].active = YES;

...这将改变这样的观点:

为什么UIBarButton调整大小而不是UITextField又称UITAMICAdaptorView？

使用约束修复UIBarButton的大小...

[uiButtonBarButton.widthAnchor constraintEqualToConstant:CGRectGetWidth(uiButtonBarButton.frame)].active = YES;

... 好像 ...

...但不幸的是,UIButtonBarButton的框架在放置项目之前无效.

那么如何在不知道它的情况下约束UIButtonBarButton的宽度.像'notGreaterThanNecessary'之类的东西？

Answer 1

将单个 UIView 直接放入单个 UIBarButtonItem 中，这将成为 UIToolBar 的整个宽度。

现在您可以像平常一样使用布局约束添加任何您想要的子视图。水平 UIStackView 在这里可以很好地工作。