Android FlexboxLayout控件盒子模型(清晰篇)

　　这段时间一直忙于工作，最近终于有时间休息下了，然后总想写点什么发现不知道写什么。苦思之后，想到我之前的一个遗憾，那就Google新推出的盒子布局，我想我应该写点什么了。

　　说明:

　　　　FlexboxLayout是google官方开源的一个可以简单快速创建具有弹性功能的流式布局，它的目的是使用我们常见的布局模式，帮我们很好的实现UI区域的比例划分，比如三列布局，可以非常简单的实现。它支持非常多的属性设置，用起来很简单。

　　Android studio使用配置如下：

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

 

　　使用方式如下XML：

　　介绍说明：FlexboxLayout集成子ViewGroup，类似LinearLayout 和RelativeLayout.可以直接在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(FlexDirection.ROW);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);

　　属性介绍如下:

　　1、flexDirection

　　　　该属性决定了盒子布局主轴方向类似线性布局方向。

　　　　允许的值如下：

　　　　　　row(default)   默认按照行的排列方式(水平方向)

　　　　　　row_reverse　　按照行的反向排列(倒序)

　　　　　　column　　　　 列排列方式(竖直方向)

　　　　　　column_reverse 列的反向排列方式(倒序)

　　　　效果参考官方gif图：

　　　　

 

 　　2、flexWrap

 　　　　该属性决定盒子模型是单行显示还是多行显示

　　　　允许的值如下：

　　　　　　nowrap(default)　　不换行

　　　　　　wrap　　　　　　　　换行

　　　　　　wrap_reverse　　　　换行(倒序排列)

　　　　效果参考官方gif图：

　　　　

　　3、justifyContent

　　　　主轴排列方向(跟flex的方向来决定)

　　　　允许的值如下：

　　　　　　flex_start(default)   左对齐

　　　　　　flex_end　　　　　　　右对齐

　　　　　　center　　　　　　　　居中对齐

　　　　　　space_between　　　　 剩余空间等间隙均分排列(不包括两端)

　　　　　　space_around　　　　　剩余空间等间隙均分排列(包括两端)

　　　　效果参考官方gif图：

 　　4、alignItems

　　　　该属性决定主轴的交叉轴中所有view的排列方式。

　　　　允许的值如下：

　　　　　　strech(default)　　　　填充列的高度(假设主轴方向是row)

　　　　　　flex_start　　　　　　 对齐列的顶端(假设主轴方向是row)

　　　　　　flex_end　　　　　　　 对齐列的低端 (假设主轴方向是row)

　　　　　　center　　　　　　　　 居中对齐

　　　　　　baseline　　　　　　　 对齐基准线

　　　　效果参考官方gif图：

　　　　

 

 

　　5、alignContent

　　　　该属性决定交叉轴列的排列方式(在交叉轴为多行/列时才有效)

　　　　允许的值如下：

　　　　　　strech(default)　　　　交叉轴的高度/宽度

　　　　　　flex_start　　　　　　 交叉轴排列方式对齐顶端从上而下无间隙排列(假设主轴方向是row)

　　　　　　flex_end　　　　　　　 交叉轴排列方式对齐底端从上而下无间隙排列(假设主轴方向是row)

　　　　　　center　　　　　　　　 交叉轴排列方式居中对齐无间隙排列(假设主轴方向是row)

　　　　　　space_between　　　　　交叉轴排列方式对齐顶端和低端中间部分等分剩余空间

　　　　　　space_around　　　　　 交叉轴排列方式所有列等分剩余空间

　　　　效果参考官方gif图：

　　　　　　

 

 　　6、showDividerHorizontal

　　　　该属性决定水平分割线

　　　　允许的值如下(允许键入多个值)：

　　　　　　none　　　　无

　　　　　　beginning　 开始位置

　　　　　　middle　　　中间位置

　　　　　　end　　　　 结束位置

　　7、showDividerVertical

　　　　该属性等同showDividerHorizontal,不同在于竖直方向.

　　　　

　　8、showDivider

　　　　该属性等同showDividerHorizontal和showDividerVertical,不同在于包含两者.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

　　盒子布局中item属性定义

　　9、layout_order

　　　　该属性决定item位置，默认是1，该值越大显示越靠后.(必须是整数)

　　　　效果参考官方gif图：

 

　　10、layout_flexGrow

　　　　类似线性布局权重，填充剩余空间。(可以为整数和小数)

　　　　效果参考官方gif图：

　　　　

 

　　11、layout_flexShrink 

 　　　　该属性决定当行内收缩比例，当一行内元素宽度一定，缩小宽度时，所有view水平压缩比。（默认是1，等比压缩，0表示不压缩）

　　　　效果参考官方gif图：

　　　　

 

 　　12、layout_alignSelf

　　　　该属性决定单个item的对齐方式,只有当交叉轴的高度大于item高度时才有效果(alignContent属性).用于重载alignItems效果.

　　　　alignContent属性：

　　　　strech　　　　有效果

　　　　align_start　 需要调整对齐方式的item的高度小于交叉轴高度则有效果

　　　　align_end 　　需要调整对齐方式的item的高度小于交叉轴高度则有效果

　　　　center　　　　需要调整对齐方式的item的高度小于交叉轴高度则有效果

　　　　space_around　需要调整对齐方式的item的高度小于交叉轴高度则有效果

　　　　space_between 需要调整对齐方式的item的高度小于交叉轴高度则有效果

　　　　允许的值如下：

　　　　　　auto(default) 　　由alignItems来决定

　　　　　　strech　　　　　　填充列的高度(假设主轴方向是row)

　　　　　　flex_start　　　　对齐列的顶端(假设主轴方向是row)

　　　　　　flex_end　　　　　对齐列的低端 (假设主轴方向是row)

　　　　　　center　　　　　　居中对齐

　　　　　　baseline　　　　　对齐基准线

　　　　效果参考官方git图：

　　　　　　

 

　　13、layout_minWidth / layout_minHeight

　　　　设置最小宽度和最大高度，允许缩放的最小值。

　　　　效果参考官方gif图：

　　　　

 

　　14、layout_maxWidth / layout_maxHeight

　　　　设置最大宽度和最大高度，允许缩放的最大值。

　　　　效果参考官方gif图：

　　　　　　

 

　　15、layout_wrapBefore

　　　　该属性控制在该item前增加换行操作，boolean值，默认false。

　　　　效果参考官方gif图：

　　　　

 

更多关于盒子模型可参考github官方教程

https://github.com/google/flexbox-layout

　　　　　　

 

 

 

 

　　　　

 

转载于:https://www.cnblogs.com/liemng/p/7505181.html