Ios autoLayout 기초

Ios autoLayout 기초

장치가 세로일때 뷰 모양

장치가 가로일때 뷰모양

예제소스

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  
    
    //크기 고정 뷰 - 화면 정중앙에 배치될 정사각형의 뷰 만들기
    UIView *oneView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    oneView.translatesAutoresizingMaskIntoConstraints = NO;     //필수!
    [oneView setBackgroundColor:[UIColor brownColor]];
    [self.view addSubview:oneView];
    
    
  
    //*설명
    //constraintWithItem : 제약을 걸 객체
    //attribute : 제약 속성
    //relatedBy : 상대 객체와의 관계
    //toItem: 상대 뷰객체
    //attribute상대뷰 객체의 제약 속성

      //가로 길이 제약 조건
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:oneView
                                                                       attribute:NSLayoutAttributeWidth
                                                                       relatedBy:NSLayoutRelationEqual
                                                                          toItem:nil
                                                                       attribute:NSLayoutAttributeNotAnAttribute
                                                                      multiplier:1.f
                                                                        constant:50];
    //높이 제약 조건
    NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:oneView
                                                                        attribute:NSLayoutAttributeHeight
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:nil
                                                                        attribute:NSLayoutAttributeNotAnAttribute
                                                                       multiplier:1.0
                                                                         constant:50];
    
    
    
    //oneView를 view 기준으로 view의 x 값 중앙에 위치.
    NSLayoutConstraint *centerX = [NSLayoutConstraint constraintWithItem:oneView
                                                               attribute:NSLayoutAttributeCenterX
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.view
                                                               attribute:NSLayoutAttributeCenterX
                                                              multiplier:1.0
                                                                constant:0];
    
    
    
    //oneView를 view 기준으로 view의 y 값 중앙에 위치.
    NSLayoutConstraint *centerY = [NSLayoutConstraint constraintWithItem:oneView
                                                               attribute:NSLayoutAttributeCenterY
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.view
                                                               attribute:NSLayoutAttributeCenterY
                                                              multiplier:1.0
                                                                constant:0];

    //크기 제약 조건 추가하기
    [oneView addConstraints:[NSArray arrayWithObjects:widthConstraint,heightConstraint,nil]];
    //위치 제약 조건 추가
    [self.view addConstraints:[NSArray arrayWithObjects:centerX,centerY,nil]];
    
    
    /*------------------------------------------------------------------------------------------------------------------*/
    
    //크기 유동 뷰 :  화면이 가로일때, 세로 일때 각각 다르게 변한다.
    UIView *twoView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    twoView.translatesAutoresizingMaskIntoConstraints = NO;
    [twoView setBackgroundColor:[UIColor yellowColor]];
    [self.view addSubview:twoView];
    
    
    //높이 50고정 : 높이는 변하지 않게 고정 ,  가로는 설정안해준다. 설정해주면 화면을 가로로했을때 가로길이가 바뀌지 않기 때문이다.
    NSLayoutConstraint *heightCons = [NSLayoutConstraint constraintWithItem:twoView
                                                                  attribute:NSLayoutAttributeHeight
                                                                  relatedBy:NSLayoutRelationEqual
                                                                     toItem:nil
                                                                  attribute:NSLayoutAttributeNotAnAttribute
                                                                 multiplier:1.0
                                                                   constant:50];
    
    //twoView의 y 값은 view 중앙 y값
    NSLayoutConstraint *y = [NSLayoutConstraint constraintWithItem:twoView
                                                               attribute:NSLayoutAttributeTop
                                                               relatedBy:NSLayoutRelationEqual
                                                                  toItem:self.view
                                                               attribute:NSLayoutAttributeTop
                                                              multiplier:1.0
                                                                constant:30];
    
    
    
    
    //twoView의 왼쪽값은 view의 왼쪽에서 30 떨어지게
    NSLayoutConstraint *left = [NSLayoutConstraint constraintWithItem:twoView
                                                            attribute:NSLayoutAttributeLeading
                                                            relatedBy:NSLayoutRelationEqual
                                                               toItem:self.view
                                                            attribute:NSLayoutAttributeLeading
                                                           multiplier:1.0
                                                             constant:30];
    
     //twoView의 오른쪽값은 view의 오른쪽에서 30 떨어지게 (오른쪽은 self.view가 기준이 된다!!)
    NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:self.view
                                                             attribute:NSLayoutAttributeTrailing
                                                             relatedBy:NSLayoutRelationEqual
                                                                toItem:twoView
                                                             attribute:NSLayoutAttributeTrailing
                                                            multiplier:1.0
                                                              constant:30];
    
    //높이 제약 조건 넣어주기.
    [twoView addConstraints:[NSArray arrayWithObjects:heightCons,nil]];
    //view에 y좌표, 왼쪽, 오른쪽 제약조건 넣어주기.
    [self.view addConstraints:[NSArray arrayWithObjects:y,left,right,nil]];
    
    
}


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

 

예제파일

AutoLayoutSampleCode.zip

0.06MB