iOS
자동 레이아웃

소개

통사론

• NSLayoutConstraint (item : Any, attribute : NSLayoutAttribute, relatedBy : NSLayoutRelation, toItem : Any ?, NSLayoutAttribute, multiplier : CGFloat, CGFloat) // 프로그래밍 방식으로 제약 조건 생성

프로그래밍 방식으로 제약 조건 설정

상용구 코드 예제

override func viewDidLoad() {
    super.viewDidLoad()

    let myView = UIView()
    myView.backgroundColor = UIColor.blueColor()
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView)

    // Add constraints code here
    // ...
}

아래 예제에서 앵커 스타일은 NSLayoutConstraint 스타일보다 선호되는 방법이지만 iOS 9에서만 사용할 수 있으므로 iOS 8을 지원한다면 NSLayoutConstraint Style을 사용해야합니다.

고정

앵커 스타일

let margins = view.layoutMarginsGuide
myView.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor, constant: 20).active = true

• 뿐만 아니라 leadingAnchor ,도있다 trailingAnchor , topAnchor 및 bottomAnchor .

NSLayoutConstraint 스타일

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0).active = true

• 뿐만 아니라 .Leading 이 또한 .Trailing , .Top 및 .Bottom .
• .LeadingMargin 외에 .TrailingMargin , .TopMargin 및 .BottomMargin 있습니다.

비주얼 형식 언어 스타일

NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[myViewKey]", options: [], metrics: nil, views: ["myViewKey": myView])

너비와 높이

앵커 스타일

myView.widthAnchor.constraintEqualToAnchor(nil, constant: 200).active = true
myView.heightAnchor.constraintEqualToAnchor(nil, constant: 100).active = true

NSLayoutConstraint 스타일

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100).active = true

비주얼 형식 언어 스타일

NSLayoutConstraint.constraintsWithVisualFormat("H:[myViewKey(200)]", options: [], metrics: nil, views: ["myViewKey": myView])
NSLayoutConstraint.constraintsWithVisualFormat("V:[myViewKey(100)]", options: [], metrics: nil, views: ["myViewKey": myView])

컨테이너의 중심

앵커 스타일

myView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
myView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true

NSLayoutConstraint 스타일

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0).active = true

비주얼 형식 언어 스타일

NSLayoutConstraint.constraintsWithVisualFormat("V:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["myViewKey": myView, "viewKey": view])
NSLayoutConstraint.constraintsWithVisualFormat("H:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: ["myViewKey": myView, "viewKey": view])

자동 레이아웃 사용 방법

자동 배치는보기를 정렬하여 모든 장치 및 방향에서보기 좋게 만듭니다. 제약은 모든 것이 어떻게 놓여 야 하는지를 알려주는 규칙입니다. 여기에는 가장자리 고정, 센터링 및 크기 설정 등이 포함됩니다.

자동 레이아웃은 기본적으로 사용하도록 설정되어 있지만이 설정을 다시 확인할 수 있습니다. Project Navigator에서 Main.storyboard 를 클릭 한 다음 파일 속성을 표시합니다. 자동 레이아웃 및 크기 클래스가 선택되어 있는지 확인하십시오.

자동 레이아웃 제약 조건은 Interface Builder 또는 코드에서 설정할 수 있습니다. 인터페이스 빌더에서 오른쪽 하단의 자동 레이아웃 도구를 찾을 수 있습니다. 그것들을 클릭하면 뷰에 제약 조건을 설정하기위한 다양한 옵션이 나타납니다.

다른 장치 크기 나 방향에 대해 다른 제약 조건을 원할 경우 하단 중간에있는 모든 크기 클래스 옵션으로 설정할 수 있습니다.

중심 구속 조건

스토리 보드 에서 버튼 (또는 가운데에 놓을보기)을 선택하십시오. 그런 다음 오른쪽 아래에있는 정렬 버튼을 클릭하십시오. Horizontally in Container 에서 Vertically in Container 선택하십시오. "Add 2 Constraints"를 클릭하십시오.

이미 완벽하게 중심에 있지 않다면, 한 가지 더해야 할 수도 있습니다. 하단 막대의 "Embed In Stack"버튼 왼쪽 두 개의 "Update Frames"버튼을 클릭하십시오.

보기를 선택한 후 ⌘ + ⌥ + = (Command + Option 및 같음)를 함께 눌러 "필요에 따라 프레임을 업데이트"할 수 있습니다. 그러면 시간이 절약 될 수 있습니다.

이제 앱을 실행할 때 사용중인 기기 크기에 관계없이 중심에 위치해야합니다.

Interface Builder를 사용하여 뷰를 중앙에 배치하는 또 다른 방법은 Ctrl 키를 누른 상태에서 드래그하는 것입니다. UILabel 을 뷰 중앙에 배치하려고한다고 가정 UILabel . 왼쪽 하단의 사이드 바 버튼을 클릭하여 스토리 보드에서 Document Outline 를 엽니 다. ctrl (control) 키 를 누른 상태에서 레이블을 클릭하여 뷰로 드래그하면 파란색 선이 나타납니다.

릴리즈 될 때 제약 옵션 메뉴가 나타납니다 :

"컨테이너에서 가로로 센터"및 "컨테이너에서 세로로 센터"를 선택하십시오. 필요에 따라 프레임을 업데이트하십시오! 가운데에 붙은 레이블.

또는 프로그래밍 방식으로 제약 조건을 추가 할 수 있습니다. 버튼을 만들고 중심에서 수퍼 뷰에 가로 및 세로로 정렬 할 때 다음과 같이 구속 조건을 만들고 원하는 UI 요소 및 뷰에 추가합니다.

목표 -C

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIButton *yourButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 18)];
    [yourButton setTitle:@"Button" forState:UIControlStateNormal];


    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; //Align veritcally center to superView

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //Align horizontally center to superView

    [self.view addSubview:yourButton]; //Add button to superView
}

빠른

override func viewDidLoad() 
{
    super.viewDidLoad()
    let yourButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 18))
    yourButton.setTitle("Button", forState: .Normal)

    let centerVertically = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterX,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterX,
                                  multiplier: 1.0,
                                    constant: 0.0)
    let centerHorizontally = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterY,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterY,
                                  multiplier: 1.0,
                                    constant: 0.0)
    NSLayoutConstraint.activateConstraints([centerVertically, centerHorizontally])
}

공간보기 균등

Superview를 중심으로 두 가지보기를 나란히 배치하는 것이 일반적입니다. 스택 오버플로에 주어진 일반적인 대답은이 두 견해 포함하는 것입니다 UIView 하고 중심 UIView . 이것은 필요하거나 권장하지 않습니다. UILayoutGuide 문서에서 :

뷰 계층 구조에 더미 뷰를 추가하는 것과 관련된 많은 비용이 있습니다. 첫째, 뷰 자체를 생성하고 관리하는 데 드는 비용이 있습니다. 둘째, 더미 뷰는 뷰 계층 구조의 전체 구성원이므로 계층 구조가 수행하는 모든 작업에 오버 헤드를 추가합니다. 최악의 경우, 보이지 않는 더미 뷰는 다른 뷰를 대상으로하는 메시지를 가로 채어 찾을 수없는 문제를 일으킬 수 있습니다.

불필요한 UIView 단추를 추가하는 대신 UILayoutGuide 를 사용 UILayoutGuide 을 수행 할 수 있습니다. UILayoutGuide 는 본질적으로 자동 레이아웃과 상호 작용할 수있는 직사각형 공간입니다. UILayoutGuide 를 버튼의 왼쪽과 오른쪽에 놓고 너비를 동일하게 설정합니다. 그러면 단추가 중앙에 배치됩니다. 다음은 코드에서 수행하는 방법입니다.

비주얼 형식 언어 스타일

view.addSubview(button1)
view.addSubview(button2)

let leftSpace = UILayoutGuide()
view.addLayoutGuide(leftSpace)

let rightSpace = UILayoutGuide()
view.addLayoutGuide(rightSpace)

let views = [
    "leftSpace" : leftSpace,
    "button1" : button1,
    "button2" : button2,
    "rightSpace" : rightSpace
]

// Lay the buttons and layout guides out horizontally in a line. 
// Put the layout guides on each end.
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[leftSpace][button1]-[button2][rightSpace]|", options: [], metrics: nil, views: views))

// Now set the layout guides widths equal, so that the space on the 
// left and the right of the buttons will be equal
leftSpace.widthAnchor.constraintEqualToAnchor(rightSpace.widthAnchor).active = true

앵커 스타일

let leadingSpace = UILayoutGuide()
let trailingSpace = UILayoutGuide()
view.addLayoutGuide(leadingSpace)
view.addLayoutGuide(trailingSpace)

leadingSpace.widthAnchor.constraintEqualToAnchor(trailingSpace.widthAnchor).active = true
    
leadingSpace.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
leadingSpace.trailingAnchor.constraintEqualToAnchor(button1.leadingAnchor).active = true
    
trailingSpace.leadingAnchor.constraintEqualToAnchor(button2.trailingAnchor).active = true
trailingSpace.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true

이것에 수직 구속 조건을 추가해야하지만, 이것은 "더미"뷰를 추가하지 않고도 뷰의 단추를 중앙에 배치합니다! 이렇게하면 "더미"뷰를 표시 할 때 CPU 시간이 낭비되지 않습니다. 이 예제에서는 버튼을 사용하지만 제약 조건을 적용 할보기에 대해 버튼을 바꿀 수 있습니다.

iOS 8 또는 이전 버전을 지원하는 경우이 레이아웃을 만드는 가장 쉬운 방법은 숨겨진 더미 뷰를 추가하는 것입니다. iOS 9를 사용하면 더미 뷰를 레이아웃 가이드로 대체 할 수 있습니다.

참고 : Interface Builder는 아직 레이아웃 가이드를 지원하지 않습니다 (Xcode 7.2.1). 따라서 코드를 사용하려면 코드에서 제약 조건을 만들어야합니다. 출처 .

UILabel 본질적인 크기

텍스트에 이미지 접두사가있는 뷰를 만들어야합니다. 텍스트는 가변 길이 일 수 있습니다. 우리는 Image + 텍스트가 항상 부모보기의 중심에있는 결과를 얻어야합니다.

1 단계 : 먼저 단일보기 프로젝트를 만들고 원하는 이름을 지정하고 스토리 보드 주먹보기를 엽니 다. 적절한 크기의보기를 삭제하고 배경색을 노란색으로 설정합니다. 3.5 인치로 내 viewcontroller 크기를 조정했습니다. 결과 보기는 다음과 같이 보일 것입니다.

2 단계 : 이제 노란색보기에 제약 조건을 추가합니다. 시작하려면 너비 및 높이 제약 조건을 추가합니다 (잠시 기다리면 동적보기가 표시됩니다. 나중에 확인해 보겠습니다). 아래 그림의 제약 조건에 따라 너비 값에 신경을 쓰지 않아도됩니다. 모든 값은 자동 레이아웃을 적절하게 추가 할 수 있도록 너비를 충분히 넓히면됩니다.

이 두 가지 제약 조건을 추가하면 Xcode가 아래 그림과 같이 오류를 표시하고이를보고 이해할 수 있습니다.

우리는 두 개의 오류가 있습니다 (빨간색은 오류를 의미 함) 위에서 논의한 것처럼 모호성 부분을 다시 살펴 봅니다.

누락 된 구속 조건 : 다음에 대한 제약 조건이 필요합니다. X 위치 : 위에서 설명한 바와 같이 뷰에 너비와 높이를 지정하여 "경계선"이 정의되었지만 "FRAME"이 정의되지 않도록 원점을 지정하지 않았습니다. Autolayout은 노란색보기의 X 위치를 결정할 수 없습니다.

누락 된 제약 조건 : Y 위치에 대한 제약이 필요합니다. - 위에서 논의한 것처럼 우리는 뷰에 폭과 높이를 부여하여 "경계"가 정의되었지만 "FRAME"이 정의되지 않도록 원점을 지정하지 않았습니다. Autolayout은 우리의 노란색보기의 Y 위치를 결정할 수 없다. 이것을 해결하기 위해 우리는 X와 Y를 resol하기 위해 autolayout을 제공해야한다. 우리는 프레임을 설정할 수 없으므로 autolayout way로 할 것이다. 아래에 주어진 이미지 나는 나중에 그것을 설명 할 것이다.

우리가 한 것은 "Vertical Center"와 "Horizontal Center"를 추가했습니다.이 제약은 autolayout에게 우리의 노란색보기가 항상 가운데에 놓이게 할 것이라고 말합니다. 수평 적으로 : 결정된 X는 수직 구속 조건이고 Y는 결정됩니다. 프레임을 조정해야 할 수도 있음).

3 단계 : 이제 기본 노란색보기가 준비되었습니다. 접두어 이미지를 노란색보기의 하위보기로 추가하여 다음 제한 조건을 추가합니다. 원하는 이미지를 선택할 수 있습니다.

접두어 이미지의 크기가 고정되어 있으므로이 이미지 뷰의 고정 너비가 고정됩니다. 제약 조건을 추가하고 다음 단계로 진행합니다.

4 단계 : 노란색보기의 하위보기로 UILabel을 추가하고 다음 제약 조건을 추가하십시오.

보시다시피 나는 우리의 UILabel에 대한 상대적인 제약 조건만을 부여했습니다. 접두사 이미지에서 8 포인트, 뒤에서 볼 때 노란색과 아래쪽에서 0,0,0이옵니다. 너비가 동적이기를 원하기 때문에 너비 또는 높이 제한을주지 않을 것입니다. .

Q : 왜 우리는 지금 어떤 오류도 발생하지 않고 폭과 높이도주지 않았습니까? Ans : - 자동 레이아웃이 화면에서보기를 렌더링해야하는 것을 해결할 수없는 경우에만 오류나 경고를받습니다. 너비 또는 원점 높이가됩니다. 레이블이 노란색보기 및 접두사 이미지와 해당 프레임과 관련되기 때문에 잘 정의 된 autolayout은 우리 레이블의 프레임을 계산할 수 있습니다.

5 단계 : 이제 우리가 노란색 뷰에서 고정 된 뷰를 얻었음을 알 수 있지만 레이블의 텍스트에 따라 동적으로 나타나기를 원합니다. 그래서 우리는 노란색 뷰의 Width Constraint를 수정합니다. 노란색 뷰의 너비 모호성을 해결하는 데 필요하지만 UILabel의 내용을 기반으로 런타임에이를 과소 평가해야합니다. 그래서 우리는 노란색보기를 선택하고 크기 검사기로 가서 너비 제한의 우선 순위를 1로 줄여 룰이 끝나도록 할 것입니다. 아래 주어진 이미지를 따르십시오.

6 단계 : 우리는 텍스트에 따라 UILabel을 확장하고 노란색보기를 밀어 넣기를 원합니다. 그래서 우리는 노란색보기 폭의 우선 순위를 줄였습니다. 이제 우리는 UILabel의 텍스트 압축 저항의 우선 순위를 높입니다. 우리는 UILabel의 콘텐츠 포옹 우선 순위를 높일 것입니다. 아래 이미지를 따르십시오.

보시다시피, 컨텐츠 포옹 우선 순위를 500으로, 압축 저항 우선 순위를 751로 늘리면 폭 제약 조건의 우선 순위를 성공적으로 넘어서게됩니다.

이제 빌드하고 실행하면 다음과 같은 것을 볼 수 있습니다.

자동 레이아웃으로 애니메이트하는 방법

자동 레이아웃을 사용하지 않으면 시간 경과에 따라보기 프레임이 변경되어 애니메이션이 완성됩니다. 자동 레이아웃을 사용하면 구속 조건이 뷰 프레임을 지정하므로 구속 조건을 대신 애니메이션으로 적용해야합니다. 이 간접 지정은 애니메이션을 시각화하는 것을 더 어렵게 만듭니다.

자동 레이아웃으로 애니메이션을 적용하는 방법은 다음과 같습니다.

1. 주기적 호출 ( CADisplayLink , dispatch_source_t , dispatch_after , NSTimer )을 사용하여 생성 후 제약 조건 상수를 변경합니다 . 그런 다음 layoutIfNeeded 를 호출하여 제약 조건을 업데이트합니다. 예:

목표 -C :

self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
    [self.view layoutIfNeeded];
}];

빠른:

self.someConstraint.constant = 10.0
UIView.animate(withDuration: 0.25, animations: self.view.layoutIfNeeded)

2. 제약 조건을 변경하고 애니메이션 블록 내 [view layoutIfNeeded] 호출 하십시오 . 애니메이션 중에 제약 조건을 무시한 두 위치 사이를 보간합니다.

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}]

3. 제약 조건의 우선 순위를 변경하십시오 . 제약 조건을 추가 및 제거하는 것보다 CPU 사용량이 적습니다.

4. 모든 구속 조건을 제거하고 자동 크기 조절 마스크를 사용하십시오 . 나중에, view.translatesAutoresizingMaskIntoConstraints = YES 로 설정해야합니다.

5. 의도 한 애니메이션을 방해하지 않는 구속 조건을 사용하십시오 .

6. 컨테이너보기를 사용하십시오 . 제약 조건을 사용하여 수퍼 뷰를 배치합니다. 그런 다음 애니메이션과 싸우지 않는 제약 조건이있는 하위 뷰를 추가합니다 (예 : 수퍼 뷰를 기준으로 한 중심). 이것은 슈퍼 뷰에 제약 조건의 일부를 언로드하므로 서브 뷰에서 애니메이션과 싸우지 않습니다.

7. 대신 애니메이션 레이어보기 . 레이어 변환은 자동 레이아웃을 트리거하지 않습니다.

CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];

8. layoutSubviews를 재정의 합니다. [super layoutSubviews] 호출하고 제약 조건을 미세 조정하십시오.

9. viewDidLayoutSubviews에서 프레임을 변경하십시오 . 자동 레이아웃은 layoutSubviews 적용되므로 한번 완료되면 viewDidLayoutSubviews 에서 변경하십시오.

10. 자동 레이아웃에서 제외 하고 수동으로 뷰를 설정하십시오. 수퍼 클래스의 구현을 호출하지 않고도 layoutSubviews / layout 을 오버라이드 할 수 있습니다.

빠른 팁 : 애니메이션보기의 부모가 보간되지 않는 경우 (즉, 애니메이션이 처음부터 끝까지 이동하는 경우), 애니메이션이 적용된보기의 부모 인 가장 깊은보기에서 layoutIfNeeded() 를 호출 layoutIfNeeded() 즉, 애니메이션에 의해 영향을받지 않습니다). 왜 이것이 작동하는지 정확히 알지 못합니다.

UILabel 우선 순위 충돌 해결

문제점 :보기 내에서 많은 레이블을 사용하면 경고 메시지가 나타날 수 있습니다.

이 경고 는 어떻게 고칠 수 있습니까?

해결책 : 우리는 순서대로 우선 순위를 계산하고 설정합니다. 우선 순위는 라벨과 달라야합니다. 그것은 중요한 것이 더 높은 우선 순위를 갖게된다는 것을 의미합니다. 예를 들어 필자의 경우 레이블의 세로 우선 순위를 다음과 같이 설정했습니다.

첫 번째 레이블은 가장 높은 우선 순위를, 네 번째 레이블은 가장 낮은 우선 순위를 설정했습니다.

ViewController에서는 이러한 우선 순위의 영향을보기가 어렵다고 생각합니다. 그러나 UITableViewCell + 셀 높이 예측은 매우 분명합니다.

희망이 도움이됩니다.

UILabel의 텍스트에 따른 UILabel 및 학부모 크기

단계별 가이드 : -

1 단계 : - 제약 조건을 UIView로 설정

1. 주요한. 2) 상단. 3) 후행. (메인 뷰에서)

2 단계 : - 제약 조건을 레이블 1로 설정합니다.

1. Leading 2) Top 3) Trailing (슈퍼 뷰에서)

3 단계 : - 제약 조건을 레이블 2로 설정

1. Leading 2) Top 3) Trailing (슈퍼 뷰에서)

4 단계 : - 대부분의 까다로운 UIView에서 UILabel에 바닥을 제공합니다.

5 단계 : - (선택 사항) 제한을 UIButton으로 설정합니다.

1. 선행 2) 바닥 3) 후행 4) 고정 높이 (메인 뷰에서)

출력 : -

참고 : - Label 속성에서 Number of lines = 0으로 설정했는지 확인하십시오.

나는이 정보가 UILabel의 높이에 따라 Autoresize UIView를 이해하고 UILabel을 Autoresize하기에 충분할 것으로 기대한다.

시각적 형식 언어 기본 사항 : 코드의 제약!

HVFL은 UI 요소를 간단하고 신속하게 제한하도록 설계된 언어입니다. 일반적으로 VFL은 Interface Builder의 전통적인 UI 사용자 정의에 비해 훨씬 더 읽기 쉽고 액세스 가능하며 컴팩트하므로 이점이 있습니다.

다음은 세 개의 superView.width 가 왼쪽에서 오른쪽으로 제한되고, superView.width 를 사용하여 aGradeView 채우는 VFL의 예입니다

"H:|[bgView][aGradeView(40)][bGradeView(40)]|"

UI Objects를 수평 및 수직으로 제한 할 수있는 두 개의 축이 있습니다.

VFL의 각 라인은 항상 H: 또는 V: 시작합니다. 둘 다 없으면 기본 옵션은 H:

계속해서, 우리는 파이프 라인을 가지고 있습니다. | 이 기호 또는 파이프는 수퍼 뷰를 나타냅니다. 위의 VFL 코드 스 니펫을 면밀히 살펴보면이 파이프 라인 중 두 가지를 알 수 있습니다.

이것은 수퍼 뷰의 두 개의 수평 끝, outerleft 및 outerright 경계를 나타냅니다.

다음으로 대괄호가 bgView 입니다. 첫 번째 대괄호 안에 bgView 있습니다. 대괄호가 있으면 UI 요소를 가리키고 있습니다. 이제는 이름과 실제 UI 요소 사이에 어떤 연관성이 있는지 궁금해 할 것입니다. 아마도 콘센트입니까?

나는 포스트의 끝에 그것을 다룰 것이다.

두 번째 쌍 대괄호 [aGradeView(50)] 몇 개의 괄호도 캡슐화되어 있습니다.이 경우 괄호는 축에 따라 너비 / 높이를 정의합니다 (이 경우 50입니다). 픽셀 너비.

첫 번째 대괄호 [bgView] 에는 폭이 명시 적으로 정의되지 않았으므로 가능한 멀리 확장됩니다.

좋습니다, 기본 사항입니다. 다른 예제의 고급 기능에 대해 자세히 설명합니다.

예 :

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // horizontal
    NSArray *blueH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueH];

    // vertical
    NSArray *blueVandRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueVandRedV];

    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redW];

자동 레이아웃과 비 자동 레이아웃의 혼합 된 사용법

때로는 UIKit 자체에서 수행 한 자동 레이아웃 계산에 몇 가지 추가 작업을 수행하려고 할 수 있습니다.

예 : maskLayer 가있는 UIView 를 사용하는 경우 자동 레이아웃 이 UIView 의 frame 변경하는 즉시 maskLayer 를 업데이트해야 할 수 있습니다.

// CustomView.m
- (void)layoutSubviews {
    [super layoutSubviews];
    // now you can assume Auto Layout did its job
    // you can use view's frame in your calculations
    CALayer maskLayer = self.maskLayer;
    maskLayer.bounds = self.bounds;
    ...
}

또는 ViewController 에서 자동 레이아웃 에 대한 추가 작업을 원할 경우

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // now you can assume all your subviews are positioned/resized correctly
    self.customView.frame = self.containerView.frame;
}

비례 배치

제약 조건은 다음과 같이 생성되었습니다.

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0)

또는 수학 관점에서 :

view.attribute * multiplier + constant          (1)

배율을 사용하여 크기 팩터별로 비례적인 레이아웃을 만들 수 있습니다.

예:

청록색 뷰 (V1)는 폭 비례 수퍼 뷰 폭이 1 : 1.1 인 사각형입니다.

Gary square (V2)는 V1의 하위 뷰입니다. 상수로 설정된 하단 공간 = 60, 승수로 설정된 후행 공백 = 1.125 및 상수 = 0

후행 공백은 비례 적으로 설정되고, 아래 공백은 상수로 설정됩니다.

참고 : view.attribute가 0 (예 : 선행 공백) 인 경우 제약 조건 수식 (1)은 0과 같습니다. 두 번째 제약 조건 항목을 변경하거나 여백을 기준으로 제약 조건을 설정해야 view.attribute! = 0.

NSLayoutConstraint : 코드의 제약!

프레임 워크에서 작업 할 때 제약 조건이 너무 복잡하지 않으면 import Masonry 또는 SnapKit 대신 Interface Builder 또는 NSLayoutConstraint를 사용하여 코드를 작게 만드는 것이 좋습니다.

예 :

• 목표 -C

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // 3.1 blueView
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    [self.view addConstraint:blueLeft];

    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
    [self.view addConstraint:blueTop];

    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:blueRight];

    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:50];
    [self.view addConstraint:blueHeight];

    // 3.2 redView
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
    [self.view addConstraint:redTop];

    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:redRight];

    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    [self.view addConstraint:redHeight];

    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redWidth];