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