OC 및 Swift 순수 코드로 Autolayout 레이아웃

OC에서 순수 코드로 Autolayout 레이아웃
   /*
NSLayoutConstraint 클래스를 사용하여 특정 구속조건 객체를 작성합니다.
제약조건 대상을 해당하는view에 추가합니다. 코드는 두 가지가 있습니다.
     1)- (void)addConstraint:(NSLayoutConstraint *)constraint;
     2)- (void)addConstraints:(NSArray *)constraints;
     */
 

//          View
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor redColor];
    //   AutoresizingMask   Constraints
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:redView];
//        
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
    [self.view addConstraint:widthConstraint];//      
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
    NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:100];
    NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];
//          
    [self.view addConstraints:@[heightConstraint,topConstraint,leftConstraint]];

/*
위의 NSLayoutConstraint 클래스는 다음과 같습니다.
 +(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(nullable id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
총 7개의 매개변수가 있습니다.
view1: 구속할 컨트롤(redView)
attr1: 제약의 유형은 어떤 제약을 해야 하는가
relation: 참조 컨트롤과의 관계, 예를 들어 크거나 같은..
view2: 참조된 컨트롤
attr2: 구속의 유형, 상수
multiplier: 곱하기, 몇 배
c:상량, 위의 제약을 다 한 후에 이 상량을 더할 것이다
따라서 위의 top Constraint는 제약할 컨트롤 RedView의 상단 거리를 참조 컨트롤self와 같이 표시합니다.view의 왼쪽 간격의 1.0배와 100
구속조건 추가 규칙은 다음과 같습니다.
제약을 만든 후에 그 제약을 작용하는 컨트롤에 추가해야 효력이 발생합니다. 제약을 추가할 때 목표 컨트롤은 다음과 같은 규칙을 따라야 합니다. (이 컨트롤은view로 간단하게 표시됩니다).
(1) 두 개의 같은 등급의view 간의 제약 관계에 대해 그들의 아버지view에 추가
(2) 두 개의 서로 다른 등급view 간의 구속 관계에 대해 그들의 최근 공통 아버지view에 추가
(3) 차원 관계가 있는 두 개view 간의 구속 관계에 대해 차원이 비교적 높은 부view에 추가
(4) 길이와 너비 따위가 이view 자신에게만 작용하면 이view 자신에게 추가
코드를 사용하여 Autolayout을 구현하려면 다음 사항을 고려해야 합니다.
(1) autoresizing 기능을 금지하고 AutoresizingMask가Constraints로 전환되는 것을 방지하며 충돌을 피하려면view의translatesAutoresizingMaskIntoConstraints 속성을 NO로 설정해야 한다.
(2) 제약을 추가하기 전에 관련 컨트롤이 각자의 아버지 컨트롤에 있음을 반드시 확보해야 한다.
(3)view에 프레임을 설정하지 않아도 된다.
Apple이 자체로 가지고 있는 Autolayout의 실현을 보니 기분이 좋지 않습니다. 여기에는 Masonry를 추천합니다. 안에 Block을 사용했고 코드가 우아합니다.
예를 들어 위의 제약 코드는 다음과 같이 쓸 수 있다.
 [redView mas_makeConstraints:^(MASConstraintMaker *make) {
//이 Block에서make 대상을 이용하여 제약 만들기
     make.size.mas_equalTo(CGSizeMake(150, 150));
     make.top.equalTo(self.view).offset(100);
     make.left.equalTo(self.view).offset(100);
 }];
우아하고 깔끔하지 않아요?
자세한 내용은 Google에서 확인하십시오.
 */
Swift에서 Autolayout 레이아웃

    let redView = UIView()
//           AutoresizingMask   Constraints
        redView.translatesAutoresizingMaskIntoConstraints = false
        redView.backgroundColor = UIColor.red
        view.addSubview(redView)
//            
        let widthConstraint = NSLayoutConstraint(item: redView, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 150)
        let heightConstraint = NSLayoutConstraint(item: redView, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 0, constant: 150)
        let topConstraint = NSLayoutConstraint(item: redView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 100)
        let letConstraint = NSLayoutConstraint(item: redView, attribute: .left, relatedBy: .equal, toItem: view, attribute: .left, multiplier: 1.0, constant: 100)
       //      
view.addConstraints([widthConstraint,heightConstraint,letConstraint,topConstraint])

/*OC와 거의 일치함을 알 수 있습니다*/
        
        
/* Apple 팀은 코드의 편의를 위해 개발자에게 VFL 언어로 제약조건 객체를 작성하는 또 다른 방법을 제공합니다.VFL, 전체 이름은 Visual Format Language로, 복잡한 구속 관계를 상형적으로 NSLayoutConstraint 구속 객체로 변환하는 서식 적용 구속 언어로 해석할 수 있습니다.
 */
//뷰를 생성하려면 위, 왼쪽, 오른쪽 여백을 모두 60개의 셀로 설정하고 높이는 200개의 단위로 설정합니다.

        let cyanView = UIView()
        cyanView.backgroundColor = UIColor.cyan
        cyanView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(cyanView)
        let stringH = "H:|-60-[cyanView]-60-|"
        let  stringV = "V:|-60-[cyanView(200)]|"
        let constraintArrayH = NSLayoutConstraint.constraints(withVisualFormat: stringH, options: NSLayoutFormatOptions(), metrics: nil, views: ["cyanView":cyanView])
        let constraintArrayV = NSLayoutConstraint.constraints(withVisualFormat: stringV, options: NSLayoutFormatOptions(), metrics: nil, views: ["cyanView":cyanView])
        view.addConstraints(constraintArrayH)
        view.addConstraints(constraintArrayV)

/*
침구, 멍청해 보이지만, 사실은 이해하기 쉽다.
NSLayoutConstraint는 VFL 문자열을 구속조건 객체로 번역하는 constraints() 방법을 제공합니다.이 방법의 withVisualFormat 매개 변수는 VFL 문자열이고views 매개 변수는 VFL 문자열에 사용되는 보기 컨트롤의 이름과 대응하는 보기 컨트롤의 매핑으로 설정합니다.VFL 언어에서 H는 수평 방향, V는 세로 방향의 제약, | 기호는 부모 보기의 가장자리, -60 - 20단위 거리, [] 안은 배치할 보기 컨트롤의 이름, () 안은 제약값이다.전반적으로 VFL 문구를 제약하는 대상의 창설은 일부 업무 부담을 줄일 수 있지만 코드 스타일은 Swift와 어울리지 않고 제약을 수정하고 업데이트해야 한다면 그다지 적용되지 않는다.여기에는 삼자 스냅키트 프레임을 추천하는데, 사실 스냅키트는 마소니의 스윙 버전입니다.
예를 들어 위의 cyanView의 제약은
         cyanView.snp.makeConstraints{(make) in
             make.left.equalTo(100)
             make.top.equalTo(100)
             make.width.equalTo(150)
             make.height.equalTo(150)
         }
또한 SnapKit 는 다음과 같은 간단한 체인 프로그래밍을 지원합니다.
         cyanView.snp.makeConstraints{(make) in
             make.left.top.equalTo(100)
             make.width.height.equalTo(150)
         }
SnapKit에서도 손쉽게 업데이트와 제거에 대한 구속 작업을 호출할 수 있습니다.
         cyanView.snp.makeConstraints{(make) in
업데이트할 제약 코드를 다시 작성합니다.
         }
//모든 구속 제거
         cyanView.snp.removeConstraints()
         
*/