自動レイアウトの構造

ソース(正式文書):https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

🐶 緒論

✔¥用語

Baseline

は、自動レイアウトのビュー内のテキストの下部の位置を示します.

Leading自動レイアウトのビューオブジェクトの左側の余白を表します

(簡単に言えば、アメリカでは文章の起点が左なので左)

Trailing自動レイアウトでは、ビューオブジェクトの右側の距離は

です.

Safe Area

デバイスに表示可能な臨界領域

勘定科目の自動レイアウトでは、属性が2つに分類されます。

サイズ:幅、高さ

位置:top、leading、centerX等

🐯 直接設定Constraint

1.決める

マージン
別のビュー(親ビューでも可)とのborder距離を設定

中央揃え
他のビュー(親ビューでも可)に基づくcenter設定

高さ/幅比率の設定
heightとwidthのスケールを設定する

複数のオブジェクトの幅を同じにする
ビューを組み合わせて、同じ幅/高さにします(Equal Widths/Heights)

複数のオブジェクトの中で最も広い幅に統一
最も広いview(Top/Lading Edges)に適応するためにviewを組み合わせる

2.不確定範囲

「Nより大きく、Mより小さい」のように範囲を与える方法.
もちろん単独では使用できませんが、他の明確な制限のあるビューによって決まります.

3.Constraint間の優先度の設定

コンストレイントは繰り返すことができます.そのため、優先度を設定することもできます
1～1000(数字が大きいほど強いdefault:1000)
2号コンセプト「範囲サイクル」のデフォルト値を指定する場合に使用できます.
[例の状況]

より大きい制約1:50(優先度1000)

製薬2:70(優先750)

[結果]
->70が可能な場合は、コンストレイント2(Constraint 2)が既定です.
->70不可:コンストレイント1を任意に設定する

🐸 内部コンテンツベースに設定

✔¥intrinsic content sizeを持つ要素default sizeを持つ

通常のビューとは異なり、Button/Labelなどにはcontentがあるため、内容から自分のsizeを推定することができる(「intrinsiccontent sizeがある」を示す)
すべての内容がsizeを推測できるわけではないので、設定/状況を考慮する必要があります.(ex.text viewはスクロールするかどうかによって異なります)

✔▼コード固有サイズ付与

UIViewの例として,固有の大きさを付与しようとする.

// 1. UIView class 생성
// CustomView.swift
import UIKit

// 2. view를 @IBDesignable class로 지정
@IBDesignable
class CustomView: UIView {
	// 3. instrinsicContentSize 계산프로퍼티 재정의
	override var intrinsicContentSize: CGSize {
    	return CGSize(width: 10, height: 10)
    }
}

✔内部コンテンツの保守能力（CHCR）

Content-Hugging外部に容器を大きくする場合はcontentを超えたくない.

Compression-Resistance容器の大きさを外部で小さくし、内容を小さくしないようにする力.
簡単に言えば、CHCRは容器自身の内容を保護する力である.

これはどこで使いますか.
[例-Hugging]
3つのラベルが並んでいて、互いに5 pt間隔を置いて、+Safeから5 ptまでです.ここに設定するだけでwidthの設定が必要なエラーが発生します
問題は、ここでは、他のラベルは任意に追加できますが、特定のラベルはコンテンツに一致する程度に追加したくない場合があります.
[結果]
このラベルに最も高いContent-Hugging priorityを設定すると、残りのラベルは残りのスペースを埋めることに悩んでしまいます

🐣 使いやすい

✔朕拘束に復帰

自動レイアウトを適用すると、位置を任意に移動すると黄色になります
右下のrefreshボタンを使用すると元の位置に戻ります

✔Ctrl+Drag(+Optionキー)

右下のメニューを使わずに、オブジェクトCtrl+Dragを手に取ると、自動レイアウト選択用紙の一部が表示されます
また、この状態でOptionキーを押すとdetail文が追加されます

その他:複数デバイスのプレビューを一度に表示

上部タブでEditor->Previewからデバイスを追加できます