この記事は寄稿記事です。著者: 欧陽兄弟 (ブログ)
はじめに
MyLayout の 6 つのレイアウトのうち、各レイアウトには異なる適用シーンがあります。また、各レイアウトのサブビューの制約メカニズムは異なります。リニア レイアウト MyLinearLayout、テーブル レイアウト MyTableLayout、フロー レイアウト MyFlowLayout、およびフローティング レイアウト MyFloatLayout のサブビュー間の制約は、親レイアウトに追加される順序によって決まります。決定; フレーム レイアウト MyFrameLayout 内のサブビューは親レイアウト ビューにのみ関連し、相対レイアウト MyRelativeLayout 内のサブビューはビュー間の依存関係を設定することによって制約を確立します。どちらが追加されるかは問題ではありません。それでも、場合によっては、どちらのレイアウトを使用しても同じインターフェイス機能を実装できます。これらのレイアウトでは、相対レイアウトはビュー間の依存関係を設定することによってレイアウト制約を確立するため、これを使用して複雑で不規則なインターフェイス レイアウトを構築できますが、欠点は制約に依存しすぎて、インターフェイスが調整されると、ビュー間の依存関係をリセットする必要があります (iOS の AutoLayout は実際には相対レイアウトの実装です。レイアウト中に設定する必要のある制約が多すぎるため、私は常に AutoLayout を批判してきました)。それでは、ビュー間の依存関係を設定せずに、複雑なインターフェイスのレイアウトを実装する方法はあるのでしょうか? これが、フローティング レイアウト MyFloatLayout を立ち上げた理由です。
Floating
UI インターフェイスには常にシーンがあります。コンテナ ビューの後から追加されたサブビューの左側は、常に以前に追加されたサブビューの右側に続き、上端はドッキング表示のために前のビューの上端と一致している コンテナ ビューの残りの幅スペースが新しく追加されたサブビューを収容するのに十分でない場合、新しく追加されたサブビューは、すでに配置されているビューを覆うことなく自動的に下に移動します。 、その幅に対応できるドッキングに最適な位置を見つけます。このメカニズムを Float と呼びます。たとえば、次のシーン:
フローティング レイアウト画像 1
ビュー A を追加するとき、ビュー A の幅は 500x300 です。 80、幅はコンテナ ビューに収まるので、ビュー A をコンテナ ビューの左上隅にフロートさせます。ビュー 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 の下になります。最終的なレイアウト結果は次のとおりです。
フローティング レイアウト 4
上記の 4 つの図から、フローティング ルールを要約できます。上記のフローティング ルールは 1 つにすぎません。フローティング レイアウト MyFloatLayout のフローティング方向: は最初に左にフロートし、次に下にフロートします 。フローティング レイアウトのフローティング メカニズムを使用すると、各サブビュー間の依存関係を明示的に設定するのではなく、ビューがレイアウト ビューに追加される順序のみに基づいて、不規則なビュー配置レイアウト シナリオを実現できます。以下は、最初に左にフロートし、次に下にフロートするためにまとめたフローティング ルールです:
上記の 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 は、フローティング方向の設定と明確なフローティング特性もサポートしています。右のフローティングについては後ほど紹介します。 ここではまずフローティングを解除する機能と意味を紹介します。
クリアフローティング
上記のシナリオでは、コンテナ ビューの残りの幅が新しく追加されたサブビューを収容できる限り、新しく追加されたビューの幅に関係なく、サブビューであることがわかりました。常に前のビューの右側にフロートします。しかし、実際のアプリケーション シナリオでは、特定のビューがこのデフォルトのフローティング ルールに準拠しないことを望みますが、新しく追加されたサブビューの左側が常にコンテナ ビューの左側、およびサブビューの上部と整列するようにします。最も多くのスペースを占める、以前に追加したビューの下に移動します。たとえば、次の状況は次のとおりです。
フローティング レイアウト 5
サブビュー C の幅は 150 で、ビュー B の右側にフローティングできますが、実際にはビュー C を A の下にフロートさせ、左側をコンテナー ビューに揃えたい場合は、フロートをクリアするという概念を使用する必要があります。ビュー C に明確な浮動プロパティを設定して、ビュー C が必要な効果を達成できるようにします。したがって、いわゆるフロートのクリアとは、ビューのデフォルトのフローティング ルールを無効にし、常にビューの左側をコンテナ ビューの左側に揃え、ビューの上部をすべてに設定することであることがわかります。前に追加したのと同じ方向にフロートします。ビューの最大高さより下にあります。したがって、フローティング レイアウトの 6 番目のルール
ビューの float 属性をクリアすると、一部のビューをフローティングに設定せず、新しい行を開始する効果を得ることができます。
比率
上の例では、最初にビュー A と B を追加しました。次に、ビュー C を追加して、ビュー C をフローティングにしたいとします。視界の右側B.そして幅は埋められたAとBの残りの幅320(500-80-100)となります。 1 つの方法は、ビュー C の幅を手動で 320 に設定することです。これにより、目的の効果が得られます。ただし、実際のアプリケーションでは、A と B の幅が不確実である可能性があり、コンテナ ビューの幅も不確実です。そして、どのような状況であっても、次のレンダリングのように、ビュー C の幅が常に残りの幅を占めるようにします:
Floating Layout 6
上記のシナリオでは、ビュー C の幅を明示的に設定する必要はなく、比例機能を使用してビュー 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 となります。レンダリングは次のとおりです。
フローティング レイアウト 7
フローティング レイアウトのサブビューは、比率を設定することで残りの幅または高さを取得できるため、フローティング レイアウトでは次のように、プロポーション属性の新しいルールを定義します。
左右にフロート
上で紹介したフローティングの例では、デフォルトは常に左にフロートし、上からレイアウトします。一番下まで。ただし、CSS の要素のフローティング配置は、同時に左または右のフローティングをサポートしていることも前述しました。また、フローティング レイアウトは、特定のサブビューを左または右にフローティングすることもサポートしています。サブビューをレイアウト ビューに追加する場合、左または右にフローティングを設定できますが、ビューは同時に左または右にする必要があります。ビューが右に浮かぶ場合、そのメカニズムは左にある場合と同じです。次のビューを確認できます。
レイアウト ビュー 8
ビュー A、B、C、D、E、および F が移動すると、次のことがわかります。右にフローティングする場合、方向を除いて、他のルールはビューを左にフローティングする場合のルールと同じです。レイアウト ビューのサブビューは、左または右にフロートするように設定でき、前の例では、すべてのサブビューが左または右のいずれかになります。ただし、実際のシナリオでは、一部のビューを左側にフローティングし、一部のビューを右側にフロートするように設定できます。たとえば、次の例:
Floating Layout 9
上記の例では、レイアウト ビューにサブビューを追加する順序は A、B、C です。 、E、F をこの順に配置し、3 つのサブビュー C、D、および E を左側にフローティングし、3 つのサブビュー A、B、および F を右側にフローティングに設定します。左にフローティングするこれまでのすべての例では、残りの幅の比較は常にレイアウト ビューの右端に基づいて行われ、右にフローティングする前述のすべての例では、残りの幅の比較は常にレイアウト ビューの右端に基づいて行われます。レイアウトビューでは左マージンが標準です。では、レイアウト ビューのサブビューが左にフロートしたり、右にフロートしたりする場合、幅の境界をどのように考慮すればよいでしょうか?
上記の左右フローティングの例を分析してみましょう。常に追加順にフローティング レイアウトを実行するため、上記の例では、ビュー 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 の下に下に移動し、右側はビュー E と一致する必要があります。レイアウト ビューの右側の境界 ビュー F の表示に対応するために、一貫性があります。上記の例から、レイアウト ビューに左フローティング サブビューと右フローティング サブビューの両方がある場合、次のような新しい仕様 8 の定義を持つフローティング レイアウトがあることがわかります:
上下にフローティング
以前、レイアウト ビューが左右にフローティングするいくつかのシナリオを紹介しました。 CSS では、左右のフローティング関数のみが定義されています。左右にフローティングするレイアウト ビューの原理は、ビューの追加順序と設定されたフローティング方向に従って、最初に左または右にフローティングし、次にフローティングすることです。全体としては上から下にレイアウトが表示されます。しかし、実際の状況では、特定のサブビューを上下にフローティングしてレイアウトする必要があり、レイアウトの順序は、最初に追加されたサブビューの順に上下にフローティングし、次に全体としてフローティングするというレイアウトになります。このフローティング レイアウトを左から右に表示します。これをアップダウン フローティング レイアウトと呼びます。上下のフローティング レイアウトのサブビューは、サブビュー自体の高さとレイアウト ビューの高さに基づいてフローティングされます (一方、左右のフローティング レイアウトは幅に基づいて決定されます)。方向の違いを除けば、フローティング仕様は左右フローティング機構と同じです。ここでは詳細には触れません。レイアウトを通じてフローティング レイアウト インターフェイスを見てみましょう。
Floating Layout 10
上記でわかるように。上下フローティングと左右フローティングの方向が異なることを除けば、その他のルールは同じです。ただし、フロートをクリアするときは、フロートの方向が右に変わります。 。同時に、フローティング レイアウトはサブビューの比率設定もサポートしていますが、ここでの比率はサブビューの高さを指します。
MyFloatLayout のメソッドとプロパティの紹介
フローティング レイアウトの実装原理とレイアウト メカニズムについてはこれまでたくさん説明してきましたが、どのようにフローティング レイアウトを使用および定義すればよいでしょうか?フローティング レイアウトを実装して使用するには、フローティング レイアウト MyFloatLayout クラスを使用する必要があります。このクラスの定義は次のとおりです。
@interface MyFloatLayout : MyBaseLayout
-(id)initWithOrientation :( MyLayoutViewOrientation)orientation;
+(id)floatLayoutWithOrientation:(MyLayoutViewOrientation)orientation;
@property(nonatomic,assign) MyLayoutViewOrientation(nonatomic, assign) IBInspectable MyMarginGravity 重力;
@end
クラスの初期化メソッドから、フローティング レイアウトを作成するときは、方向を指定する必要があることがわかります。これは、左右のフローティング レイアウトの場合、最初に指定するためです。 float left and right andfinally 上から下の配置処理ですが、トップダウンフローティングレイアウトは最初に上下にフロートし、最後に左から右に配置するため、方向の値を 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) IBInspectable CGFloat 重み;
@end
を設定します。 デフォルトでは、左右フローティング レイアウトを作成すると、レイアウトに追加したすべてのサブビューがデフォルトで左側にフロートし、上下フローティング レイアウトを作成すると、レイアウトに追加したすべてのサブビューが左側にフロートします。デフォルトでは、サブビューは上向きにフロートするため、サブビューのフローティング方向を変更する必要がある場合は、属性 reverseFloat を設定してこれを実現できます。この属性は BOOL 型の値で、YES に設定するとフローティングになります。つまり、左右のフローティング レイアウトでは、サブビューの reverseFloat が YES に設定されている場合、サブビューは右にフローティングすることを意味しますが、上下のフローティング レイアウトでは、サブビューが右にフローティングすることを意味します。 , 下向きに浮いているという意味です。ビューの拡張属性clearFloatもBOOL型で、フロートをクリアするかどうかを示します。デフォルト値はNOで、フロートをクリアしないことを示します。サブビューにフロートをクリアする効果が必要な場合は、この属性を設定してください。はいに。最後のビューの拡張属性の重みは、ビューの幅または高さの比率を表します。この値のデフォルト値は 0 です。これは、幅が比率に従って指定されていないことを意味します。サブビューを追加するときの幅または高さ、および設定時の幅または高さ。それが 0 以外の場合、サブビューの幅と高さを指定する必要はなく、レイアウト システムが自動的に計算します。ここでの重みの設定範囲は 0 上記では、フローティング レイアウトの確立と、フローティング レイアウトでのビューのフローティング方式を実現するためのサブビューの拡張属性設定を紹介しました。 、floatをクリアするかどうか、および割合を設定する方法。さらに、フローティング レイアウトの場合、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 *leftBorderLine;非アトミック、強力) MyBorderLineDraw *rightBorderLine;
@property(非アトミック、強力) MyBorderLineDraw *topBorderLine;
@property(非アトミック、強力) MyBorderLineDraw *bottomBorderLine; > レイアウトビューに表示する四辺の境界線を指定する際に、境界線の色、太さ、くぼみ、点線を設定する機能をサポートし、別途用意する必要がなくなりました写真は境界線用のカッターです。境界線の例を確認するには、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 であり、各ブロックの幅が画面半分です。上記のインターフェースに対応するには、まず左右にフローティングするフローティング レイアウトを作成する必要があります。
設定したlayout1の高さはサブビューによって決定され、スマートな境界線が設定されます。 。次に、各ブロックを順番に追加するだけです。上の領域から、A、B、C の 3 つの異なるタイプのブロックがあることがわかります。これら 3 つのブロックは、実際には MyFloatLayout を使用して実装されています。
フローティング レイアウトを使用してブロック A を実装することもできます。フローティング レイアウトを上下に作成するだけでよく、タイトルとサムネイルはデフォルトで上にフローティングされます。残りの大きな画像の幅は親レイアウトの幅と等しく、コードのこの部分の具体的な実装は FOLTest2ViewController の createItemLayout1_1 メソッドに実装されます。
フローティング レイアウトを使用してブロック B を実装することもできます。次に、大きな画像を右にフローティングし、高さを親レイアウトの高さと同じにするだけです。メインタイトルは左にフローティングされ、weight=1 は残りの幅を占めることを意味します。サブタイトルも左にフローティングされ、clear Floating 属性が設定され、weight=1 が残りの幅を占めるように設定されます。小さな絵も左にフロートに設定され、クリアフローティング属性が設定されます。コードのこの部分の具体的な実装は、FOLTest2ViewController の createItemLayout1_3 メソッドに実装されます。
フローティング レイアウトを使用してブロック C を実装することもできます。メイン タイトル部分が左側にフローティングされ、幅が親レイアウトの幅と同じになるように、左右のフローティング レイアウトを作成するだけです。字幕部分は左にフローティングし、幅は親レイアウトの幅と同じで、画像部分は右にフローティングできます。
最後に、3 つのブロック A、B、C を順番に作成し、それらを順番にレイアウト 1 に追加します。追加するときは、A の高さを 180 に設定し、幅をレイアウト 1 の半分に設定するだけです。他の 2 つの場合、高さは 80 に設定され、幅はレイアウト 1 の半分に設定されます。
概要
フローティング レイアウトは、ある意味、相対レイアウトの代替となる非常に強力なレイアウト システムであり、その必要がないため、相対レイアウトよりも簡単です。サブビュー間の制約と依存関係を設定すると、レイアウト ビューに追加される順序と独自の幅と高さに依存するだけで、必要な機能を完成させることができます。そして、それが提供する機能は、CSS のフローティング プロパティよりもさらに強力です。 WEB フロントエンドを開発する場合、多くのインターフェイス レイアウトは実際には CSS のフローティング プロパティを通じて完成します。したがって、フローティング レイアウトを使用して、さまざまな複雑なインターフェイス レイアウトを実装することもできます。また、フローティング レイアウトは、線形レイアウトや流動的なレイアウト機能も簡単に実現できます。流体レイアウトの機能について詳しく知りたい場合は、私の github サイトにアクセスして詳細をご覧ください: https://github.com/youngsoft/MyLinearLayout
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
