iOS-自動レイアウト

自動レイアウトは* iOS 6.0で導入されました。自動レイアウトを使用する場合、展開ターゲットは6.0以上である必要があります。自動レイアウトは、複数の向きと複数のデバイスに使用できるインターフェイスを作成するのに役立ちます。

例の目標

画面の中心から一定の距離に配置される2つのボタンを追加します。また、ボタンの上から一定の距離から配置されるサイズ変更可能なテキストフィールドを追加しようとします。

私たちのアプローチ

コードにテキストフィールドと2つのボタンを制約とともに追加します。各UI要素の制約が作成され、スーパービューに追加されます。目的の結果を得るには、追加する各UI要素の自動サイズ変更を無効にする必要があります。

関与するステップ

ステップ1 *-シンプルなビューベースのアプリケーションを作成します。

ステップ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とマークされた手順では、プログラムで2つのボタンとテキストフィールドをそれぞれ追加しました。

残りの手順では、制約を作成し、それらの制約をそれぞれのスーパービュー（実際には自己ビュー）に追加しました。左ボタンのいずれかの制約は以下に示すとおりです-

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

constraintWithItemおよびtoItemを使用して、どのUI要素から制約を作成するかを決定します。この属性は、2つの要素をどの基準でリンクするかを決定します。「relatedBy」は、属性が要素間でどの程度の効果を持つかを決定します。 Multiplierは乗算係数であり、定数が乗算器に追加されます。

上記の例では、leftButtonのXは、スーパービューの中心に対して常に-60ピクセル以上です。同様に、他の制約が定義されています。