Center UIView without overlapping neighbors views of different size? - ios

Question

What I wish to achieve, the three of them are UILabels:
Spec:
left and right are edged UIViews.
middle is centered, even though side views are not the same size.
On collision between middle and left or middle and right, the text in middle gets tail truncated while left and right do not change.
Problem:
I cannot have meet both requirements (2) and (3) at the same time.
(2) is achieved with middle.autoAlignAxisToSuperviewAxis(.Vertical)
problem: no truncate, it just overlaps leftLabel and rightLabel.
(3) is achieved with middle.autoPinEdge(.Left, toEdge: .Right, ofView: leftLabel) and same strategy for the rightLabel.
problem: middle is centered in the area between leftLabel and rightLabel, if the last two do not have the same size, middle is not superview centered anymore.
Both applied create a constraint conflict and I don't know how to fix it, hence my question:
How can I center a UILabel and truncate it to avoir overlaps with side views of different sizes?

Answer 1

All you need is adding two constraints, one is horizontal spacing between middle and left, set the relation to 'Greater than or Equal', and constant for example 10; another is horizontal spacing between middle and right, the same configuration like constraint one.
When the text of middle label is too long, the constraints below will prevent middle from overlapping with label left and right.
Add sample code:
I suppose you had set the constraints to UILabel left and right in storyboard or in code. The sample below is used to configu UILabel middle
func setupConstraint() {
self.middle = UILabel()
self.middle!.backgroundColor = UIColor.yellowColor()
self.view.addSubview(self.middle!)
self.middle!.numberOfLines = 0
self.middle!.translatesAutoresizingMaskIntoConstraints = false
let middle = self.middle!
var constraint = NSLayoutConstraint(item: middle, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: left, attribute: NSLayoutAttribute.Top, multiplier: 1, constant: 0)
self.view.addConstraint(constraint)
constraint = NSLayoutConstraint(item: middle, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: left, attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 10)
self.view.addConstraint(constraint)
constraint = NSLayoutConstraint(item: right, attribute: NSLayoutAttribute.Left, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: middle, attribute: NSLayoutAttribute.Right, multiplier: 1, constant: 10)
constraint.priority = 1000
self.view.addConstraint(constraint)
constraint = NSLayoutConstraint(item: middle, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)
self.view.addConstraint(constraint)
constraint = NSLayoutConstraint(item: middle, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.GreaterThanOrEqual, toItem: middle, attribute: NSLayoutAttribute.Height, multiplier: 1, constant: 100)
self.view.addConstraint(constraint)
self.middle!.text = "self.middle.translatesAutoresizingMaskIntoConstraints = false"
}
Sanpshot

Answer 2

i tried to set up a solution in a playground:
import UIKit
import XCPlayground
let viewController = UIViewController()
XCPlaygroundPage.currentPage.liveView = viewController.view
viewController.view.backgroundColor = UIColor.whiteColor()
let leftView = UIView()
leftView.translatesAutoresizingMaskIntoConstraints = false
leftView.backgroundColor = UIColor.greenColor()
let leftLabel = UILabel()
leftLabel.translatesAutoresizingMaskIntoConstraints = false
leftLabel.text = "leftleftleftleftleftleftleftleftleftleftleftleftleftleft"
leftView.addSubview(leftLabel)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-2-[leftLabel]-2-|", options: [], metrics: nil, views: ["leftLabel": leftLabel]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-2-[leftLabel]-2-|", options: [], metrics: nil, views: ["leftLabel": leftLabel]))
let middleView = UIView()
middleView.translatesAutoresizingMaskIntoConstraints = false
middleView.backgroundColor = UIColor.redColor()
let middleLabel = UILabel()
middleLabel.translatesAutoresizingMaskIntoConstraints = false
middleLabel.setContentCompressionResistancePriority(UILayoutPriorityDefaultLow, forAxis: .Horizontal)
middleLabel.text = "middle"
middleView.addSubview(middleLabel)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-2-[middleLabel]-2-|", options: [], metrics: nil, views: ["middleLabel": middleLabel]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-2-[middleLabel]-2-|", options: [], metrics: nil, views: ["middleLabel": middleLabel]))
let rightView = UIView()
rightView.translatesAutoresizingMaskIntoConstraints = false
rightView.backgroundColor = UIColor.greenColor()
let rightLabel = UILabel()
rightLabel.translatesAutoresizingMaskIntoConstraints = false
rightLabel.text = "right"
rightView.addSubview(rightLabel)
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|-2-[rightLabel]-2-|", options: [], metrics: nil, views: ["rightLabel": rightLabel]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-2-[rightLabel]-2-|", options: [], metrics: nil, views: ["rightLabel": rightLabel]))
viewController.view.addSubview(leftView)
viewController.view.addSubview(middleView)
viewController.view.addSubview(rightView)
NSLayoutConstraint(item: middleView, attribute: .CenterX, relatedBy: .Equal, toItem: viewController.view, attribute: .CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[leftView]->=8-[middleView]->=8-[rightView]|", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: ["leftView": leftView, "middleView": middleView, "rightView": rightView]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[leftView]", options: [], metrics: nil, views: ["leftView": leftView]))
results in something like this:
UPDATE (without embedding the labels in their own views):
import UIKit
import XCPlayground
let viewController = UIViewController()
XCPlaygroundPage.currentPage.liveView = viewController.view
viewController.view.backgroundColor = UIColor.whiteColor()
let leftLabel = UILabel()
leftLabel.translatesAutoresizingMaskIntoConstraints = false
leftLabel.backgroundColor = UIColor.greenColor()
leftLabel.text = "leftleftleftleftleftleftleftleftleftleftleftleftleftleft"
let middleLabel = UILabel()
middleLabel.translatesAutoresizingMaskIntoConstraints = false
middleLabel.setContentCompressionResistancePriority(UILayoutPriorityDefaultLow, forAxis: .Horizontal)
middleLabel.backgroundColor = UIColor.redColor()
middleLabel.text = "middle"
let rightLabel = UILabel()
rightLabel.translatesAutoresizingMaskIntoConstraints = false
rightLabel.backgroundColor = UIColor.greenColor()
rightLabel.text = "right"
viewController.view.addSubview(leftLabel)
viewController.view.addSubview(middleLabel)
viewController.view.addSubview(rightLabel)
NSLayoutConstraint(item: middleLabel, attribute: .CenterX, relatedBy: .Equal, toItem: viewController.view, attribute: .CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[leftLabel]->=8-[middleLabel]->=8-[rightLabel]|", options: [.AlignAllTop, .AlignAllBottom], metrics: nil, views: ["leftLabel": leftLabel, "middleLabel": middleLabel, "rightLabel": rightLabel]))
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-[leftLabel]", options: [], metrics: nil, views: ["leftLabel": leftLabel]))
hope it helps :)