iOS
自動レイアウト

前書き

構文

• NSLayoutConstraint（任意：属性：NSLayoutAttribute、relatedBy：NSLayoutRelation、toItem：任意？、属性：NSLayoutAttribute、乗数：CGFloat、定数：CGFloat）//プログラムで制約を作成する

プログラムで制約を設定する

ボイラープレートのコード例

override func viewDidLoad() {
    super.viewDidLoad()

    let myView = UIView()
    myView.backgroundColor = UIColor.blueColor()
    myView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(myView)

    // Add constraints code here
    // ...
}

以下の例では、アンカースタイルがNSLayoutConstraintスタイルよりも優先されますが、iOS 9からしか使用できないため、iOS 8をサポートしている場合はNSLayoutConstraintスタイルを使用する必要があります。

ピンニング

アンカースタイル

let margins = view.layoutMarginsGuide
myView.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor, constant: 20).active = true

• leadingAnchorに加えて、 trailingAnchor 、 topAnchor 、およびbottomAnchorます。

NSLayoutConstraintスタイル

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0).active = true

• 加えて.Leadingもあり.Trailing 、 .Top 、および.Bottom 。
• .LeadingMarginに加えて、 .TopMargin 、 .TrailingMargin 、 .TopMarginもあり.BottomMargin 。

ビジュアルフォーマット言語スタイル

NSLayoutConstraint.constraintsWithVisualFormat("H:|-20-[myViewKey]", options: [], metrics: nil, views: ["myViewKey": myView])

幅と高さ

アンカースタイル

myView.widthAnchor.constraintEqualToAnchor(nil, constant: 200).active = true
myView.heightAnchor.constraintEqualToAnchor(nil, constant: 100).active = true

NSLayoutConstraintスタイル

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 200).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Height, relatedBy: NSLayoutRelation.Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: 100).active = true

ビジュアルフォーマット言語スタイル

NSLayoutConstraint.constraintsWithVisualFormat("H:[myViewKey(200)]", options: [], metrics: nil, views: ["myViewKey": myView])
NSLayoutConstraint.constraintsWithVisualFormat("V:[myViewKey(100)]", options: [], metrics: nil, views: ["myViewKey": myView])

コンテナの中心

アンカースタイル

myView.centerXAnchor.constraintEqualToAnchor(view.centerXAnchor).active = true
myView.centerYAnchor.constraintEqualToAnchor(view.centerYAnchor).active = true

NSLayoutConstraintスタイル

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0).active = true
NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0).active = true

ビジュアルフォーマット言語スタイル

NSLayoutConstraint.constraintsWithVisualFormat("V:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterX, metrics: nil, views: ["myViewKey": myView, "viewKey": view])
NSLayoutConstraint.constraintsWithVisualFormat("H:[viewKey]-(<=0)-[myViewKey]", options: NSLayoutFormatOptions.AlignAllCenterY, metrics: nil, views: ["myViewKey": myView, "viewKey": view])

自動レイアウトの使い方

自動レイアウトは、どのデバイスや向きでも見栄えの良いようにビューを配置するために使用されます。拘束は、すべてがどのように敷かれるべきかを指示する規則です。これには、エッジの固定、センタリング、サイズの設定などが含まれます。

自動レイアウトはデフォルトで有効になっていますが、これを再確認できます。 Project NavigatorでMain.storyboardをクリックし、ファイルインスペクタを表示した場合。自動レイアウトとサイズクラスがチェックされていることを確認します。

自動レイアウト制約は、Interface Builderまたはコードで設定できます。 Interface Builderでは、右下に自動レイアウトツールがあります。それらをクリックすると、ビューに対する制約を設定するためのさまざまなオプションが表示されます。

デバイスのサイズや向きに応じて異なる制約を設定したい場合は、最下部にあるすべてのhAny Size Classオプションで設定することができます。

中心の制約

ストーリーボード上であなたのボタンを選択してください。次に、右下にある整列ボタンをクリックします。 Horizontally in ContainerではHorizontally in Container選択しHorizontally in ContainerではVertically in Container Horizontally in Container選択します。 [2つの制約を追加]をクリックします。

既に完全に中央に位置していない場合は、もう1つのことをする必要があります。下のバーの[埋め込みスタック]ボタンの左にある2つの[フレームの更新]ボタンをクリックします。

ビューを選択した後に⌘ + ⌥ + = （Command + Optionと等価）を一緒に押すと、「必要に応じてフレームを更新する」こともできます。

今あなたがあなたのアプリを実行するとき、それはどんなデバイスのサイズを使用しているに関係なく、中心にする必要があります。

Interface Builderを使用してビューを中央揃えするもう1つの方法は、コントロールをクリックしてドラッグすることです。 UILabelをビューの中央にUILabelしたいとします。左下のサイドバーボタンをクリックして、ストーリーボードのDocument Outlineを開きます。 ctrl （control）を押しながらラベルをクリックしてビューにドラッグすると、青い線が表示されます：

リリース時に、制約オプションのメニューが表示されます：

「コンテナで水平にセンタリングする」および「コンテナに垂直にセンタリングする」を選択します。必要に応じてフレームを更新してください。中央のラベル。

あるいは、プログラムで制約を追加することもできます。次の例で説明するように、ボタンを作成し、そのボタンを中央で、水平方向および垂直方向にスーパービューに整列するように、制約を作成して目的のUIエレメントおよびビューに追加します。

目標-C

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIButton *yourButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 18)];
    [yourButton setTitle:@"Button" forState:UIControlStateNormal];


    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; //Align veritcally center to superView

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:yourButton attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0]]; //Align horizontally center to superView

    [self.view addSubview:yourButton]; //Add button to superView
}

迅速

override func viewDidLoad() 
{
    super.viewDidLoad()
    let yourButton: UIButton = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 18))
    yourButton.setTitle("Button", forState: .Normal)

    let centerVertically = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterX,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterX,
                                  multiplier: 1.0,
                                    constant: 0.0)
    let centerHorizontally = NSLayoutConstraint(item: yourButton,
                                   attribute: .CenterY,
                                   relatedBy: .Equal,
                                      toItem: view,
                                   attribute: .CenterY,
                                  multiplier: 1.0,
                                    constant: 0.0)
    NSLayoutConstraint.activateConstraints([centerVertically, centerHorizontally])
}

スペースビューを均等に

スーパービューを中心に2つのビューを並べて表示することが一般的です。スタックオーバーフローの上に与えられた一般的な答えは、これら二つのビューを埋め込むことであるUIViewとセンターUIView 。これは必ずしも必要ではありません。 UILayoutGuideのドキュメントから：

ビュー階層にダミー・ビューを追加すると、多くのコストがかかります。まず、ビュー自体の作成と保守のコストがあります。第2に、ダミー・ビューはビュー階層の完全なメンバーです。つまり、階層が実行するすべてのタスクにオーバーヘッドが追加されます。最悪の場合、目に見えないダミー・ビューは、他のビュー用のメッセージを傍受して、見つけにくい問題を引き起こす可能性があります。

不要なUIViewボタンを追加する代わりに、 UILayoutGuideを使用してこれを行うことができます。 UILayoutGuideは、本質的にオートレイアウトと対話できる矩形スペースです。 UILayoutGuideをボタンの左右に置き、幅を等しく設定します。これにより、ボタンが中央に配置されます。コードでこれを行う方法は次のとおりです。

ビジュアルフォーマット言語スタイル

view.addSubview(button1)
view.addSubview(button2)

let leftSpace = UILayoutGuide()
view.addLayoutGuide(leftSpace)

let rightSpace = UILayoutGuide()
view.addLayoutGuide(rightSpace)

let views = [
    "leftSpace" : leftSpace,
    "button1" : button1,
    "button2" : button2,
    "rightSpace" : rightSpace
]

// Lay the buttons and layout guides out horizontally in a line. 
// Put the layout guides on each end.
NSLayoutConstraint.activateConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[leftSpace][button1]-[button2][rightSpace]|", options: [], metrics: nil, views: views))

// Now set the layout guides widths equal, so that the space on the 
// left and the right of the buttons will be equal
leftSpace.widthAnchor.constraintEqualToAnchor(rightSpace.widthAnchor).active = true

アンカースタイル

let leadingSpace = UILayoutGuide()
let trailingSpace = UILayoutGuide()
view.addLayoutGuide(leadingSpace)
view.addLayoutGuide(trailingSpace)

leadingSpace.widthAnchor.constraintEqualToAnchor(trailingSpace.widthAnchor).active = true
    
leadingSpace.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true
leadingSpace.trailingAnchor.constraintEqualToAnchor(button1.leadingAnchor).active = true
    
trailingSpace.leadingAnchor.constraintEqualToAnchor(button2.trailingAnchor).active = true
trailingSpace.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true

これにも垂直方向の拘束を追加する必要がありますが、これは「ダミー」ビューを追加することなくビュー内のボタンを中央に配置します！これにより、システムは、それらの「ダミー」ビューを表示する際にCPU時間を無駄にしないようになります。この例ではボタンを使用していますが、制約を設定するビューのボタンを交換することができます。

iOS 8以前をサポートしている場合は、このレイアウトを作成する最も簡単な方法は、隠しダミービューを追加することです。 iOS 9では、ダミービューをレイアウトガイドに置き換えることができます。

注：Interface Builderはまだレイアウトガイドをサポートしていません（Xcode 7.2.1）。したがって、それらを使用する場合は、コードで制約を作成する必要があります。 ソース 。

UILabel組み込みサイズ

私たちは、テキストにイメージプレフィックスを持つビューを作成する必要があります。テキストは可変長であってもかまいません。Image + textが常に親ビューの中心にある結果を達成する必要があります。

ステップ1：最初に単一のビュープロジェクトを作成し、それに名前を付けて名前を付け、ストーリーボードのfistビューを開きます。適切なサイズのビューを作成し、背景色を黄色に設定します。ビューコントロールを3.5インチにサイズ変更しました。ビューはこのようないくつかのものを見てください

ステップ2：黄色のビューに制約を追加します。まず、幅と高さの制約を追加します（ビューには動的な幅があるとは言えませんでしたか？以下の画像のような制約は、幅の値を気にしないでください。幅は十分に大きく、自動レイアウトを適切に追加できるだけの大きさにしてください。

これら2つの制約を追加すると、下の図のようにXCodeがエラーを表示し、それらを見て理解できることがわかります。

2つのエラーがあります（赤はエラーを意味します）。前述したように、あいまいさの部分

欠落している制約：制約が必要です：X位置： - 上で説明したように、ビューに幅と高さを指定してその「囲み」を定義しましたが、原点を指定していないため「フレーム」は定義されません。 Autolayoutは、私たちの黄色いビューのXポジションが何であるかを特定することができません

欠落している制約： Y位置の制約があります： - 上で説明したように、ビューに幅と高さを指定してその「囲み」を定義しましたが、原点を指定していないため「フレーム」は定義されません。 Autolayoutは私たちの黄色いビューのY位置を決めることができません。これを解決するには、XとYを元に戻すためにautolayoutを与えなければなりません。フレームを設定できないので、autolayout wayを実行します。下の画像私は後で説明します

私たちが行ったことは、これらの制約が自動レイアウトに、私たちの黄色のビューが常に中央にあることを伝える「垂直中心」と「水平中心」を追加したことです。水平方向：決定されたXは垂直方向の制約であり、Yフレームを調整する必要があるかもしれません）。

ステップ3：ここまでで、私たちの基本的な黄色のビューが準備完了です。プレフィックス画像に黄色のビューのサブビューとして以下の制約を追加します。任意の画像を選択できます。

プレフィックス画像の寸法が固定されているので、この画像ビューの幅は固定されています。制約を追加し、次のステップに進みます。

ステップ4：黄色のビューのサブビューとしてUILabelを追加し、次の制約を追加する

あなたが見ることができるように私はUILabel.Itsに相対的な制約のみを与えました。プレフィックスイメージから8ポイント、黄色のビューから0,0,0上端と下端です.Widthを動的にしたいので、幅または高さの制約を与えません。

Q：なぜ今は何のエラーも出ていないのですが、幅と高さを与えていないのですか？ Ans： - 自動レイアウトが画面上でビューをレンダリングする必要があるものを解決できない場合にのみ、エラーまたは警告が表示されます。高さの幅または原点になります。ラベルは黄色のビューおよびプレフィックスイメージとそのフレームautolayoutはラベルのフレームを計算できます。

ステップ5：ここで、黄色のビューを固定ビューで表示していることがわかりますが、ラベルのテキストに応じて動的に表示するようにします。黄色のビューの幅の制約を変更します。黄色のビューの幅あいまいさを解決するためには必要ですが、UILabelの内容に基づいて実行時に却下したいと考えています。そこで、黄色のビューを選択してサイズインスペクタに行き、幅制限の優先度を1に下げて、それが罫線を越えるようにします。以下の画像に従ってください。

ステップ6：テキストに応じてUILabelを展開し、黄色のビューをプッシュしたいので、黄色のビュー幅の優先順位を下げました。次に、UILabelのテキスト圧縮抵抗の優先順位を上げます。うーん、私たちはUILabelのコンテンツの抱擁の優先順位を高めるでしょう。下の画像に従う

ご覧のとおり、コンテンツのハギングの優先度を500、圧縮の優先度を751にすると、幅の制約の優先度が正常に上回ります。

今ビルドして実行すると、次のようなことが表示されます。

オートレイアウトでアニメーションを作成する方法

自動レイアウトを使用しないと、時間の経過とともにビューのフレームが変更され、アニメーションが完成します。自動レイアウトでは、制約によってビューフレームが決定されるため、代わりに制約をアニメートする必要があります。この間接指定は、アニメーションの視覚化をより困難にします。

自動レイアウトでアニメーションを作成する方法は次のとおりです。

1. 定期コール（ CADisplayLink 、 dispatch_source_t 、 dispatch_after 、 NSTimer ）を使用して、作成後に制約の定数を変更します。その後、 layoutIfNeededを呼び出して制約を更新します。例：

目標-C：

self.someConstraint.constant = 10.0;
[UIView animateWithDuration:0.25 animations:^{
    [self.view layoutIfNeeded];
}];

迅速：

self.someConstraint.constant = 10.0
UIView.animate(withDuration: 0.25, animations: self.view.layoutIfNeeded)

2. 制約を変更し 、アニメーションブロック内で[view layoutIfNeeded]を呼び出します。これは、アニメーション中に制約を無視して、2つの位置の間を補間します。

[UIView animateWithDuration:0.5 animations:^{
    [view layoutIfNeeded];
}]

3. 制約の優先順位を変更します 。これは、制約を追加したり削除したりするよりも、CPUの負荷が少なくなります。

4. すべての制約を削除し、自動サイズ調整マスクを使用します 。後では、 view.translatesAutoresizingMaskIntoConstraints = YESを設定する必要があります。

5. 意図したアニメーションに干渉しない制約を使用します 。

6. コンテナビューを使用します 。制約を使用してスーパービューを配置します。次に、アニメーションと戦わない制約を持つサブビューを追加します。たとえば、スーパービューに対する相対的な中心です。これにより、制約の一部がスーパービューにアンロードされるので、サブビューのアニメーションとは戦わない。

7. 代わりにレイヤーをアニメートします 。レイヤー変換は自動レイアウトをトリガーしません。

CABasicAnimation* ba = [CABasicAnimation animationWithKeyPath:@"transform"];
ba.autoreverses = YES;
ba.duration = 0.3;
ba.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1)];
[v.layer addAnimation:ba forKey:nil];

8. layoutSubviewsをオーバーライドします 。 [super layoutSubviews]を呼び出し、制約を微調整してください。

9. viewDidLayoutSubviewsのフレームを変更します 。自動レイアウトはlayoutSubviewsに適用されviewDidLayoutSubviews 。一度終了したら、 viewDidLayoutSubviewsで変更してください。

10. 自動レイアウトからオプトアウトし、手動でビューを設定します。これを行うには、スーパークラスの実装を呼び出さずにlayoutSubviews / layoutをオーバーライドします。

クイックヒント：アニメーションビューの親が補間されていない場合（つまり、アニメーションが最初から最後の状態にジャンプする場合）、アニメーション化されたビューの親である最も深いビューでlayoutIfNeeded()を呼び出しますアニメーションの影響を受けません）。なぜ私はこの作品が正確にわからない。

UILabelの優先順位の競合を解決する

問題 ：ビュー内で多数のラベルを使用すると、 警告が表示されることがあります 。

どのようにしてこの警告を修正できますか？

解決策 ：優先度を順番に計算して設定します。優先順位はラベルと異なる必要があります。重要なことが優先されることを意味します。たとえば、私の場合は、ラベルの縦の優先順位を次のように設定します。

1番目のラベルは最優先、4番目のラベルは最下位に設定しました。

ViewControllerでは、これらの優先順位の効果を見るのは難しいと思います。しかし、UITableViewCell +セルの高さの見積もりは非常にはっきりしています。

この助けを願っています。

UILabelのテキストによるUILabelとParentviewのサイズ

ステップバイステップガイド： -

ステップ1： - UIViewに制約を設定する

1. 先導。 2）トップ。 3）トレーリング。 （メインビューから）

ステップ2： -制約1をラベル1に設定する

1. リーディング2）トップ3）トレーリング（スーパービューから）

ステップ3： -制約をラベル2に設定する

1. リーディング2）トップ3）トレーリング（スーパービューから）

ステップ4： - ほとんどのトリッキーな UIViewからUILabelに一番下を与える。

ステップ5： - （オプション）制約をUIButtonに設定する

1. 先導2）下3）後退4）固定高さ（メインビューから）

出力： -

注： - LabelプロパティでNumber of lines = 0を設定していることを確認してください。

私はこの情報がUILabelの高さに応じて自動サイズ変更UIViewを理解し、UILabelをAutoresizeについて十分理解しています。

ビジュアルフォーマット言語の基本：コード内の制約！

HVFLは、UI要素を簡単かつ迅速に制約するために設計された言語です。一般的に、VFLはInterface Builderの伝統的なUIのカスタマイズよりもはるかに読みやすく、アクセスしやすく、コンパクトであるという利点があります。

ここでは、3つのUIViewが左から右に制約され、 superView.width埋めるVFLの例をaGradeView

"H:|[bgView][aGradeView(40)][bGradeView(40)]|"

UIオブジェクトを水平、垂直に制限する2つの軸があります。

VFLの各行は常にH:またはV:始まります。いずれも存在しない場合、デフォルトのオプションはH:

私たちにはパイプラインがあります。 |このシンボルまたはパイプは、スーパービューを参照します。上記のVFLコードのスニペットを詳しく見てみると、これらのパイプラインのうちの2つに気づくでしょう。

これは、スーパービュー、アウターレフトおよびアウトライト境界の2つの水平端を意味する。

次に、角括弧の最初のセットの中に、いくつかの角括弧が表示されます。ここには、 bgViewます。角カッコがあるときは、UI要素を参照しています。名前と実際のUI要素（アウトレット）との間のリンクを確立する方法が不思議に思うかもしれません。

私はポストの終わりにそれをカバーします。

第2ペアの角括弧[aGradeView(50)]を見ると、括弧もカプセル化されています。存在する場合、軸に応じた幅/高さを定義します。この場合は50です幅のピクセル。

最初の大括弧[bgView]は、明示的に定義された幅がありませんでした。つまり、可能な限り広がっています。

さて、それは基本のためのもので、別の例の高度なものの詳細です。

例えば：

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // horizontal
    NSArray *blueH = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:@{@"blueView" : blueView}];
    [self.view addConstraints:blueH];

    // vertical
    NSArray *blueVandRedV = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllTrailing metrics:nil views:@{@"blueView" : blueView, @"redView" : redView}];
    [self.view addConstraints:blueVandRedV];

    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redW];

自動レイアウトと非自動レイアウトの混在使用

場合によっては、 UIKit自体で行われる自動レイアウト計算にいくつかの追加アクションを実行することもできます。

例： maskLayerを持つUIViewがあるmaskLayer 、 Auto LayoutがUIViewのframe変更するとすぐにmaskLayerを更新する必要があるかもしれません

// CustomView.m
- (void)layoutSubviews {
    [super layoutSubviews];
    // now you can assume Auto Layout did its job
    // you can use view's frame in your calculations
    CALayer maskLayer = self.maskLayer;
    maskLayer.bounds = self.bounds;
    ...
}

または、 ViewController 自動レイアウトに何らかの追加アクションを実行するViewController

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    // now you can assume all your subviews are positioned/resized correctly
    self.customView.frame = self.containerView.frame;
}

プロポーショナルレイアウト

制約は次のように作成されます

NSLayoutConstraint(item: myView, attribute: NSLayoutAttribute.Leading, relatedBy: NSLayoutRelation.Equal, toItem: view, attribute: NSLayoutAttribute.LeadingMargin, multiplier: 1.0, constant: 20.0)

または、数学の観点から：

view.attribute * multiplier + constant          (1)

乗数を使用して、異なるサイズ係数の比例レイアウトを作成することができます。

例：

ターコイズ・ビュー（Turquoise View）（V1）は、比率1：1.1の幅に比例するスーパービュー幅の正方形です

Gary square（V2）はV1のサブビューです。底部空間は定数= 60で設定され、後続空間は乗数= 1.125で設定され、定数= 0

後続のスペースは比例して設定され、下のスペースは定数として設定されます。

注意：view.attributeが0（例：先頭のスペース）であれば、制約式（1）は0になります。view.attribute！= 0にするには、 0。

NSLayoutConstraint：コード内の制約！

フレームワークで作業しているときに、制約があまりにも複雑ではない場合は、Interface BuilderまたはNSLayoutConstraintをコード内で使用して、MasonryまたはSnapKitをインポートするのではなく、十分に小さくしてください。

例えば：

• 目標-C

    // 1. create views
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [self.view addSubview:blueView];

    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];

    // 2. forbid Autoresizing
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    redView.translatesAutoresizingMaskIntoConstraints = NO;

    // 3. make contraints
    // 3.1 blueView
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    [self.view addConstraint:blueLeft];

    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
    [self.view addConstraint:blueTop];

    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:blueRight];

    NSLayoutConstraint *blueHeight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:50];
    [self.view addConstraint:blueHeight];

    // 3.2 redView
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1 constant:20];
    [self.view addConstraint:redTop];

    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:redRight];

    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    [self.view addConstraint:redHeight];

    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    [self.view addConstraint:redWidth];