我的UIButtonBarItem没有使用FlexibleSpace正确布局(My UIButtonBarItem 's don't properly lay out with F

我的UIButtonBarItem没有使用FlexibleSpace正确布局(My UIButtonBarItem 's don't properly lay out with FlexibleSpace)

我是以编程方式在swift中创建UIToolBar及其Items：

var items = [UIBarButtonItem]() let leftButton = UIBarButtonItem(image: UIImage(named: "left"), style: .Plain, target: self, action: Selector("doneClickedMaButton")) let spacer = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: nil, action: nil) let rightButton = UIBarButtonItem(image: UIImage(named: "right"), style: .Plain, target: self, action: Selector("doneClickedRight")) let searchButton = UIBarButtonItem(barButtonSystemItem: .Search, target: self, action: Selector("doneClickedSearch")) items.append(leftButton) items.append(spacer) items.append(searchButton) items.append(spacer) items.append(rightButton) var toolBar = UIToolbar() toolBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 50) toolBar.translatesAutoresizingMaskIntoConstraints = false toolBar.backgroundColor = UIColor.redColor() toolBar.items = items toolBar.sizeToFit() view.addSubview(toolBar) view.addConstraint(NSLayoutConstraint(item: toolBar, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1.0, constant: 0.0))

如果我没有添加spacer项，那么模拟器看起来像这样：

如果我有它们，就像它在这段代码中所说的那样。 我明白了：

正如你在这里看到的那样，不仅图像现在从屏幕向左下方移动，而且它们不再是正确的顺序。

我以为.FlexibleSpace只是增加了项目之间的动态间距。 我在这里错过了什么吗？ 有人在各篇文章中提到，可以在UIBarButtonItem中为UILabel设置宽度，这可以使.FlexibleSpace识别它。

I'm programmatically creating a UIToolBar and its Items in swift :

var items = [UIBarButtonItem]() let leftButton = UIBarButtonItem(image: UIImage(named: "left"), style: .Plain, target: self, action: Selector("doneClickedMaButton")) let spacer = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: nil, action: nil) let rightButton = UIBarButtonItem(image: UIImage(named: "right"), style: .Plain, target: self, action: Selector("doneClickedRight")) let searchButton = UIBarButtonItem(barButtonSystemItem: .Search, target: self, action: Selector("doneClickedSearch")) items.append(leftButton) items.append(spacer) items.append(searchButton) items.append(spacer) items.append(rightButton) var toolBar = UIToolbar() toolBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 50) toolBar.translatesAutoresizingMaskIntoConstraints = false toolBar.backgroundColor = UIColor.redColor() toolBar.items = items toolBar.sizeToFit() view.addSubview(toolBar) view.addConstraint(NSLayoutConstraint(item: toolBar, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1.0, constant: 0.0))

If I don't add the spacer item, then the simulator looks like this :

If I do have them in, like it says so in this code. I get this :

As you can see here, not only are the images now falling off the screen towards the left, but they're no longer in the right order.

I thought .FlexibleSpace just adds dynamic spacing between items. Am I missing something here? Someone mentioned in various posts that one could set widths to a UILabel within a UIBarButtonItem, and that could make .FlexibleSpace recognize it.

最满意答案

问题是您没有足够的约束来满足自动布局引擎。 您将工具栏固定在底部，但宽度正在缩小，因此它只能容纳按钮，但您希望它是视图的宽度。 尝试以下方法：

var items = [UIBarButtonItem]() let leftButton = UIBarButtonItem(image: UIImage(named: "left"), style: .Plain, target: self, action: Selector("doneClickedMaButton")) let spacer = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: nil, action: nil) let rightButton = UIBarButtonItem(image: UIImage(named: "right"), style: .Plain, target: self, action: Selector("doneClickedRight")) let searchButton = UIBarButtonItem(barButtonSystemItem: .Search, target: self, action: Selector("doneClickedSearch")) items.append(leftButton) items.append(spacer) items.append(searchButton) items.append(spacer) items.append(rightButton) var toolBar = UIToolbar() toolBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 50) toolBar.translatesAutoresizingMaskIntoConstraints = false toolBar.backgroundColor = UIColor.redColor() toolBar.items = items toolBar.sizeToFit() view.addSubview(toolBar) toolBar.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor).active = true toolBar.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor).active = true toolBar.bottomAnchor.constraintEqualToAnchor(self.view.bottomAnchor).active = true

The problem is you do not have enough constraints to satisfy the auto layout engine. You are pinning the tool bar to the bottom but the width is shrinking so that it only accommodates the buttons, but you would like it to be the width of your view. Try something like:

var items = [UIBarButtonItem]() let leftButton = UIBarButtonItem(image: UIImage(named: "left"), style: .Plain, target: self, action: Selector("doneClickedMaButton")) let spacer = UIBarButtonItem(barButtonSystemItem: .FlexibleSpace, target: nil, action: nil) let rightButton = UIBarButtonItem(image: UIImage(named: "right"), style: .Plain, target: self, action: Selector("doneClickedRight")) let searchButton = UIBarButtonItem(barButtonSystemItem: .Search, target: self, action: Selector("doneClickedSearch")) items.append(leftButton) items.append(spacer) items.append(searchButton) items.append(spacer) items.append(rightButton) var toolBar = UIToolbar() toolBar.frame = CGRectMake(0, 0, self.view.frame.size.width, 50) toolBar.translatesAutoresizingMaskIntoConstraints = false toolBar.backgroundColor = UIColor.redColor() toolBar.items = items toolBar.sizeToFit() view.addSubview(toolBar) toolBar.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor).active = true toolBar.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor).active = true toolBar.bottomAnchor.constraintEqualToAnchor(self.view.bottomAnchor).active = true