Центр UIView без перекрывающихся соседей видов разного размера?

Question

То, что я хочу достичь, то три из них UILabels:

Spec:

1. left и right обрамлены UIViews.
2. middle находится в центре, хотя боковые виды не имеют одинакового размера.
3. О столкновении между middle и left или middle и right, текст в middle получает хвост усечен в то время как left и right не меняются.

Проблема:

Я не мог удовлетворить оба требования (2) и (3), в то же время.

• (2) достигается с middle.autoAlignAxisToSuperviewAxis(.Vertical)
  • проблема: нет усечения, она просто не перекрывает leftLabel и rightLabel.
• (3) достигается с помощью middle.autoPinEdge(.Left, toEdge: .Right, ofView: leftLabel) и той же стратегии для rightLabel.
  • проблема: middle сосредоточена в районе между leftLabel и rightLabel, если последние два не имеют одинаковый размер, middle не SuperView в центре больше.

Оба применяются ограничения создают конфликт, и я не знаю, как это исправить, следовательно, на мой вопрос:

Как центрировать UILabel и укоротить его Avoir перекрывается с боковым видом различные размеры?

Answer 1

Все, что вам нужно, это добавить два ограничения: одно горизонтальное расстояние между средним и левым, установить отношение «больше или равно» и константу, например, 10; другой - горизонтальное расстояние между средним и правым, такая же конфигурация, как и ограничение.

Если текст средней метки слишком длинный, ограничения ниже предотвратят совпадение середины с меткой слева и справа.

Добавить образец кода:
Я полагаю, вы установили ограничения на UILabel левой и правой в раскадровке или в коде.Ниже пример используется для configu UILabel среднего

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

я попытался создать решение в игровой площадки:

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])) 

результаты в что-то вроде этого:

UPDATE (без внедрения меток в их собственных взглядов):

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])) 

надеюсь, что это помогает :)