iOS-자동 레이아웃

자동 레이아웃이 도입되었습니다. iOS 6.0.자동 레이아웃을 사용할 때 배포 대상은 6.0 이상이어야합니다. 자동 레이아웃은 여러 방향 및 여러 장치에 사용할 수있는 인터페이스를 만드는 데 도움이됩니다.

우리 모범의 목표

화면 중앙에서 일정 거리에 배치 할 두 개의 버튼을 추가합니다. 또한 버튼 위에서 특정 거리에 배치 될 크기 조정 가능한 텍스트 필드를 추가하려고합니다.

우리의 접근

제약 조건과 함께 코드에 텍스트 필드와 두 개의 버튼을 추가합니다. 각 UI 요소의 제약 조건이 생성되어 수퍼 뷰에 추가됩니다. 원하는 결과를 얻으려면 추가 한 각 UI 요소에 대해 자동 크기 조정을 비활성화해야합니다.

관련 단계

Step 1 − 간단한보기 기반 응용 프로그램을 만듭니다.

Step 2 − ViewController.m 만 편집하고 다음과 같이합니다 −

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UIButton *leftButton;
@property (nonatomic, strong) UIButton *rightButton;
@property (nonatomic, strong) UITextField *textfield;

@end
@implementation ViewController

- (void)viewDidLoad {
   [super viewDidLoad];
   UIView *superview = self.view;

   /*1. Create leftButton and add to our view*/
   self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
   self.leftButton.translatesAutoresizingMaskIntoConstraints = NO;
   [self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal];
   [self.view addSubview:self.leftButton];

   /* 2. Constraint to position LeftButton's X*/
   NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
   constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
   NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

   /* 3. Constraint to position LeftButton's Y*/
   NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint 
   constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY 
   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
   NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];

   /* 4. Add the constraints to button's superview*/
   [superview addConstraints:@[ leftButtonXConstraint,
   leftButtonYConstraint]];

   /*5. Create rightButton and add to our view*/
   self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
   self.rightButton.translatesAutoresizingMaskIntoConstraints = NO;
   [self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal];
   [self.view addSubview:self.rightButton];

   /*6. Constraint to position RightButton's X*/
   NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint 
   constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
   NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f];

   /*7. Constraint to position RightButton's Y*/
   rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh;
   NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint 
   constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
   NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
   [superview addConstraints:@[centerYMyConstraint,
   rightButtonXConstraint]];

   //8. Add Text field
   self.textfield = [[UITextField alloc]initWithFrame:
   CGRectMake(0, 100, 100, 30)];
   self.textfield.borderStyle = UITextBorderStyleRoundedRect;
   self.textfield.translatesAutoresizingMaskIntoConstraints = NO;
   [self.view addSubview:self.textfield];

   //9. Text field Constraints
   NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview 
   attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f];
   NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeTop 
   relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton 
   attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f];
   NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft 
   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
   NSLayoutAttributeLeft multiplier:1.0 constant:30.0f];
   NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint 
   constraintWithItem:self.textfield attribute:NSLayoutAttributeRight 
   relatedBy:NSLayoutRelationEqual toItem:superview attribute:
   NSLayoutAttributeRight multiplier:1.0 constant:-30.0f];
   [superview addConstraints:@[textFieldBottomConstraint ,
   textFieldLeftConstraint, textFieldRightConstraint, 
   textFieldTopConstraint]];
}

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

참고 사항

1, 5, 8로 표시된 단계에서 우리는 프로그래밍 방식으로 두 개의 버튼과 텍스트 필드를 각각 추가했습니다.

나머지 단계에서는 제약 조건을 만들고 이러한 제약 조건을 실제로 셀프 뷰인 각 수퍼 뷰에 추가했습니다. 왼쪽 버튼 중 하나의 제약은 다음과 같습니다.

NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

제약 조건을 만드는 UI 요소를 결정하는 constraintWithItem 및 toItem이 있습니다. 속성은 두 요소가 함께 연결되는 기준을 결정합니다. "relatedBy"는 속성이 요소간에 미치는 영향의 정도를 결정합니다. Multiplier는 곱셈 계수이며 상수가 배수에 추가됩니다.

위의 예에서 leftButton의 X는 수퍼 뷰의 중심을 기준으로 항상 -60 픽셀보다 크거나 같습니다. 마찬가지로 다른 제약 조건이 정의됩니다.

산출

응용 프로그램을 실행하면 iPhone 시뮬레이터에 다음과 같은 출력이 표시됩니다.

시뮬레이터의 방향을 가로로 변경하면 다음과 같은 출력이 표시됩니다.

iPhone 5 시뮬레이터에서 동일한 애플리케이션을 실행하면 다음과 같은 출력이 표시됩니다.

시뮬레이터의 방향을 가로로 변경하면 다음과 같은 출력이 표시됩니다.