AndroidフレックスレイアウトFlexboxLayoutについて

テキストリンク:https://mp.weixin.qq.com/s/Mi... RelativeLayout・LinearLayoutなどの定番レイアウトはおなじみと思いますが、今日は新しいレイアウト「フレックスレイアウト」--FlexboxLayoutをご紹介します.FlexFlexible Boxの略で「フレックスレイアウト」を意味し、フロントエンドcssスタイルに広く応用されている.以前にやったことがあるReact-Native微信ウィジェットとは、ページレイアウトの多くはflexフレックスレイアウトを使用しており、異なる画面サイズで一貫したレイアウト構造を提供することができ、簡便、完全、応答的に様々なページレイアウトを実現することができる.今日は皆さんにAndroid移動端のflexレイアウトゲートを開けてみますFlexboxLayoutandroidでよく見かけるラベルやフローレイアウトなどをFlexboxLayoutで実現できます.
インストール
ビルド依存

dependencies {
    implementation 'com.google.android:flexbox:1.0.0'
}

FlexboxLayoutプロパティの説明
flexDirection flex-direction属性は主軸の方向(すなわち内部サブエレメントの配列方向)を決定する.

row(デフォルト):水平表示、始点が左端

row_reverse:水平表示、始点右端、row逆の順

column:垂直表示、始点は上部

column_reverse:垂直表示、始点は底、column逆の順

xmlで使用app:flexDirection="row"、コードで使用flexboxLayout.setFlexDirection(FlexDirection.ROW)ここではレイアウトがコンパクトで、要素がレイアウト全体を満たさないようにxmlに設定します.app:alignItems="flex_start" , app:alignContent="flex_start"、続きはalignItems和alignContentの属性紹介では、読者はこの2つの属性を除いてプレゼンテーションの効果を見ることができる.
flexWrap flexWrap改行の有無を決める

nowrap(デフォルト):改行しない

wrap:通常方向に改行し、1行目は上

wrap_reverse:反対方向に改行し、1行目は下

xmlで使用app:flexWrap="nowrap"、コードで使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)justifyContent justifyContent主軸上の要素の揃え方を決める

flex_start(デフォルト):主軸方向始点揃え

flex_end:主軸方向終点揃え

center:主軸方向中央揃え

space_between:主軸方向両端が揃えられ、要素間の間隔が等しい.

space-around:各要素の両側の間隔が等しい.したがって、エレメント間の間隔は、エレメントとレイアウトボーダーの間隔の2倍になります.

xmlで使用app:justifyContent="flex_start"コードで使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)ここでは主軸方向の揃え方であることに注意flexDirection属性、例えば主軸がrow水平方向であればcenter属性は水平中央、columnであれば垂直方向中央となる.
alignItems alignItems要素の交差軸方向の揃え方を決め、「交差軸」は主軸と直交する方向、例えば主軸が水平であれば交差軸が垂直方向であることを理解する

stretch(デフォルト):親レイアウト全体を軸方向で埋め尽くします.

flex_start交差軸の始点揃え

flex_end交差軸の終点揃え.

center交差軸の中央揃え

baseline要素1行目文字のベースライン揃え

既定値はstretchエレメントレイアウト設定の幅に関係なく、親レイアウトが交差軸方向に満たされます.たとえばflexDirectionデフォルトrow水平方向であれば、エレメントは親レイアウトを垂直方向に満たされます.一般的にはflex_start属性を選択し、要素のサイズを自由に制御できます.
alignContent alignContent複数本の軸線の揃え方を決めた.アイテムに軸が1本しかない場合は、このアトリビュートは機能しません.

stretch(デフォルト):交差軸全体を軸が占める.

flex_start交差軸方向始点揃え

flex_end交差軸方向終点揃え

center交差軸方向中央揃え

space_between交差軸方向両端揃え、要素間の間隔が等しい

space_around各要素の両側の間隔は等しい.したがって、エレメント間の間隔は、エレメントとレイアウトボーダーの間隔の2倍になる

alignContent複数行の場合に役立ちます.justifyContent主軸方向の位置合わせを設定し、alignContent交差軸方向の位置合わせを設定します.例えば要素が水平方向に改行されている、justifyContent設定center属性が水平中央、alignContent設定center属性が垂直中央である.
dividerプロパティ
エレメント間の分割線の説明

showDividerHorizontal4つの属性none | beginning | middle | end、beginningはレイアウトの上に線を表示し、endはレイアウトの下に線を表示する

dividerDrawableHorizontal伸縮線の間に水平分割線を置く

showDividerVerticalbeginningレイアウトの左側に線が表示され、endレイアウトの右側に線が表示される

dividerDrawableVertical伸縮線の間に垂直分割線を置く

showDividerdividerDrawableHorizontalに合わせるとshowDividerHorizontalの効果、dividerDrawableVerticalに合わせるとshowDividerVerticalの効果、dividerDrawableに合わせると水平と垂直方向の線が表示される

dividerDrawabledrawable属性、showDividerに合わせて水平方向と垂直方向の線を表示できる

app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"
app:dividerDrawable="@drawable/divider"
app:showDivider="beginning|end|middle"

サブエレメントのプロパティFlexboxLayout自身に属性を設定するほか、サブエレメントに属性を設定することもできます
layout_order layout_orderエレメントの並び順を変えることができ、デフォルト値は1で、順番に並べられている値が大きいほど、後ろ文字1のtextViewの属性app:layout_order="2"、残りはデフォルト1
layout_flexGrow layout_flexGrow要素の拡大率を決定し、デフォルトでは拡大せず、値は0とする.1つの要素のlayout_flexGrow属性が2で、他の要素が1であれば、前者が占める残りの空間は他の2倍になります.属性はLinearLayoutのweightに類似している.3つのviewのapp:layout_flexGrow値はそれぞれ1、1、2
layout_flexShrink layout_flexShrink要素の縮小率を決定し、デフォルトでは1である.すなわち、空間が不足している場合、その要素は縮小される.値が大きいほど縮小率が大きくなり、0の場合は縮小しません.スペースが十分な場合、プロパティは無効です.3つのviewのapp:layout_flexShrink値はそれぞれ2、1、1
layout_alignSelf layout_alignSelf個々のサブエレメントに他のサブエレメントと異なる位置合わせを許可し、デフォルト値はauto親エレメントを継承alignItems属性、残りの属性値はalignItems属性の最初のviewapp:layout_alignSelf="center"垂直中央
layout_flexBasisPercent layout_flexBasisPercent余分なスペースを割り当てる前に、サブエレメントが占める主軸スペースの割合を決定する.デフォルトは自己サイズ第1ビューapp:layout_flexBasisPercent="50%"水平占有率50%
recyclerViewとの組み合わせ
FlexboxLayoutの応用は広く、主流のtagラベルフローレイアウトは使用可能FlexboxLayout動的追加viewで実現可能であり、例外としてRecyclerViewのレイアウトマネージャFlexboxLayoutManagerを使用してフローレイアウトを完了することも可能である.

FlexboxLayoutManager manager = new FlexboxLayoutManager(this);
manager.setFlexDirection(FlexDirection.ROW);
manager.setFlexWrap(FlexWrap.WRAP);
recyclerView.setLayoutManager(manager);

同じ画像のフローレイアウトの原理が通じているので、ここでは一つ一つ挙げません.
最後にgithubアドレスを添付します.https://github.com/taixiang/flexboxLayout
私のブログへようこそ:https://blog.manjiexiang.cn/マイクロ信号に注目してください:春風十里はあなたを知っているほうがいいです.