自動レイアウトの基本-コンセプト、構造、アプリケーション

自動レイアウトは、 制約(特定のビューに指定されたルール)に基づいて、 ビュー階層内のすべてのビューの位置とサイズの動的な計算を行います 。 自動レイアウトを使用する開発者にとって最大かつ最も明白なプラスは、アプリケーションを特定のデバイスに適合させる必要がなくなることです。自動レイアウトはこれを行い、外部または内部の変更に応じてインターフェースを動的に変更します。



外部変更の例としては、macOSのウィンドウのサイズ変更、画面の向きの変更、さまざまな画面サイズがあります。



内部変更の例:ウィンドウのコンテンツの変更、言語に応じた変更など。



3つの方法でインターフェイスを作成できます。プログラムに基づいて、変更に合わせて自動的に調整するマスクに基づいて、または自動レイアウトを使用します。



自動レイアウトと他のメソッドの違いは、ウィンドウやその他の要素のサイズに応じてインターフェイスを変更するコードを記述する必要がなくなったことです。代わりに、自動レイアウトはアプリケーション内のインターフェイス要素の位置を個別に計算し、環境に応じて変更します。



自動レイアウト無制限



何らかの理由でルール( 制約 )を使用したくない場合、またはインターフェイスに多くの要素が含まれていて、その場所を無限に変更できる場合、 スタックビューが役立ちます。



スタックビューは、複雑なインターフェイスを作成する際の命の恩人です。 指定されたパラメーターを使用して、自分自身内の要素を配置できます。



axis (UIStackViewのみ)-水平または垂直方向を定義します。

方向 (NSStackViewのみ) -UIStackViewの 同じです。

分布 -特定の方向の要素の位置を決定します。

整列 -StackViewの方向に垂直な要素の位置を決定します。

間隔 -隣接する要素間の距離を決定します。



最も満足のいく結果を得るには、StackView自体で制約を使用するか、StackViewでいくつかのStackViewをネストしてから 、たとえば画面の中央に制約を使用します。



制約の構造



ルールの全体的なポイントは、インターフェイス要素の場所という1つの答えしか持たない計算を作成することです。



次のようになります。



ボタン上=最高のインターフェイスポイント、下+ 100



この式から、それが何を意味し、どのルールがビューに設定されるかが明確になります 。 既に述べたように、自動レイアウトの計算は、画面の境界であろうと隣接するボタンであろうと、常に最も近い要素に対して行われます。



計算の制約では、上記の例の要因、最も近いオブジェクト、および+ 100のような定数を使用します。 また、ルールを作成するとき、これらが等式である必要はなく、> =または<=を使用できます。



レイアウトを作成するときは要素ごとに各ディメンションに2つのルールを指定することをお勧めします。 ただし、インターフェイスを作成するときに役立つStackViewを忘れないでください。



最も興味深い事実は、 制約を作成するときに、 制約自体に優先順位を付けることができるということです。 計算時に、自動レイアウトはすべての制約を優先度順に満たそうとします。 優先度= 1000-必須。 他のすべての優先度の低いルールを設定して、インターフェイスの要素のレイアウトの処理を明確にすることができます。 制約の1つが正しく計算されない場合、自動レイアウトは最も近い制約を使用し、それに基づいて構築を開始します。 それでも、インターフェイスをさまざまなルールでオーバーロードせず、アドオンを使用して目的の結果を達成することを強くお勧めします。



自動レイアウトとそのコンポーネントの作成



3つの方法で制約を作成できます。



1. CTRLキーを押しながら、たとえばラベルから上部の境界線にドラッグアンドドロップします。

2. Stack、Align、Pin、Resolveツールを使用します。

3. Interface Builderを提供して、自分の場所で制約を作成します。



これらのポイントの中で、このパネルの使用がマークアップを作成するための主要なツールであるため、2番目が最も重要です。



スタック -実際には、選択したインターフェイスの詳細をStackViewに配置できるのと同じボタン。 Interface Builderは、要素の場所に応じてStackViewがどうなるかを自分で決定します。 Stackボタンに加えて、他の要素と同様にオブジェクトのライブラリからドラッグしてStackViewを作成できます。



整列 -横から、中央から垂直、または下から、特定の行に要素を明確に設定できるメニュー。 テキストエディタでテキストを中央または厳密にページの先頭の左に揃える場合、このアプローチをよく使用します。



ピン -サイズまたは最も近い被写体に関連してハードフレームを設定できるメニュー。 その中で、どの方向に設定する制約を選択し、そのパラメータを設定します。 また、このメニューを使用して、たとえば、ボタンのグループに同じサイズを与えることができます。これは、画面の縮尺にかかわらず変化しません。



Resolve Toolsは、 制約のデバッグに最適なヘルパーです。 このメニューの主な機能は、すべてのルールの削除、推定制約の追加(Interface Builderがすべてのルールを作成します)、不足している制約の追加、 制約またはフレームの更新(オブジェクトの位置)です。

ご覧のとおり、かなり重要な点がいくつかあり、開発者の負担をすべて軽減するように設計されています。



サイズインスペクターまたはドキュメントアウトラインリストにあるInterface Builderで制約をクリックして、 制約を編集できます 。 パラメーターを編集するとき、さまざまなデバッグを実行するときにログおよびコンソールでそれらをより簡単に理解して見つけるために、識別子を設定できます。



要素のルールを設定する際の重要な側面は、パラメーターCHCR (Content-HuggingおよびCompression-Resistance Priorities)です。これらのパラメーターは、親ビューに応じて要素自体の変更に影響します 。 大まかに言って、 ハグは要素が増加することを望まないことであり、 圧縮抵抗は減少することを望まないことです。 たとえば、CHCRパラメーターを使用すると、StackView内の要素のサイズに応じて、その要素の圧縮/拡大率を変更できます。



注意してください-macOSとiOSは異なるレイアウトを計算します :macOSでは、自動レイアウトはウィンドウのサイズとコンテンツのサイズを変更できます。iOSでは、システム自体がアプリケーションのサイズと境界を決定するため、コンテンツのサイズのみを変更できます。



この記事を書くとき、私は公式の自動レイアウトガイドの資料に基づいています



All Articles