読者です 読者をやめる 読者になる 読者になる

しめ鯖日記

swift, iPhoneアプリ開発, ruby on rails等のTipsや入門記事書いてます

【AutoLayout】縦向きと横向きで違うLayoutを実現する

同一のStoryboardで縦と横 別々のAutoLayoutを適用する方法です。

まずは普通にAutoLayoutを適用します。
左右と下に44pxの空白と、高さ128pxの制約をかけます。

f:id:llcc:20160610232438p:plain

実行すると縦・横の表示は以下のようになります。

f:id:llcc:20160610232558p:plain

f:id:llcc:20160610232621p:plain

これを横向きの時は下のスペースを0pxにしてみようと思います。

その為に先ほどのUIViewに下部スペース0pxの制約を付けます。
すると以下のようにエラーになるかと思います。

f:id:llcc:20160610233107p:plain

次に0pxのLayoutにWidthがAnyでHeightがCompactの設定を追加します。
同時に無印のチェックボックスを外します。

こうする事でHeightがCompact(横向き)の時だけ0px制約がかかるようになります。

f:id:llcc:20160610233223p:plain

この状態で実行すれば、縦向きの時は下部スペース44pxで横向きの時は0pxの状態が出来上がります。

f:id:llcc:20160610233405p:plain

f:id:llcc:20160610233413p:plain