Google オープンソース FlexboxLayout_html/css_WEB-ITnose

この記事を読むのに必要な時間は約 8 分です。

最近、Google が「FlexboxLayout」というプロジェクトをオープンソース化しましたが、このプロジェクトについての情報が少ないようなので、今日はこのプロジェクトの機能とその使い方の簡単な紹介についてお話します。

1 Flexbox とは

簡単に言うと、Flexbox は Web フロントエンド分野における CSS のレイアウト スキームであり、2009 年に W3C がシンプルで完全な新しいレイアウト スキームを提案しました。さまざまなページ レイアウトをレスポンシブに実装し、React Native も Flex レイアウトを使用します。

Flexbox は CSS 分野の Linearlayout に似たレイアウトですが、Linearlayout よりもはるかに強力であることが簡単に理解できます。

2 FlexboxLayout とは何ですか?

先ほど、Flexbox は CSS の分野では比較的強力なレイアウトであると述べましたが、Android 開発では基本的に最も複雑なレイアウトを実現するために Linearlayout + RelativeLayout を使用しますが、Google は Flexbox に似たものがあるのではないかと考えています。レイアウトについては？これを利用すると、1 つのレイアウトでさまざまな複雑な状況に対応できるということで、FlexboxLayout が登場しました。

FlexboxLayout は、Flexbox に似たレイアウト スキームを実装する Android プラットフォーム用のオープン ソース プロジェクトです。オープン ソース アドレス:

https://github.com/google/flexbox-layout

3 使用法

使用法は非常に簡単で、次の依存関係を追加するだけです:

compile 'com.google.android:flexbox:0.1.2'

xml 次のように使用します:

または、コード内で次のように使用します:

これは Linearlayout の使用法とよく似ていますが、比較する属性は多数あります。慣れていない方のために、これらの属性はすべて Flexbox レイアウト自体が持つものなので、心配しないでください。FlexboxLayout のいくつかの特定の属性の使用法と意味を説明します。

サポートされる 4 つのプロパティ

flexDirection

flexDirection プロパティは、主軸の方向 (つまり、項目の配置方向) を決定します。 LinearLayout の垂直方向と水平方向に似ています。

4 つの値から選択できます:

• 行 (デフォルト値): 主軸は水平で、開始点は左端にあります。

• row-reverse: 主軸は水平であり、開始点は右端にあります。

• 列: 主軸は垂直であり、始点は上端にあります。

• column-reverse: 主軸は垂直であり、開始点は下端にあります。

flexWrap

デフォルトでは、Flex は LinearLayout と同様に改行なしで配置されますが、flexWrap 属性は行をサポートできますラッピング。これは、LinearLayout よりも優れています。

• nowrap: 行の折り返しなし

• wrap: ラップ通常方向

• wrap-reverse: 逆方向にラップ

justifyContent

justifyContent 属性は、スピンドル上の項目の配置を定義します。

• flex-start (デフォルト): 左揃え

• flex-end: 右揃え

• center: 中央揃え

• space-between: 項目間の間隔が等しくなるように両端を揃えます。

• space-around: 各アイテムは両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。

alignItems

alignItems プロパティは、項目を第 2 軸上でどのように配置するかを定義します。

• flex-start: 交差軸の開始点を揃えます。

• flex-end: 交差軸の終点位置合わせ。

• center: 十字軸の中点を合わせます。

• baseline: アイテムのテキストの最初の行のベースライン配置。

• stretch (デフォルト値): 項目に高さが設定されていない場合、または自動に設定されている場合、項目はコンテナーの高さ全体を占めます。

alignContent

alignContent プロパティは、複数の軸の位置合わせを定義します。プロジェクトに軸が 1 つしかない場合、このプロパティは効果がありません。

• flex-start: 交差軸の開始点に位置合わせします。

• flex-end: 交差軸の終点に位置合わせされます。

• center: 交差軸の中点に位置合わせされます。

• space-between: 交差軸の両端に合わせて、軸間の間隔が均等になります。

• space-around: 各軸は両側に等間隔に配置されます。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。

• ストレッチ (デフォルト値): 軸は交差軸全体を占めます。

5 つのサブ要素属性

上記に加えて、FlexboxLayout は次のサブ要素属性もサポートしています:

layout_order

デフォルト 下位のサブ要素はドキュメントフローの順序に従って配置され、順序属性は負の値が最初に来て、正の値が後に来て、からの順序で配置されます。小さいものから大きいものまで。 FlexboxLayout が LinearLayout よりも強力である理由は、いくつかのプロパティがより強力であるためであり、順序もその 1 つであるためです。

layout_flexGrow

layout_flexGrow 属性は項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。理解できる絵。 LinearLayout の Weight 属性と同じです。

すべての項目のlayout_flexGrowプロパティが1の場合、残りのスペース(ある場合)を均等に分割します。 1 つの項目のlayout_flexGrow 属性が 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りスペースを占有します。

layout_flexShrink

layout_flexShrink 属性はアイテムの縮小率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。

すべての項目のlayout_flexShrink属性が1の場合、スペースが足りない場合、すべての項目が比例して縮小されます。 1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不十分な場合、前者は縮小されません。 このプロパティには負の値は無効です。

layout_alignSelf

layout_alignSelf 属性を使用すると、単一の子要素が他の子要素とは異なる配置を持つことができ、alignItems 属性をオーバーライドできます。デフォルト値は auto で、親要素がない場合は、親要素の alignItems 属性を継承します。

• 自動 (デフォルト)

• flex_start

• flex_end

• center

• baseline

• stretch

この属性は 6 つの値を取ることができます。 auto を除き、他のすべては align-items 属性とまったく同じです。

layout_flexBasisPercent

layout_flexBasisPercent 属性は、追加スペースを割り当てる前に、子要素が占めるメイン サイズの主軸スペースを定義します。ブラウザは、この属性に基づいて主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これは子要素の元のサイズです。

6 つの違い

CSS の従来の Flexbox レイアウトとのいくつかの違いは次のとおりです。

1. flex-flow 属性はありません。

2. flex 属性はありません

3.layout_flexBasisPercent 属性は、CSS のフレックスボックスの flexBasis 属性です

4. min-width 属性と min-height 属性はサポートされていません

以上ですFlexboxLayout の基本的な紹介と基本的な使用法については、このプロジェクト自体も View をカスタマイズするための優れた学習教材であることを皆さんに思い出していただき、学習する価値があります。

参考:

この記事の Flexbox の知識の多くは、同僚によるこの記事を参照しています。Flexbox 関連の知識について詳しく知りたい場合は、ここをお読みください:

http://w4lle.github.io/2016/05/08/Flexbox/