EasyClick 原生UI连载二十

EasyClick 原生UI教程

讲师：Mr-老鬼，QQ：1156346325
EasyClick 原生UI教程电梯直达：
EasyClick 原生UI教程总纲

EasyClick 原生UI 连载之 FlexboxLayout 布局（聪明的布局）

FlexboxLayout 是什么？
解释
FlexboxLayout是 Google I/O 上开源的一个布局控件，使得 Android 里的 CSS Flexible Layout模块也能拥有同样强大的功能。
FlexboxLayout 可以理解为高级的 LinearLayout ，因为这两个布局都将其子视图按序排列。二者之间的重要差异在于 FlexboxLayout 具有 “换行” 的特性。所以号称是聪明的布局。
FlexboxLayout项目开源地址:谷歌开源地址

效果图

自动排版按需设置子控件属性。

FlexboxLayout 常用属性

flexDirection

flexDirection属性决定主轴控件排列方向。类似LinearLayout 的 vertical 和 horizontal，但是FlexboxLayout更加强大，不仅支持横向和纵向还可以设置不同的排列的起点。详细属性如下所示

• row（默认值）：主轴为水平方向，起点在左端
• row_reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿
• column_reverse：主轴为垂直方向，起点在下沿

flexWrap

默认FlexboxLayout 和 LinearLayout 一样是不带换行属性的，但是flexWrap属性可以支持换行排列。换行方式有两种，一种是正方向换行，一种是反方向换行。详细属性如下所示。

• nowrap ：不换行 （默认属性）
• wrap：按正常方向换行
• wrap_reverse：按反方向换行

justifyContent

justifyContent 属性定义了控件在主轴上的对齐方式。

• flex_start（默认值）：左对齐
• flex_end：右对齐
• center： 居中
• space_between：两端对齐，控件之间的间隔都相等。
• space_around：每个控件两侧的间隔相等。控件之间的间隔比控件与边框的间隔大一倍。

alignItems

alignItems属性定义控件在副轴轴上如何对齐。

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 控件的第一行文字的基线对齐。
• stretch（默认值）：如果控件未设置高度或设为auto，将占满整个容器的高度。

alignContent

alignContent属性定义了多根轴线的对齐方式。如果控件只有一根轴线，该属性不起作用。

• flex_start：与交叉轴的起点对齐。
• flex_end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space_between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space_around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
• stretch（默认值）：轴线占满整个交叉轴。
  注意
  alignContent和justifyContent其实里面的属性值都是一样的 ，一个是设置主轴的对齐方式，一个是设置多个轴的对齐方式，通俗的讲可以理解为比如是布局是水平换行，justifyContent就是设置垂直方向的对齐方式，justifyContent就是设置水平方向的对齐方式。现在我们想让每个控件距离上右下左的距离是一样的，需要把alignContent和justifyContent都设置为space_around就可以了，
  例子

		
		android:alignContent="space_around"
		android:justifyContent="space_around"

FlexboxLayout 子元素属性

FlexboxLayout不仅有自身的属性，还可以设置子元素的属性。子元素就是FlexboxLayout 布局里面包含的子控件。

layout_order

默认情况下子元素的排列方式按照xml控件顺序依次排序，而order属性可以控制排列的顺序，负值在前，正值在后，按照从小到大的顺序依次排列。就是你可以自定义子元素的排列顺序。

layout_flexGrow

layout_flexGrow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。其实就是 LinearLayout 中的weight属性，如果所有项目的layout_flexGrow 属性都为1，则它们将等分剩余空间。如果一个项目的layout_flexGrow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

layout_flexShrink

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

layout_alignSelf

layout_alignSelf 属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。默认值为auto，表示继承父元素的alignItems 属性，如果没有父元素，则等同于stretch。该属性可以取6个值，除了auto，其他都与align_items属性完全一致。详细属性如下所示，详细说明参考上面的解释。

• auto (默认)
• flex_start
• flex_end
• center
• baseline
• stretch

layout_flexBasisPercent

layout_flexBasisPercent 属性定义了在分配多余空间之前，子元素占据的主轴空间的百分比。它的默认值为auto，即子元素的本来大小。
例子：

		android:layout_flexBasisPercent="80%" 

代码演示

效果图在顶上

<ScrollView xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xmlns:android="http://schemas.android.com/apk/res/android"
            xsi:noNamespaceSchemaLocation="layout.xsd"
            android:layout_height="match_parent"
            android:layout_width="match_parent">
    <FlexboxLayout android:layout_weight="match_parent"
                   android:layout_height="match_parent"
                   android:background="#FFFFFF"
                   android:flexDirection="row"
                   android:flexWrap="wrap"
                   android:justifyContent="flex_start"
                   android:alignContent="flex_start"
                   android:alignItems="flex_start"
                   android:padding="5dp">
        
        <TextView android:layout_width="wrap_parent"
                  android:layout_height="40dp"
                  android:gravity="center"
                  android:text="文本1" />
        <EditText android:layout_width="wrap_parent"
                  android:layout_weight="1"
                  android:layout_height="wrap_content"
                  android:layout_order="1"
                  android:layout_flexGrow="20.0"
                  android:layout_alignSelf="baseline"
                  android:layout_flexBasisPercent="30%"
                  android:hint="提示文本" />
        <TextView android:layout_width="wrap_parent"
                  android:layout_height="40dp"
                  android:gravity="center"
                  android:text="文本2" />
        <EditText android:layout_width="wrap_parent"
                  android:layout_weight="1"
                  android:layout_height="wrap_content"
                  android:layout_order="1"
                  android:layout_flexGrow="20.0"
                  android:layout_alignSelf="baseline"
                  android:layout_flexBasisPercent="30%"
                  android:hint="提示文本" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:gravity="center"
                  android:text="选择框1" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框2" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框3" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框4" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框5" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框6" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框7" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框8" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框9" />
        <CheckBox android:layout_width="wrap_parent"
                  android:layout_height="wrap_content"
                  android:text="选择框10" />

    FlexboxLayout>
ScrollView>

参考资料：
谷歌项目
网络搜集的解释
Android FlexboxLayout 聪明的UI布局
FlexboxLayout的使用说明书
Android 弹性布局 FlexboxLayout（一）
EasyClick 官方文档：弹性盒子布局

我是Mr-老鬼、QQ1156346325 。交流QQ群：620028786,647082990
------------------------------------------------版权声明------------------------------------------------------
本文版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明：本文所有的教程仅限交流学习使用不得用于违法用途，造成的法律后果本人不承担责任。