Как я могу центрировать два элемента (не зная их ширины) рядом друг с другом в Swift?

Question

В моем приложении swift у меня есть вид с UILabel и UIButton. В раскадровке это выглядит следующим образом:

Я знаю, что может группировать эти два элемента, а затем положить ограничения на эту группу, но это будет работать только тогда, когда UILabel имеет постоянную ширину.

Я хочу, чтобы отобразить эту группу, как это:

|  label X  | 

или - если метка больше, как это:

| longerlabel X | 

Как следует применять ограничения, чтобы получить такой эффект?

Answer 1

Сначала я рассматривал UILayoutGuides, но это намного проще, если вы готовы закодировать несколько вещей. Используйте UILayoutAnchors, CenterX и множитель:

myLabel.centerXAnchor.constraint(equalTo: myView.centerXAnchor, multiplier: 0.33)  
myButton.centerXAnchor.constraint(equalTo: myView.centerXAnchor, multiplier: 0.667) 

Конечно, вам нужно макет больше, чем это (вертикальное положение, в частности) и да, вы можете использовать UILayoutGuides для equal spacing. Но пока вы используете автоматическую компоновку и понимаете, как настроить IBOutlets для того, что вам нужно для кодирования таким образом, это будет работать.

Кстати, вы можете быть точным, так как в обращении SuperView в коде центрировать это прекрасно.)

Answer 2

вы должны использовать обычный UIView как контейнер. вы можете установить свое мнение в коде:

// configure the content 
let labelText = "Label" 
let buttonTitle = "X" 

// setup the views 
let label = UILabel() 
label.translatesAutoresizingMaskIntoConstraints = false 
label.text = labelText 

let button = UIButton(type: .system) 
button.translatesAutoresizingMaskIntoConstraints = false 
button.setTitle(buttonTitle, for: .normal) 
button.setContentCompressionResistancePriority(label.contentCompressionResistancePriority(for: .horizontal) + 1, for: .horizontal) 

let container = UIView() 
container.translatesAutoresizingMaskIntoConstraints = false 
container.layer.borderColor = UIColor.lightGray.cgColor 
container.layer.borderWidth = 1 

// add the views 
container.addSubview(label) 
container.addSubview(button) 
view.addSubview(container) 

// create the container constraints 
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "|[lbl]-[btn]|", options: [.alignAllTop, .alignAllBottom], metrics: nil, views: ["lbl": label, "btn": button])) 
NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|[btn]|", options: [], metrics: nil, views: ["btn": button])) 

// center the container 
NSLayoutConstraint(item: container, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0).isActive = true 
NSLayoutConstraint(item: container, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0).isActive = true 

// make sure the container does not extend the view's width 
NSLayoutConstraint(item: container, attribute: .leading, relatedBy: .greaterThanOrEqual, toItem: view, attribute: .leading, multiplier: 1, constant: 20).isActive = true 

не стесняйтесь спрашивать, не ясно ли что-нибудь! это результат кстати: