【Swift】AutoLayoutを使って、どの端末でも上下半分にレイアウトを分割する方法を紹介

このように、autoLayoutを使って、

  • すべての端末
  • すべてのモード(縦向き・横向き)

で、上下半分にレイアウトを分ける方法をご紹介します。

UIViewを2つセットする

まずは、適当に上下のUIViewをそれぞれstoryboardにセットします。

今回は、わかりやすいようにピンクと青の背景をつけました。

上下・左右マージン0のconstraintsを追加

この図のように、先程追加した2つのViewコンポーネントに上下左右0の4つのConstraintsを追加します。

2つのViewコンポーネントを同時選択して、Equal Heights Constraintsを設定する

2つのViewコンポーネントをShiftを押しながら同時選択して、上図のように「Equal Heights」Constraintsを追加します。

うまく追加できると、このように「=」マークが2つのViewに表示されるようになり、同じ高さをConstraintsで固定することができます。

ABOUTこの記事をかいた人

新卒でノマドワーカー(webデザイナー)として独立し、半年で月収100万円を達成する。その後、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んできました。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは、お金のことを考えずに、様々な企業でエンジニア修行をさせていただきながら、複数のメディアやアプリとweb制作事務所を運営しています。 趣味は株式投資(米国・日本株メイン)で、トレードを楽しむ日も多いです!