项目主页,可从上面下载看 Demo。
compile 'com.google.android:flexbox:1.0.0'
看现在的版本已经到了 1.1.0,如果使用了 AndroidX 的依赖,需要使用 1.1.0 及以上版本,如果项目没用它,要用 1.0.0。
FlexboxLayout 可以理解为高级的 LinearLayout,因为这两个布局都将其子视图按序排列。二者之间的重要差异在于 FlexboxLayout 具有 “换行” 的特性。同时 FlexboxLayout 还为 RecycleView 提供了管理器 FlexboxLayoutManager。
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/flexbox_layout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:flexDirection="row"
app:flexWrap="wrap"
app:alignContent="stretch" >
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="1"
app:layout_flexGrow="1.0" />
<TextView
android:id="@+id/text2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="2"
app:layout_wrapBefore="true" />
<TextView
android:id="@+id/text3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="3" />
</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);
15161071507856.jpg
alignContent 和 justifyContent 里面的属性值都是一样的,一个是设置主轴的对齐方式,一个是设置多个轴的对齐方式。 比如是项目是水平换行,alignContent 就是设置垂直方向的对齐方式,justifyContent 就是设置水平方向的对齐方式。而 alignItems 是说第二行的第一个和第一行的第一个怎么对齐。
justifyContent="space_around"
、alignContent="space_between"
等等,可能会看到意料不到的空间,因此应该避免和这些值同时使用。
FlexboxLayout 不仅有自身的属性,还可以设置子元素的属性。
RecyclerView mRecyclerView = (RecyclerView)findViewById(R.id.test_recyclerView);
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager();
layoutManager.setFlexWrap(FlexWrap.WRAP); //设置是否换行
layoutManager.setFlexDirection(FlexDirection.ROW); // 设置主轴排列方式
layoutManager.setAlignItems(AlignItems.STRETCH);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
mRecyclerView.setLayoutManager(layoutManager);
Adapter 中绑定 View 的时候,设置子元素的属性
if (lp instanceof FlexboxLayoutManager.LayoutParams) {
FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) lp;
flexboxLp.setFlexGrow(1.0f);
flexboxLp.setAlignSelf(AlignSelf.FLEX_END);
}