android中使用flexboxlayout

FlexboxLayout在Android中的使用

很高兴和大家再次见面，我是lady_zhou，这是我的Blog，欢迎大家一起来学习FlexboxLayout

Google最近开源了一个关于布局的项目，FlexboxLayout，一款运用在Android而功能类似于CSS弹性框布局模块的布局

安装

添加下面的依赖关系到你的build.gradle文件

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

用法

FlexboxLayout 像 LinearLayout 和 RelativeLayout一样继承ViewGroup，所以可以在xml中这样定义:

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/flexbox_layout"
app:alignContent="center"
app:alignItems="center"
app:flexWrap="wrap">

<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@android:color/holo_red_dark"
android:text="1"
android:textAlignment="center"
/>

<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@android:color/holo_blue_dark"
android:text="2"
app:layout_alignSelf="center"
/>

<TextView
android:id="@+id/textview3"
android:layout_width="160dp"
android:layout_height="80dp"
android:background="@android:color/holo_purple"
android:text="3"
app:layout_alignSelf="center" />
<TextView
android:id="@+id/textview4"
android:layout_width="160dp"
android:layout_height="80dp"
android:background="@android:color/holo_purple"
android:text="3"
app:layout_alignSelf="center" />
</com.google.android.flexbox.FlexboxLayout>

这个控件多出了几个属性，在顶部设置就可以了

app:flexWrap="wrap" // 子控件是否自动换行

app:alignItems="flex_start" // 子控件在其所在行/列中的对齐方式

app:alignContent="flex_start" //内容的对齐方式 从头对齐还是从尾对齐

app:flexDirection="column" //子控件排列方式，是列或行（可倒序排列）

app:justifyContent="flex_end" //子控件行列时的对齐方式，中间或两端

如此之外，这样写代码也可以：

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

子项目放置在Flexbox的布局内部，它确定主轴线（和横向轴线，垂直于主轴线）的方向。可能的值有：

row (default)

row_reverse

column

column_reverse

2.flexWrap

此属性控制柔性容器是否是单行或多行，和十字轴的方向。可能的值有

nowrap (default)

wrap

wrap_reverse

3.justifyContent

此属性控制沿主轴线的取向。可能的值有

flex_start (default)

flex_end

center

space_between

space_around

4.alignItems

此属性控制沿十字轴的对齐方式。可能的值有

stretch (default)

flex_start

flex_end

center

baseline

5.alignContent

此属性控制在柔性容器中的弯曲线的对准。可能的值有

stretch (default)

flex_start

flex_end

center

space_between

space_around

6.layout_order

这个属性中“1”被设置为一个默认值。

7.layout_flexGrow

这个属性中“0”被设置为一个默认值。

8.layout_flexShrink

这个属性中“1”被设置为一个默认值。

9.layout_alignSelf

此属性确定（垂直于主轴线）沿着横轴的对齐。可能的值有：

auto (default)

flex_start

flex_end

center

baseline

stretch

10.layout_flexBasisPercent

默认值是-1，这意味着未设置。

GitHub上FlexboxLayout的示例