Googleの新しい適合方式について---FlexboxLayout

前言
工欲善其事必先利其器、FlexboxLayoutを学ぶ前に、まずそれが何に使われているのか、どんな特性があるのかを見て、理解してから、それを利用します.プロジェクトアドレス-flexbox-layoutのGitHubアドレスを先に置く
本文

コンセプトFlexboxは、簡単にはフレキシブルボックスとして理解されており、GitHub上に伸縮可能なエリアまたは空間があり、CSS Flexible Box Layout Moduleの類似機能をAndroidのライブラリに持ち込む紹介があり、CSSのFlexible Boxについては、具体的な文法は異なるが、思想は通じるが、ここには比較的詳細な文章が紹介されている.参考になります.FlexboxLayoutは、2つのレイアウトがサブviewを順番に並べているため、上級版のLinearLayoutと理解できます.両者の最大の違いは、FlexboxLayoutが改行する特性を持っていることです.

安定版導入

dependencies {
    compile 'com.google.android:flexbox:0.2.6'
}

開発テストバージョン–Recyclerviewの統合を含む

dependencies {
    compile 'com.google.android:flexbox:0.3.0-alpha3'
}

個人のニーズに応じて適切なバージョンを選択

用法

    <com.google.android.flexbox.FlexboxLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:alignItems="flex_start">

        "100dp"
            android:layout_height="100dp"
            android:background="@color/colorAccent" />

        "100dp"
            android:layout_height="150dp"
            android:background="@color/blue" />

        "100dp"
            android:layout_height="180dp"
            android:background="@color/little_pink_primary" />

        "100dp"
            android:layout_height="50dp"
            android:background="@color/black" />

        "120dp"
            android:layout_height="100dp"
            android:background="@color/orange" />

        "100dp"
            android:layout_height="80dp"
            android:background="@color/side" />

        "80dp"
            android:layout_height="200dp"
            android:background="@color/reset_check" />
    com.google.android.flexbox.FlexboxLayout>

LinearLayoutのように、サブ要素は順番に並べられています.唯一属性が設定されているのはapp:alignItems="flex_です.start"では、FlexboxLayoutにはどのような属性がありますか.各属性の役割は、FlexboxLayoutの属性とFlexboxLayoutのサブ要素の属性の2つに分けられます.
FlexboxLayoutプロパティ

flexDirectionサブエレメントの主軸の配列方向

app:flexDirection="row"デフォルト値、水平方向、始点は左、左から右.

app:flexDirection=”row_reverse」はrow属性とは逆に、水平方向、右から左、起点は右端にあります.

app:flexDirection="column"主軸は鉛直方向であり、始点は上端、上から下である.

app:flexDirection=”column_reverse」はcolumnとは逆に、垂直方向、始点が下から上へ4枚の図の対比で、それぞれの属性の役割が明らかに見えるrow row_reverse column column_reverse

alignItemsサブエレメントの副軸の配列方向、例えば、主軸水平方向–副軸垂直方向

stretchのデフォルト値では、サブエレメントに高さが設定されていないかautoに設定されていない場合、親コンテナ全体の高さを占める

flex_start:先端揃え

flex_end:底揃え

center:中央揃え

baseline:サブエレメントの1行目の内容のベースライン揃えstretch flex_start flex_end center baseline baseline

flexWrapデフォルトFlexは改行せず、flexWrapを変更して改行をサポートできる

nowrap改行しない

wrap改行

wrap_reverse逆改行nowrap wrap wrap_reverse

justifyContent要素の主軸の揃え方

flex_startデフォルト、左揃え

flex_end右揃え-center中央揃え

space_Around隣接要素の両側間隔は等しく、両側要素と枠の間隔は2要素間隔の半分

space_between両端揃え、隣接する2つの要素間隔が等しいflex_start flex_end center space_around space_between

alignContent複数の副軸が存在する場合、副軸軸線の位置合わせ方式は、サブエレメントが1行のみの場合は機能しない

stretchのデフォルト値は、副軸の高さが充満しており、副軸配列app:alignItems="stretch"の場合のみ、app:alignContent="stretch"が有効になります.すなわち、app:alignItems="stretch"であり、app:alignContent="stretch"である

flex_startと交差軸の始点位置合わせ

flex_endとクロス軸の終点位置合わせ

center:交差軸の中点に揃えます.

space_around各軸線の両側間隔は等しい.したがって、軸線間の間隔は軸線と枠との間隔より倍になる

space_between両端揃え、軸線間の間隔が等しい

showDividerHorizontal制御表示水平方向の分割線、値none|beginning|middle|endのうちの1つまたは複数

dividerDrawableHorizontal Flex軸線間の水平方向の分割線を設定します.

showDividerVertical制御表示垂直方向の分割線、値none|beginning|middle|endのうちの1つ以上.

dividerDrawableVerticalサブエレメント垂直方向の分割線を設定します.

showDividerは、none|beginning|middle|endのうちの1つまたは複数の値を表示する水平方向と垂直方向の分割線を制御する.

dividerDrawable水平方向と垂直方向の分割線を設定しますが、Flex軸、サブエレメントにjustifyContent="space_around” 、alignContent=”space_betweenなど.予期せぬスペースが表示される可能性があるので、これらの値との併用は避けるべきです.

FlexboxLayoutサブエレメントのプロパティ

layout_orderサブエレメントのデフォルトはエレメントの位置によって前後に並べられていますが、layout_orderの値は、3番目の要素layout_など、数値の大きさで要素の配列順序を制御します.order設定-1

layout_flexGrow要素の拡大率、デフォルトは0で、LinearLayoutのlayout_と似ています.Weightプロパティは、スケールによって等分され、サブ要素のlayout_がある場合flexGrowは正の値であり、このItemにすべての空き領域が割り当てられます.この属性が複数ある場合、残りの領域の割り当てはlayout_に従います.flexGrow定義のスケール等分.

layout_flexShrinkサブエレメント縮小スケール、デフォルトは1で、サブエレメントが複数行ある場合は無効です.すべてのサブエレメントのlayout_flexShrink値は1で、スペースが不足している場合は、いずれも等比縮小し、1つが0、その他が1で、スペースが不足している場合は、0の縮小はなく、負の値は無効です.

layout_alignSelfサブエレメントの配置方法は、単一のサブエレメントに他のサブエレメントとは異なる配置方法を許可し、alignItemsプロパティを上書きすることができます.デフォルト値はautoで、親要素を継承するalignItemsプロパティを表します.親要素がない場合はstretchと同じです.

auto(default)親要素alignItems属性を継承し、親要素alignItems属性が存在しない場合はデフォルトstretch

flex_startとalignItemsのflex_start属性

flex_end同alignItemsのflex_end属性

センターとalignItemsのcente属性

baselineとalignItemsのbaseline属性

stretch同alignItemsのstretch属性

layout_親コンテナの長さに対するflexBasisPercent子要素の割合は、子要素自体のlayout_を上書きします.widthまたはlayout_Height、親コンテナの長さまたは幅に値が設定されている場合は無効です

layout_minWidth/layout_minHeightは、layout_flexShrink縮小スケールも、サブエレメント幅または高さの最小値以上を保証

layout_maxWidth/layout_maxHeightは、layout_flexGrow拡大率も、サブエレメント幅または高さの最大値以下を保証

layout_親コンテナにflex_が設定されていてもwrapBeforeは改行を強制します.wrap=nowrapは、現在の要素を次の行の最初の要素表示に変更します.

FlexboxLayoutには2つのバージョンがあり、内部テスト版にはRecyclerviewとの結合が追加されています.