SwiftおよびiOSでのXcode自動レイアウトの操作

自動レイアウトは、iOSデバイスのユーザーインターフェイスの開発に使用される制約ベースのレイアウトシステムです。自動レイアウトとも呼ばれるこのレイアウトベースの制約システムは、基本的に、さまざまなサイズと向きの画面に適応する適応型UIです。

自動レイアウトは、開発者が隣接要素または親要素間の関係を定義してその位置を取得するという制約に完全に依存しています。

自動レイアウトを選択する理由

iOSアプリケーションを設計する際には、確認する必要がありますが、開発するUIは、すべての画面サイズと向きと同等に互換性がある必要があります。自動レイアウトは、必要なときに便利です。

以下の画像を検討してください。 iPhone 6の中央に保持されているボタンは、他のデバイスの中央に配置されません。これは、iOSデバイスごとにサイズが異なるためです。この投稿では、制約に焦点を当てます。ディメンションについて詳しく知りたい場合は、http：//iosres.com/

開発したUIがすべてのデバイスと向きで均一であることを確認するために、自動レイアウトを使用します。それでは、始めましょう。

ステップ1 −Xcodeを開く→新しいプロジェクト→シングルビューアプリケーション→「AutoLayout」という名前を付けましょう

ステップ2 − Main.storyboardを開き、以下に示すようにボタンを追加します。参照用に、iPhone7Plusとしてデバイスを選択します。

ここでは、制約なしにランダムな場所に1つのボタンを追加したことがわかります。私たちの目的は、このボタンを中央に配置し、すべてのデバイスと向きに互換性を持たせることです。ステップ3に進む前に、正確に何をする必要があるのか​​、そしてこれをどのように達成するのかを理解しましょう。

Xcodeには、自動レイアウト制約を定義する2つの方法があります→自動レイアウトバーとControlキーを押しながらドラッグします。このブログでも自動レイアウトバーを頻繁に使用しますが、Control-dragの使用方法も必ず説明します。 Interface Builderの右下隅にあるXcodeに、制約を定義するために使用されるレイアウトボタンとして知られている5つのボタンが表示される場合があります。

そこで、自動レイアウトバーを使用して、両方のボタンに制約を設定します。

完全な制約システムが機能する主な理論は、4つのパラメーター（リーディング、トレーリング、トップ、ボトム）と、高さ、幅、垂直方向と水平方向の中心です。

ステップ3 − [整列]のボタンとタブをクリックし、以下に示すように、コンテナ内で水平方向と垂直方向を有効にします。

両方の制約を追加すると、ボタンが画面の中央に配置されていることがわかります。

オプションで、以下に示すように、コントロールドラッグ機能を使用して同じことを実現できます。UIコンポーネントを選択し、コントロールボタンをタップしてドラッグし、制約を与えます。中央を水平および垂直に与えます。

ステップ4 −次に、ボタンの幅と高さを定義します。以下に示すように、[新しい制約を追加]オプションを選択し、高さと幅を追加します。

または、コンテナに水平方向および垂直方向に提供したくない場合は、先行制約、後続制約、上マージン、および下マージンを提供できます。

ステップ5 −したがって、必要なすべての制約を提供しました。常に4つのエッジを覚えて、X軸に揃え、Y軸に揃え、幅と高さを設定する必要があります。UIコンポーネントを取得する必要があります。

次に、さまざまなデバイスで実行して結果を確認しましょう。さまざまなデバイスと向きで実行されます。

制約を変更または削除する場合は、右側のペインのユーティリティ領域で5番目のオプションを選択し、画像に示すように下にスクロールすることもできます。

したがって、このチュートリアルは、自動レイアウトと制約を使用してアダプティブUIを開発する方法について簡単に説明することを目的としています。上記の基本概念を使用して、複数のコンポーネントを試すことができます。