Android布局－FlexboxLayout

一时失言乱红尘 2023-10-17 08:42 84阅读 0赞

## Android布局－FlexboxLayout ##

FlexBoxLayout是Google的一个开源项目，它将前端中强大的Flexbox布局方式移植到了Android中，使用FlexBoxLayout可代替LinearLayout和RelativeLayout，并且可以搞定各种复杂的情况。

[FlexBoxLayout Github][]

### 添加依赖 ###

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

### 最简单的使用 ###

#### 通过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);

### 父元素的属性 ###

#### FlexDirection ####

子元素的排列方向，元素的排列方向为主轴的方向，该属性有四种取值，不同取值对应不同的主副轴

![Center][]

*  row: 默认，水平方向，起点在左边
 *  rowrow\_reverse: 水平方向，起点在右边
 *  column: 垂直方法，起点在上
 *  column\_reverse:垂直方法，起点在下

![flex-direction.gif][]

#### flexWrap ####

是否换行，默认为noWrap

*  noWrap(默认) 不换行
 *  wrap 换行
 *  wrap\_reverse 表示副轴反转

![flex-wrap.gif][]

#### justifyContent ####

表示控件沿主轴对齐方向

*  flex\_start (default) 默认左对齐
 *  flex\_end 右对齐
 *  center 居中对齐
 *  space\_between 两端对齐，模块间隔等距
 *  space\_around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

![justify-content.gif][]

#### alignItems ####

表示元素在副轴上的对齐方向（针对单行）

*  stretch (default) 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。
 *  flex\_start 副轴轴顶部对齐
 *  flex\_end 副轴轴底部对齐
 *  center 副轴轴居中对齐
 *  baseline 项目的第一行文字的底部对齐

![align-items.gif][]

#### alignContent ####

表示控件在副轴上的对齐方向（针对多行元素）  
如果项目只有一根轴线，该属性不起作用。

*  flex-start：与交叉轴的起点对齐。　　
 *  flex-end：与交叉轴的终点对齐。　　
 *  center：与交叉轴的中点对齐。　　
 *  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。　　
 *  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
 *  stretch（默认值）：轴线占满整个交叉轴。

![align-content.gif][]

### 子元素属性 ###

#### layout\_order(integer) ####

是用该属性克控制子View的排列顺序，负值在前，正值在后，默认为1

![layout_order.gif][]

#### layout\_flexGrow (float) ####

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。跟 LinearLayout 中的weight属性一样。

![layout_flexGrow.gif][]

#### layout\_flexShrink (float) ####

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的 layout\_flexShrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

![layout_flexShrink.gif][]

#### layout\_alignSelf ####

layout\_alignSelf 属性允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。默认值为auto，表示继承父元素的 alignItems 属性，如果没有父元素，则等同于stretch。

*  auto (default)
 *  flex\_start
 *  flex\_end
 *  center
 *  baseline
 *  stretch

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

![layout_alignSelf.gif][]

#### layout\_flexBasisPercent ####

定义了在分配多余空间之前，子元素占据的main size主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。

FlexboxLyaout可轻松代替[FlowLayout][]

![Center 1][]

### 不同之处 ###

跟传统的CSS中的Flexbox布局有些不同的是：

1.  没有 flex-flow 属性
2.  没有 flex 属性
3.  layout\_flexBasisPercent 属性即为CSS中 flexbox 中的 flexBasis 属性
4.  不支持 min-width 和 min-height 两个属性

### 其他 ###

> 参考  
> [http://blog.csdn.net/u012702547/article/details/52293593][http_blog.csdn.net_u012702547_article_details_52293593]  
> [http://blog.csdn.net/qq\_16131393/article/details/51860680][http_blog.csdn.net_qq_16131393_article_details_51860680]  
> [http://www.oschina.net/news/73442/google-flexbox-layout][http_www.oschina.net_news_73442_google-flexbox-layout]

[FlexBoxLayout Github]: https://github.com/google/flexbox-layout
[Center]: https://img-blog.csdn.net/20160823193924415?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[flex-direction.gif]: https://github.com/google/flexbox-layout/raw/master/assets/flex-direction.gif
[flex-wrap.gif]: https://github.com/google/flexbox-layout/raw/master/assets/flex-wrap.gif
[justify-content.gif]: https://github.com/google/flexbox-layout/raw/master/assets/justify-content.gif
[align-items.gif]: https://github.com/google/flexbox-layout/raw/master/assets/align-items.gif
[align-content.gif]: https://github.com/google/flexbox-layout/raw/master/assets/align-content.gif
[layout_order.gif]: https://github.com/google/flexbox-layout/raw/master/assets/layout_order.gif
[layout_flexGrow.gif]: https://github.com/google/flexbox-layout/raw/master/assets/layout_flexGrow.gif
[layout_flexShrink.gif]: https://github.com/google/flexbox-layout/raw/master/assets/layout_flexShrink.gif
[layout_alignSelf.gif]: https://github.com/google/flexbox-layout/raw/master/assets/layout_alignSelf.gif
[FlowLayout]: http://blog.csdn.net/lmj623565791/article/details/38352503
[Center 1]: https://img-blog.csdn.net/20140802223809500?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbG1qNjIzNTY1Nzkx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_u012702547_article_details_52293593]: http://blog.csdn.net/u012702547/article/details/52293593
[http_blog.csdn.net_qq_16131393_article_details_51860680]: http://blog.csdn.net/qq_16131393/article/details/51860680
[http_www.oschina.net_news_73442_google-flexbox-layout]: http://www.oschina.net/news/73442/google-flexbox-layout