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 시뮬레이터에서 동일한 애플리케이션을 실행하면 다음과 같은 출력이 표시됩니다.
시뮬레이터의 방향을 가로로 변경하면 다음과 같은 출력이 표시됩니다.