Google のオープンソース Android レイアウト ライブラリ: FlexboxLayout_html/css_WEB-ITnose

最近、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 で次のように使用します:

<com.google.android.flexbox.FlexboxLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    app:flexWrap="wrap"    app:alignItems="stretch"    app:alignContent="stretch" >    <TextView        android:id="@+id/textview1"        android:layout_width="120dp"        android:layout_height="80dp"        app:layout_flexBasisPercent="50%"        />    <TextView        android:id="@+id/textview2"        android:layout_width="80dp"        android:layout_height="80dp"        app:layout_alignSelf="center"        />    <TextView        android:id="@+id/textview3"        android:layout_width="160dp"        android:layout_height="80dp"        app:layout_alignSelf="flex_end"        /></com.google.android.flexbox.FlexboxLayout>

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

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);flexboxLayout.setFlexDirection(FlexboxLayout.FLEX_DIRECTION_COLUMN);View view = flexboxLayout.getChildAt(0);FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();lp.order = -1;lp.flexGrow = 2;view.setLayoutParams(lp);

Linearlayout の使用法と非常に似ていますが、馴染みのない属性がたくさんありますが、これらの属性はすべて Flexbox レイアウトです。すでに持っている場合は、心配する必要はありません。FlexboxLayout のいくつかの特定のプロパティの使用法と意味を説明しましょう。

4. サポートされているプロパティ

flexDirection

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

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

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

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

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

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

flexWrap

デフォルトでは、Flex には LinearLayout と同様に行の折り返しがありませんが、flexWrap 属性は行の折り返しをサポートできます。 3 つの値があります:

• nowrap: 行の折り返しなし

• wrap: 行を通常方向に折り返し

• wrap-reverse: 行を逆方向に折り返し

just

justifyContent属性は主軸上の項目を定義します。

flex-start (デフォルト): 左揃え
flex-end: 右揃え
center: 中央揃え

• space-between: 項目間の等間隔で両端を揃えます。

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

• alignItems

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

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

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

• center: 交差軸の中点を揃えます。

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

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

alignContent

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

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

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

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

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

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

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

• 5. 子要素の属性

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

layout_order

デフォルトでは、サブ要素はドキュメントフローの順序で配置され、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 属性を継承します。

• auto (デフォルト)

• flex_start

• flex_end

• center

• ベースライン

• stretch

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

layout_flexBasisPercent

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

6. 相違点

CSS の従来の Flexbox レイアウトとの相違点は次のとおりです:

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

3.layout_flexBasisPercent 属性は CSS の flexbox です。 flexBasis 属性

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

上記は、FlexboxLayout の基本的な紹介と基本的な使用法です。このプロジェクト自体も優れたカスタム ビューであることを皆さんに思い出していただく価値があります。学習教材は学ぶ価値があります。

参考:

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

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

出典: WeChat パブリック プラットフォーム AndroidDeveloper