FlexboxLayout 布局

「大部分内容是实践 + 翻译自官方文档」

摘要

这个规范描述了一个为用户界面设计所进行了优化的 CSS 框架模型。在这个弹性布局模型中，子元素可以以任何方向设置，子元素设置可以充满未用的布局空间或者缩小空间以避免溢出父控件的布局。可以轻松操作子元素的水平排列或竖直排列。嵌套布局(水平内部垂直，或者垂直内部水平)可以在两个维度上构建布局。

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

简单使用

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.flexbox.FlexboxLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    app:alignContent="flex_start"
    app:alignItems="stretch"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    tools:context="com.badmask_zly.flexboxlayoutdemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Hello World!" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Monday" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Tuesday" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Wednesday" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Thursday" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Friday" />

</com.google.android.flexbox.FlexboxLayout>

显示如下：

简单使用.png

属性介绍 -- 顺序和方向 ：

flexDirection : 决定子 item 在 FlexboxLayout 布局中的展示方向。

属性值	value
row	水平方向，从左到右，展示子 item
row-reverse	水平方向，从右到左，展示子 item
column	竖直方向，从上到下，展示子 item
column-reverse	竖直方向，从下到上，展示子 item

flexWrap : 决定 FlexboxLayout 布局中子 item 呈现一行还是多行，决定与 flexDirection 所决定方向的垂直方向的展示

属性值	value
nowrap	不换行
wrap	flexDirection 取水平方向时，竖直方向为从上到下；flexDirection 取竖直方向时，水品方向为从左到右
wrap-reverse	flexDirection 取水平方向时，竖直方向为从下到上；flexDirection 取竖直方向时，水品方向为从右到左

app:layout_order :

FlexboxLayout 布局中子 item 可以设置这个属性。默认情况下，所有的 item 的 order 值都相同。值越小，越靠前。

属性介绍 -- 灵活性 ：

layout_flexGrow :

相当于 LinearLayout 布局中的 layout_weight 属性。

layout_flexShrink :

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的 layout_flexShrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。仅在单行时，此属性有效。

layout_flexBasisPercent :

值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。注意：此属性在 FlexboxLayout 的宽度设置为 wrap_content 时，。默认值时-1。

属性介绍 -- 基准 ：

justifyContent :

属性值	value
center	居中对齐
flex_start	flexDirection 为row ,子 item ，左对齐; flexDirection 为row_reverse ,子 item ，右对齐;flexDirection 为 column ,子 item ，上对齐;flexDirection 为 column_reverse ,子 item ，下对齐
flex_end	自行对比 flex_start 属性
space_around	每个元素到两侧的距离相等
space_between	两端对齐，中间间隔相同

alignItems ：属性控制元素在副轴方向的对齐方式，有以下5种取值：

属性值	value
stretch (default)	...
flex_start
flex_end
center
baseline

待继续 ～ 「 与 RecyclerView 的使用」