Swift2を使用したiOS開発-自動レイアウト
iOSアプリケーションを作成し、そのアプリケーションにUI要素を追加すると、1つのデバイスで完璧に見える場合があります。それでも、他のデバイスで同じアプリケーションを試す必要があります。確かにUIが大幅に変更され、一部の要素も表示されない可能性があります。
自動レイアウトは、この問題を解決するために使用する手法です。この章では、自動レイアウト、制約の適用、およびスタックビューを作成して、アプリケーションをすべてのデバイスで完璧に表示する方法を理解します。
まず、新しいシングルビューアプリケーションを作成します。
要素の追加
以下に示すように、ビューの上部中央とビューの右下にラベルを追加します-
ここで、向きを変更してみてください。中央が中央にないのに、右下が表示されないことがわかります。
（（Tip −レイアウトを表示するためにシミュレーターを実行する必要はありません。次のスクリーンショットに示すように、画面の下部にある[表示]-[iPhone x]をクリックするだけです。）
iPhoneのバージョンと向きを選択します。UI要素が正しく配置されていないことがわかります。したがって、向き、デバイス、またはその両方を変更すると、右下のラベルが消え、中央が中央に表示されなくなります。
これは、要素の固定位置を指定していないために発生します。これを解決するために、制約を使用します。
UI要素への制約の適用
センターラベルをクリックし、コントロールを押して、ビュー内の任意の場所にドラッグし、離します。今、あなたは見ているに違いありません-
選択する Center Horizontally in Container。繰り返しますが、上記の手順を繰り返して、[垂直方向の間隔から上部のレイアウトガイド]を選択します。
次に、[新しい制約の追加]ボタンをクリックして高さと幅を選択し、[2つの制約の追加]をクリックします。
右下のラベルをクリックし、ラベルからビュー内の任意の場所へのドラッグを制御して、[スペースをコンテナマージンに移動]を選択します。同様に、「垂直方向の間隔から下部のレイアウトガイド」を選択します。
(Tip−一度に複数のオプションを選択するには、Shiftキーを押しながらオプションを選択します。すべてを選択するまで、シフトを解放しないでください。）
すべての制約を適用すると、ビューは次のようになります。
スタックビュー
スタックビューは、要素をスタックに配置することで機能します。配置後、制約を1回だけ定義し、それに応じてすべての要素を配置します。スタックビューから始めるには、次のビューを作成します。これは、他のデバイスでは見栄えがよくありません。ただし、このセクションでは他のデバイスにも適したものにします。
次に、上の2つのボタンを選択します。1つのボタンを選択し、コマンドを押してから、2番目のボタンを選択します。それらをスタックビューに埋め込むには、エディタ→埋め込み→スタックビューに移動します。
OR
右下隅にオプションがあります。
水平スタックビュー
水平スタックビューは、次のスクリーンショットに示すようになります。
このスタックビューが選択されている間に、属性インスペクターに移動します。分布を均等に塗りつぶし、間隔を10に変更します。
次に、このスタックビューと下のボタンを選択して、スタックビューに再度埋め込みます。今回はスタックビューの軸が垂直になりますが、前のスタックビューでは水平でした。
垂直スタックビュー
これで、ビューは次のようになります。
このスタックビューが選択されている間に、その属性インスペクターに移動し、以下のスクリーンショットと一致することを確認します。
これで、ビューは次のようになります。
最後のステップは、このスタックビューの制約を作成することです。
スタックビューを選択→[新しい制約の追加]ボタンをクリックします。
これにより、次のスクリーンショットに示す手順に従う必要がある新しいウィンドウが開きます。
スタックビューへの制約の追加
次のスクリーンショットは、スタックビューに制約を追加する方法を説明しています。
自動レイアウトで行うのはこれだけです。次の章では、アニメーションについて説明します。
自動レイアウトで行うのはこれだけです。次の章では、アニメーションについて説明します。