iOS フローティング レイアウト用 MyLayout レイアウト シリーズMyFloatLayout_html/css_WEB-ITnose

はじめに

MyLayout の 6 つの主要なレイアウトのうち、各レイアウトには異なるアプリケーション シナリオがあります。そして、各レイアウトのサブビューの制約メカニズムは異なります: リニア レイアウト MyLinearLayout、テーブル レイアウト MyTableLayout、フロー レイアウト MyFlowLayout、フローティング レイアウト MyFloatLayout これら 4 つのレイアウトのサブビュー間の制約は、次の順序で行われます。親レイアウトに追加されるサブビューは、フレーム レイアウト MyFrameLayout の親レイアウト ビューにのみ関連し、相対的な MyRelativeLayout のサブビューに追加される順序とは関係ありません。レイアウトは、ビューを設定することによって設定されます。 制約は、追加された順序に関係なく、それらの間の依存関係に基づいて確立されます。それでも、場合によっては、どちらのレイアウトを使用しても同じインターフェイス機能を実装できます。これらのレイアウトでは、相対レイアウトはビュー間の依存関係を設定することによってレイアウト制約を確立するため、これを使用して複雑で不規則なインターフェイス レイアウトを構築できますが、欠点は制約に依存しすぎて、インターフェイスが調整されると、ビュー間の依存関係をリセットする必要があります (iOS の AutoLayout は実際には相対レイアウトの実装です。レイアウト中に設定する必要のある制約が多すぎるため、私は常に AutoLayout を批判してきました)。それでは、ビュー間の依存関係を設定せずに、複雑なインターフェイスのレイアウトを実装する方法はあるのでしょうか? これが、フローティング レイアウト MyFloatLayout を立ち上げた理由です。

フローティング

UI インターフェイスには常にシナリオがあります。コンテナ ビューの後から追加されたサブビューの左側は常に、以前に追加されたサブビューの右側のすぐ後に続き、上側の後には前のビューの上側はドッキング表示で一貫したままであり、コンテナ ビューの残りの幅スペースが新しく追加されたサブビューを収容するのに十分でない場合、新しく追加されたサブビューは自動的に下に移動し、コンテナ ビューを覆わずに使用できる場所を見つけます。すでに配置されているビューを、その幅に合わせて最適な位置にドッキングします。この仕組みをフローティングと呼びます。たとえば、次のシーン:

フローティング レイアウト画像 1

ビュー A を追加するとき、ビュー A の幅は 80 であるため、幅はコンテナ ビューに対応できます。そこで、ビュー A Floats をコンテナー ビューの左上隅に追加します。ビュー B を追加する場合、ビュー B の幅は 100 であるため、コンテナ ビューの幅にまだ収まる可能性があります (コンテナ ビューの残りの幅は 420)。そのため、ビュー B はビュー A の右側にフローティングされ、上に揃えました。ビュー C のフロートも同様に処理できます。このようにして、コンテナ ビューの残りの幅は 170 (500-80-100-150) になります。このとき、サイズ 200x100 の別のビュー D を追加したい場合、追加するビュー D の幅は 200 で、コンテナ ビューの残りの幅は 170 しかないため、ビュー D はフローティングできません。このときのビュー C の右側に、ビュー D を配置する適切な場所を見つける必要があります。フローティングの原理に従って、最も適切なフローティング位置はビュー A の右側であると計算され、前のビューが覆われないようにするために、ビュー D の最も適切な座標位置は (80,130) となります。以下はビュー D を配置した後の結果です:

フローティング レイアウト 2

フローティング ルールによれば、ビュー D の幅が 200 ではなく 400 の場合、ビュー D は右にフローティングできません。ビュー A (ビュー A の右側の残りの幅は 320 で、幅 400 に対応できません) の場合、フローティング ルールに従って、ビュー D は再び下に移動し、コンテナ ビューの左端 (0,180) の位置にフローティングされます。 。引き続き、新しいビュー E を追加しましょう。ビュー E のサイズは 100x50 です。それでは、ビュー E はビュー C またはビュー D の右側にフロートする必要がありますか? 答えはDの右側です。Cの右側のスペースも幅100を収容できますが、フローティングの規則に従いません。上で説明したフローティング ルールは、新しく追加されたビューの幅が収まる場合、新しく追加されたビューの上端は以前に追加されたビューの上端と位置合わせされ、新しく追加されたビューの左側は必ず一致するというものです。前に追加したビューの右側に配置されます。したがって、ビュー E をコンテナー ビューに追加した後の結果は次のようになります:

フローティング レイアウト 3

最後に、新しいビュー F の追加を調べてみましょう。ビュー F のサイズが 300x50 であるとします。次に、フローティング ルールに従って、ビューは E の右側にフローティングすることはできず、D の右側にフローティングすることもできません。この時点では、下方向に移動し続けることしかできません。左側はコンテナ ビューの左端にフロートし、上の位置はビュー D の下になります。最終的なレイアウト結果は次のとおりです:

Floating Layout 4

上の 4 つの写真から、フローティング ルールを要約できます。上記のフローティング ルールは、フローティング レイアウト MyFloatLayout のフローティング方向にすぎません: 最初に左にフロートし、次に下にフローティングします。フローティング レイアウトのフローティング メカニズムを使用すると、各サブビュー間の依存関係を明示的に設定するのではなく、ビューがレイアウト ビューに追加される順序のみに基づいて、不規則なビュー配置レイアウト シナリオを実現できます。以下は、最初に左にフローティングし、次に下にフローティングするためのフローティング ルールをまとめたものです:

1. レイアウト ビューに追加された最初のサブビューは、常にレイアウト ビューの左上隅にフローティングします。

2. 新しく追加されたサブビューの幅が、以前に追加されたビューの右側からレイアウト ビューの右側までの残りの幅のスペースに配置できる場合、新しく追加されたビューの左側の位置は次のようになります。以前に追加されたビューと等しい 新しく追加されたビューの右の位置は、以前に追加されたビューの上部の位置と一致します。

3. 新しく追加されたサブビューの幅が、以前に追加されたビューの右側の残りの幅スペースにレイアウト ビューの右側に配置できない場合、新しく追加されたビューは引き続き左側に表示されます。その幅を収容できる最小のスペースを収容でき、以前に追加したすべてのサブビューを妨げない最適な位置に配置します。

4. サブビューの幅がレイアウト ビューの幅以上の場合、サブビューは常にレイアウト ビューの左端の位置に移動し、上の位置は以前のすべての位置の最下位になります。サブビュー。

5. サブビューが重ならないようにしてください。

上記の 5 つのルールはフローティング レイアウトのフローティング ルールの定義であり、フローティング レイアウトのルール定義は実際には HTML の CSS の配置、つまりフローティング配置ルールから派生します。 CSS でのフローティング配置の本来の設計目的は、グラフィックとテキストの混合効果を実現するためにフローティング配置テクノロジをセットアップすることです。CSS では、要素に float 属性を指定でき、この属性の値を次のように設定できます。 left または right または none はそれぞれ、要素が左にフロートするか、右にフロートするか、またはフロートしないかを示します。同時に、要素に clear 属性を指定して float をクリアすることもできます。clear 属性には、left、right、both、none の 4 つの値を設定できます。 CSS のフローティング配置について詳しく知りたい場合は、「CSS Floating Positioning」と「CSS Floating Knowledge Sharing」の 2 つの記事を参照してください。

前述したように、CSS では float 属性を使用してフローティングの方向を指定し、clear 属性を使用してフローティングの消去操作を指定できます。フローティング レイアウト MyFloatLayout は、フローティング方向の設定と明確なフローティング特性もサポートしています。右のフローティングについては後ほど紹介します。 ここではまずフローティングを解除する機能と意味を紹介します。

フロートのクリア

上記のシナリオでは、新しく追加されたビューの幅に関係なく、コンテナー ビューの残りの幅が新しく追加されたサブビューを収容できる限り、サブビューは常にフロート状態になることがわかりました。右側は以前のビュー。しかし、実際のアプリケーション シナリオでは、特定のビューがこのデフォルトのフローティング ルールに準拠しないことを望みますが、新しく追加されたサブビューの左側が常にコンテナ ビューの左側、およびサブビューの上部と整列するようにします。最も多くのスペースを占める、以前に追加したビューの下に移動します。たとえば、次のような状況です。

Floating Layout 4

サブビュー C は、幅が 150 ですが、ビュー B の右側にフローティングできますが、実際には、ビュー C をビュー B の下部と左側にフローティングさせたいと考えています。 A コンテナビューと合わせて、現時点ではフロートをクリアするという概念を使用する必要があります。ビュー C に明確な浮動プロパティを設定して、ビュー C が必要な効果を達成できるようにします。 いわゆるフロートのクリアとは、ビューのデフォルトのフローティング ルールを無効にし、常にビューの左側をコンテナ ビューの左側に揃え、ビューの上部をフロートに設定することです。以前に追加したすべてと同じ方向にビューの最大高さは の下にあります。したがって、フローティング レイアウトの 6 番目のルールを導き出すことができます:

6. サブビューがクリア フローティング属性を設定している場合、レイアウト中のビューの左境界は常にコンテナ ビューの左境界と等しく、上境界は常に等しくなります。これは、同じ方向で以前に追加されたすべてのフローティング ビューの最高の高さよりも下に表示されます。

ビューの明確なフローティング プロパティを通じて、一部のビューをフロートではなく、新しい行を開始する効果を実現するように設定できます。

比例

上の例では、最初にビュー A と B を追加しました。次に、ビュー C を追加し、ビュー C をビュー B の右側にフローティングしたいとします。そして幅は埋められたAとBの残りの幅320(500-80-100)となります。 1 つの方法は、ビュー C の幅を手動で 320 に設定することです。これにより、目的の効果が得られます。ただし、実際のアプリケーションでは、A と B の幅が不確実である可能性があり、コンテナ ビューの幅も不確実です。そして、どのような状況であっても、次のレンダリングのように、ビュー C の幅が常に残りの幅を占めるようにします:

Floating Layout 6

上記のシナリオでは、代わりに、比例プロパティを使用して、ビュー C がコンテナ ビューの残りの幅の一定の割合を常に占めるように設定します。ここでの比率の設定は、全体レイアウトビューのフローティング方向の設定に基づきます。つまり、全体レイアウトビュー内のビューが左右のフローティングをサポートしている場合、比率は、全体レイアウトビューのフローティング方向の設定に基づいています。ビューの幅の値。レイアウト ビューが上下のフローティングをサポートしている場合、この比率はビューの高さの相対的な比率の値を指します。また、比率値の設定は 0 より大きく 1 以下でなければならないことに同意します。比率値を設定すると、新しく追加したビューに特定の幅や高さを設定する必要はなくなり、相対値を指定するだけで済み、フローティング レイアウトは現在のフローティング状況に基づいて幅を自動的に計算します。広さとか。具体的な計算式は次のとおりです。

比例値が設定されたビューの幅または高さ = (レイアウト ビューの幅または高さ - 前のビューの右または下の境界値) * ビューの比例値。

上の左右のフローティングの例で、ビュー C の比率を 1 に設定するとします。式の定義によれば、レイアウト ビューの幅は 500、前のビュー B の右境界値は 180 (100+80) です。したがって、ビュー C の最終的な幅は、320 = (500 - 180) * 1 となります。ビュー C の比率が 0.5 に設定されている場合、ビュー C の最終的な幅は 160 になります。そして、別のビュー D を追加し、その比率を 1 に設定するとします。前のビュー C の幅は 160 と計算されているため、その右マージン値は 340 (180+160) となり、ビュー D の最終的な幅は 160 (500 - 340)*1 となります。レンダリングは次のとおりです:

Floating Layout 7

フローティング レイアウトのサブビューは比率を設定することで残りの幅または高さを取得できるため、フローティング レイアウトの比率属性の新しいルールは次のように定義されます。

7. サブビューに比率属性が設定されている場合、ビューの幅または高さは、レイアウト ビューのフローティング方向の設定と比率の値の設定に基づいて自動的に計算されます。 0 より大きく 1 以下です。比率によって計算される幅または高さの計算式は次のとおりです: レイアウト ビューの幅または高さ - 前のビューの右または下の境界値) * レイアウト ビューの比率値ビュー

左右にフローティング

を上に表示します。 紹介したフローティングの例では、デフォルトは常に左にフロートし、上から下にレイアウトします。ただし、CSS の要素のフローティング配置は、同時に左または右のフローティングをサポートしていることも前述しました。また、フローティング レイアウトは、特定のサブビューを左または右にフローティングすることもサポートしています。サブビューをレイアウト ビューに追加する場合、左または右にフローティングを設定できますが、ビューは同時に左または右にする必要があります。ビューが右に浮かぶ場合、そのメカニズムは左にある場合と同じです。次のビューを確認できます:

レイアウト ビュー 8

ビュー A、B、C、D、E、および F が右にフローティングする場合、方向に加えて、他のルールもあることがわかります。左側のフローティング ビューの規則も同じです。レイアウト ビューのサブビューは、左または右にフロートするように設定でき、前の例では、すべてのサブビューが左または右のいずれかになります。ただし、実際のシナリオでは、一部のビューを左側にフローティングし、一部のビューを右側にフロートするように設定できます。たとえば、次の例:

Floating Layout 9

上記の例では、A、B、C、D、E、F の順序でレイアウト ビューにサブビューを追加し、C、D をセットします。 3 つのサブビュー E は左側にフローティングし、3 つのサブビュー A、B、および F は右側にフローティングします。左にフローティングするこれまでのすべての例では、残りの幅の比較は常にレイアウト ビューの右端に基づいて行われ、右にフローティングする前述のすべての例では、残りの幅の比較は常にレイアウト ビューの右端に基づいて行われます。レイアウトビューでは左マージンが標準です。では、レイアウト ビューのサブビューが左にフロートしたり、右にフロートしたりする場合、幅の境界をどのように考慮すればよいでしょうか?

上の左右のフローティングの例を分析してみましょう。フローティング レイアウトは常に追加順に実行されるため、上の例では 2 つのサブビュー A と B が右側にフローティングされ、ビュー C が右側にフローティングされます。左側に表示されると分かりやすくなります。ビュー D が左側にフローティングし、コンテナ ビューに挿入される場合を調べてみましょう。ビュー D がビュー C の右側にフローティングし、上端がビュー C と一致している場合、ビュー D のレイアウト幅がビューの一部をカバーすることがわかります。ビュー B のスペース。オーバーレイが発生した場合、フローティング レイアウトの定義 ルール 5 に準拠しないため、ビュー D は下に移動する必要があります。ビュー B の下部に到達するまでオーバーレイは発生しないため、上側が移動します。ビュー D の位置は 100 になりますが、左側の位置はビュー A の右側の位置と同じままです。ビュー E も左に移動します。ここでは、E と最後に追加した D が上部に位置合わせされたままである必要があります。ただし、位置合わせが上部に維持されると、E の幅に対応できなくなります。上書きするため、ビュー E を下に移動する必要があります。ビュー A の下に移動するまで幅の塗りつぶしは満たされないため、ビュー E の上部の位置はビュー A の下部に設定され、左側の位置は に設定されます。 Dの右。最後に、F の状況を調べてみましょう。右側にフローティングしている最後のビューは B ですが、フローティング ルール 2 によれば、ビュー F の上部の位置は、最後に追加されたビュー E の上部の位置と一致していなければなりません。 E の上の位置と一致する場合、F の長さは E​​ の位置をカバーするため、ビュー F はビュー E の下部に移動する必要があり、右側はレイアウト ビューの右端と一致する必要があります。 、ビュー F の表示に対応します。上記の例から、レイアウト ビューに左フローティングと右フローティングの両方のサブビューがある場合、フローティング レイアウトがあり、新しい仕様 8 の定義は次のとおりであることがわかります。レイアウト内に左フローティング サブビューと右フローティング サブビューの両方があり、左フローティング ビューの残りの幅の右境界は、右ビューを覆わずに最小の右フローティング ビューの左境界となり、右フローティング ビューフローティング ビューの残りの幅の左端は、左ビューを覆わずに、フローティング ビューの右端の最大左端になります。

上下をラップ

左右のレイアウトビューのシーンをいくつか紹介します。 CSS では、左右のフローティング関数のみが定義されています。左右にフローティングするレイアウト ビューの原理は、ビューの追加順序と設定されたフローティング方向に従って、最初に左または右にフローティングし、次にフローティングすることです。全体としては上から下にレイアウトが表示されます。しかし、実際の状況では、特定のサブビューを上下にフローティングしてレイアウトする必要があり、レイアウトの順序は、最初に追加されたサブビューの順に上下にフローティングし、次に全体としてフローティングするというレイアウトになります。このフローティング レイアウトを左から右に表示します。これをアップダウン フローティング レイアウトと呼びます。上下のフローティング レイアウトのサブビューは、サブビュー自体の高さとレイアウト ビューの高さに基づいてフローティングされます (一方、左右のフローティング レイアウトは幅に基づいて決定されます)。方向の違いを除けば、フローティング仕様は左右フローティング機構と同じです。ここでは詳細には触れません。レイアウトを通して、上下のフローティング レイアウトのインターフェイスを見てみましょう。

フローティング レイアウト 10

上の図は、上下のフローティング レイアウトが異なることを示しています。方向を除き、左右にフローティングします。その他のルールは同じです。ただし、フロートをクリアするときは、フロートの方向が右に移動します。同時に、フローティング レイアウトはサブビューの比率設定もサポートしていますが、ここでの比率はサブビューの高さを指します。

MyFloatLayout のメソッドとプロパティの紹介

フローティング レイアウトの実装原則とレイアウト メカニズムをたくさん述べてきましたが、フローティング レイアウトをどのように使用および定義するのでしょうか?フローティング レイアウトを実装して使用するには、フローティング レイアウト MyFloatLayout クラスを使用する必要があります。このクラスの定義は次のとおりです。 id) floatLayoutWithOrientation:(MyLayoutViewOrientation)orientation;

@property(nonatomic,assign) MyLayoutViewOrientation Orientation; @property(nonatomic,assign) IBInspectable MyMarginGravity 重力;

@end

クラスの初期化メソッドから、フローティング レイアウトを作成するときは、方向を指定する必要があることがわかります。これは、左右のフローティング レイアウトの場合、最初に行うためです。フローティングレイアウトは最初に上下にフロートし、最後に左から右に配置することになります。 したがって、方向の値を MyLayoutViewOrientation_Vert に指定すると、 ということになります。左右に移動するフローティング レイアウトを作成します。値が MyLayoutViewOrientation_Horz に設定されている場合、システムはデフォルトで左右に移動するフローティング レイアウトが作成されることを意味します。さらに、フローティング方向は、orientation 属性を通じて後で動的に変更できます。フローティング レイアウトのフローティング方向を指定したら、次にフローティング レイアウトに追加するサブビューのフローティング方向属性、クリア フローティング属性、比率を指定する必要があります。これらはビューの拡張子によって分類できます。

@interface UIView(MyFloatLayoutExt)

@property(nonatomic,assign,getter=isReverseFloat) IBInspectable BOOL reverseFloat;

@property(nonatomic,assign) IBInspectable BOOL clearFloat;

@property(nonatomic, assign)表CG浮力重量;

@end

を設定します。 デフォルトでは、左右フローティング レイアウトを作成すると、レイアウトに追加したすべてのサブビューがデフォルトで左側にフロートし、上下フローティング レイアウトを作成すると、レイアウトに追加したすべてのサブビューが左側にフロートします。デフォルトでは、サブビューは上向きにフロートするため、サブビューのフローティング方向を変更する必要がある場合は、属性 reverseFloat を設定してこれを実現できます。この属性は BOOL 型の値で、YES に設定するとフローティングになります。つまり、左右のフローティング レイアウトでは、サブビューの reverseFloat が YES に設定されている場合、サブビューは右にフローティングすることを意味しますが、上下のフローティング レイアウトでは、サブビューが右にフローティングすることを意味します。 , 下向きに浮いているという意味です。ビューの拡張属性clearFloatもBOOL型で、フロートをクリアするかどうかを示します。デフォルト値はNOで、フロートをクリアしないことを示します。サブビューにフロートをクリアする効果が必要な場合は、この属性を設定してください。はい。最後のビューの拡張属性の重みは、ビューの幅または高さの比率を表します。この値のデフォルト値は 0 です。これは、幅が比率に従って指定されていないことを意味します。サブビューを追加するときの幅または高さ、および設定時の幅または高さ。それが 0 以外の場合、サブビューの幅と高さを指定する必要はなく、レイアウト システムが自動的に計算します。ここでの重みの設定範囲は: 0 上記は、フローティング レイアウトの確立と、フローティング レイアウトでのビューのフローティング モードを実現するためのサブビューの拡張属性設定、およびクリアするかどうかを紹介しました。フロートと比重の設定方法です。さらに、フローティング レイアウトの場合、MyBaseLayout から派生しているため、フローティング レイアウトは、wrapContentWidth プロパティと WrapContentHeight プロパティの設定もサポートしています。つまり、フローティング レイアウトの幅と高さは、一般にサブビューによって決定できることを明確にする必要があります。左右のフローティング レイアウトの場合、wrapContentHeight を設定するだけで済みます。もちろん、wrapContentWidth を設定することもできます (このプロパティを設定するための前提条件は、レイアウト ビューに特に幅の広いサブビューがあることです)。フローティング レイアウトの場合も同様に、wrapContentWidth を設定するだけで済みます。もちろん、wrapContentHeight を設定することもできます (このプロパティを設定するための前提条件は、レイアウト ビューに特に高いサブビューがあることです)。

最後に、フローティング レイアウト ビューには重力属性があることがわかります。この属性は、上向きの左と右のフローティング レイアウト ビューのすべてのサブビューの全体的な上部、中央、下部のドッキング モードを設定するために使用できます。フローティング レイアウトでは、ビューを使用して、すべてのサブビューの全体的な左、中央、および右のドッキング モードを設定できます。

次のレンダリングは、フローティング レイアウトを使用して実現する Tmall および ZAKER インターフェイス レイアウトのレンダリングです:

フローティング レイアウトのデモ

上の gif 画像には、フローティング レイアウトをそれぞれ紹介する 3 つのデモがあります。はい、デモでは FOLTest1ViewController を通じてフローティング レイアウトのさまざまなプロパティの設定と効果を学習することができます。一方、FOLTest2ViewController は Tmall ホームページのレイアウトを紹介し、FOLTest3ViewController は ZAKER のカード レイアウトの実装を紹介します。デモを通じて、不規則なインターフェイス レイアウトを実装したい場合、それを実現するために相対レイアウトを使用する必要はなく、サブビューの追加とフローティング属性の設定の正しい順序を設定するだけで効果が得られることがわかります。 、フローティング レイアウトの利点を利用する場合、ビュー間の依存関係の設定を考慮する必要がなくなりました。

スマート境界線

スマート境界線を説明するために、まず次の 2 つのインターフェイスを見てみましょう:

フローティング レイアウト 11

上の 2 つのインターフェイスは、淘宝網と天猫のホームページと ZAKER ニュースを模倣したインターフェイスです。各ブロックの境界線を観察してみましょう。端には境界線が表示されず、ブロックの交差点にのみ境界線が表示されることが分かりました。一般に、不規則な境界線を表示するには、UI 担当者が画像を提供する必要がある場合があります。画像を提供しない場合は、プログラミング中に特定の位置に境界線を描画する必要があるかどうかを判断する条件判断も必要になることは明らかです。これを実行すると、コード サイズが増加します。そこで、この問題を解決するために、当社のレイアウトシステムでは境界線とスマート境界線を提供しています。 MyBaseLayout から派生した 6 つの主要なレイアウトを使用する場合、基本クラスを通じて 4 つのプロパティを提供できます。 @property(nonatomic,strong) MyBorderLineDraw *topBorderLine;

@property(nonatomic, Strong) MyBorderLineDraw *bottomBorderLine;

レイアウト ビューに表示される 4 辺の境界線を指定するため、境界線の設定をサポートできます線の色、太さ、インデント、点線などの機能を備え、境界線のカットを個別に用意する必要がなくなりました。境界線の例を確認するには、LLTest4ViewController と AllTest3ViewController の 2 つのデモの紹介を確認してください。それでも、上記の特殊なケースでは、境界線の指定を完了するためにプログラミングと条件判断を実行する必要があるため、この問題を解決するために、新しいスマート境界線属性をレイアウトに追加しました。

@property( nonatomic, Strong) MyBorderLineDraw *IntelligentBorderLine;

@property(nonatomic, assign) BOOL notUseIntelligentBorderLine;

スマート境界線の値がレイアウト ビューに設定されている場合、このレイアウトのサブレイアウト ビュービューはビューに基づいて作成されます。それらの間の関係により、境界線が自動的かつインテリジェントに生成されます。ここで強調する必要があるのは、レイアウト ビュー内のサブレイアウト ビューのみがインテリジェントな境界線を生成し、レイアウト ビュー内の非レイアウト サブビューには境界線が生成されないということです。また、レイアウト ビューの 1 つのサブレイアウト ビューでインテリジェントな境界線を使用したくないが、手動で設定したい場合は、独自の notUseIntelligentBorderLine を YES に設定するだけで済みます。これは、境界線を使用しないことを意味します。親レイアウトによって提供されるライン。スマート境界線機能。現在のバージョンのレイアウト ライブラリでは、リニア レイアウト、フローティング レイアウト、テーブル レイアウト、および流体レイアウトのみがスマート境界線の設定をサポートしており、フレーム レイアウトと相対レイアウトはサポートしていません。レイアウト システムに備わっているスマート境界線機能のおかげで、レイアウト ビュー間の境界線を非常に簡単に設定できます。たった 1 文で完了します。

フローティング レイアウトの実践

フローティング レイアウトについて紹介したいことは以上です。次に、DEMO のコードを使用して、フローティング レイアウトを使用して上記の機能を実現する方法を具体的に紹介します。導入する前に、サブビュー myLeftMargin、myRightMargin、myTopMargin、myBottomMargin の 4 つの拡張属性を引き続き使用してビュー間の間隔を指定できることを説明します。同時に、サブビューの幅拡張属性もサポートしています。 widthDime の値は、特定の値に設定することも、レイアウト ビューの幅、以前にレイアウトされたサブビューの幅と等しくすることもできます。あるいはサブビューの高ささえも。

フローティング レイアウトに関するすべてのコードはデモで見つけることができ、いくつかの例のみを紹介しているため、他の例は自分で学習できます。下の図を見てみましょう:

Floating Layout 12

上記のインターフェイスの左上隅にあるブロックの高さは 180 ですが、残りのブロックはすべて 90 で、各ブロックの幅は画面の半分であることがわかります。上記のインターフェイスに対応するには、まず左右のフローティング レイアウトを作成する必要があります:

CGFloat itemHeight = 90;

//Brand Specials

MyFloatLayout *layout1 = [MyFloatLayout floatLayoutWithOrientation:MyLayoutViewOrientation_Vert]; layout1.backgroundColor = [UIColor WhiteColor ];

layout1.wrapContentHeight = YES;

layout1.IntelligentBorderLine = [[MyBorderLineDraw alloc] initWithColor:[UIColor lightGrayColor]];

設定したlayout1の高さはサブビューによって決まります。インテリジェントな境界線が設定されます。次に、各ブロックを順番に追加するだけです。上の領域から、A、B、C の 3 つの異なるタイプのブロックがあることがわかります。これら 3 つのブロックは、実際には MyFloatLayout を使用して実装されています。

フローティング レイアウトを使用してブロック A を実装することもできます。フローティング レイアウトを上下に作成するだけで、デフォルトでタイトルと小さな画像が上にフローティングされます。残りの大きな画像の幅は親レイアウトの幅と等しく、コードのこの部分の具体的な実装は FOLTest2ViewController の createItemLayout1_1 メソッドに実装されます。

フローティング レイアウトを使用してブロック B を実装することもできます。まず、大きな画像を右にフローティングし、高さを親レイアウトの高さと同じにするだけです。タイトルは左にフロートされ、weight=1 は残りの幅を占めることを意味します。サブタイトルも左にフロートされ、clear float 属性が設定され、weight=1 は最後の小さな画像を占めるように設定されます。も float left に設定され、clear float 属性が設定されます。コードのこの部分の具体的な実装は、FOLTest2ViewController の createItemLayout1_3 メソッドに実装されています。

フローティング レイアウトを使用して C ブロックを実装することもできます。メイン タイトル部分がフローティングになるように、左右のフローティング レイアウトを作成するだけです。左に、幅と親 レイアウトの幅は等しく、字幕部分は左にフローティングし、幅は親レイアウトの幅と同じですが、画像部分は右にフローティングします。

最後に、3 つのブロック A、B、C を順番に作成し、順番にレイアウト 1 に追加します。追加するときは、A の高さを 180 に、幅をレイアウト 1 の半分に設定するだけで済みます。 2 次に、高さを 80 に、幅をレイアウト 1 の半分に設定します。

概要

フローティング レイアウトは、ある意味、相対レイアウトの代替となる非常に強力なレイアウト システムであり、内部のサブビューに制約を設定する必要がなく、相対レイアウトよりも簡単です。必要な関数を、その順序と独自の幅と高さでレイアウト ビューに追加するだけで完成します。そして、それが提供する機能は、CSS のフローティング プロパティよりもさらに強力です。 WEB フロントエンドを開発する場合、多くのインターフェイス レイアウトは実際には CSS のフローティング プロパティを通じて完成します。したがって、フローティング レイアウトを使用して、さまざまな複雑なインターフェイス レイアウトを実装することもできます。また、フローティング レイアウトは、線形レイアウトや流動的なレイアウト機能も簡単に実現できます。流体レイアウトの機能について詳しく知りたい場合は、私の github サイトにアクセスして詳細をご覧ください:

https://github.com/youngsoft/MyLinearLayout