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) 

는 물론, 당신이 (특히 수직 위치)이보다 더 레이아웃 할 필요를하고 그래, 당신은 equal spacing에 대한 UILayoutGuides를 사용할 수 있습니다. 하지만 자동 레이아웃을 사용하고 IBOutlet을 코드 작성해야하는 것들을 설정하는 방법을 이해한다면이 방법이 효과적입니다.

BTW, 당신은 코드에서 수퍼를 완벽하게 중심을 참조로, 정확한 될 수 있습니다.)

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 

불분명 한 것이 있으면 언제든지 물어보십시오!