【Android -- 开源库】FlexboxLayout 可伸缩布局

【Android -- 开源库】FlexboxLayout 可伸缩布局

一、简介

本篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）。 Github地址：​​​。

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。

FlexboxLayout 可以理解成一个高级版的 LinearLayout，因为两个布局都把子 view 按顺序排列。两者之间最大的差别在于 FlexboxLayout 具有换行的特性。

二、属性

1. flexDirection flexDirection 属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：

2. flexWrap flexWrap 这个属性决定Flex 容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

noWrap: 不换行，一行显示完子元素。wrap: 按正常方向换行。wrap_reverse: 按反方向换行。

3. justifyContent justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：

flex_start (default): 默认值，左对齐flex_end: 右对齐center: 居中对齐space_between: 两端对齐，中间间隔相同space_around: 每个元素到两侧的距离相等。

4. alignItems alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：

stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。flex_start：顶端对齐flex_end：底部对齐center：居中对齐baseline：第一行内容的的基线对齐。

5. alignContent alignContent 属性控制多根轴线的对齐方式(也就是控制多行，如果子元素只有一行，则不起作用)，可能有一下6种取值：

stretch (default): 默认值，充满交叉轴的高度（测试发现，需要alignItems 的值也为stretch 才有效）。flex_start: 与交叉轴起点对齐。flex_end: 与交叉轴终点对齐。center: 与交叉轴居中对齐。space_between: 交叉轴两端对齐，中间间隔相等。space_around: 到交叉轴两端的距离相等。

6. showDividerHorizontal showDividerHorizontal 控制显示水平方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

7. dividerDrawableHorizontal dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。

8. showDividerVertical showDividerVertical 控制显示垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

9. dividerDrawableVertical dividerDrawableVertical 设置子元素垂直方向的分割线。

10. showDivider showDivider 控制显示水平和垂直方向的分割线，值为none | beginning | middle | end其中的一个或者多个。

11. dividerDrawable dividerDrawable 设置水平和垂直方向的分割线，但是注意,如果同时和其他属性使用，比如为 Flex 轴、子元素设置了justifyContent=“space_around” 、alignContent=“space_between” 等等。可能会看到意料不到的空间，因此应该避免和这些值同时使用。

三、使用

dependencies { implementation 'com.google.android.flexbox:flexbox:3.0.0'}

3. 布局文件

当然，你可以在代码中向 FlexboxLayout 布局动态添加子元素，代码如下：

mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout); // 通过代码向FlexboxLayout添加View TextView textView = new TextView(this); textView.setBackground(getResources().getDrawable(R.drawable.label_bg_shape)); textView.setText("Test Label"); textView.setGravity(Gravity.CENTER); textView.setPadding(30,0,30,0); textView.setTextColor(getResources().getColor(R.color.text_color)); mFlexboxLayout.addView(textView); //通过FlexboxLayout.LayoutParams 设置子元素支持的属性 ViewGroup.LayoutParams params = textView.getLayoutParams(); if(params instanceof FlexboxLayout.LayoutParams){ FlexboxLayout.LayoutParams layoutParams = (FlexboxLayout.LayoutParams) params; layoutParams.setFlexBasisPercent(0.5f); }

四、与 RecyclerView 的结合

1. 添加依赖

dependencies { implementation 'com.google.android.flexbox:flexbox:3.0.0'}

2. 使用 FlexboxLayoutManager 代替 LinearLayoutManager ,如下：

FlexboxLayoutManager manager = new FlexboxLayoutManager(); //设置主轴排列方式 manager.setFlexDirection(FlexDirection.ROW); //设置是否换行 manager.setFlexWrap(FlexWrap.WRAP); manager.setAlignItems(AlignItems.STRETCH);

3. 在 Adapter 里设置 flexGrow :

ImageView mImageView = rvBaseViewHolder.getImageView(R.id.image_src); mImageView .setImageResource(mData); ViewGroup.LayoutParams lp = mImageView.getLayoutParams(); if (lp instanceof FlexboxLayoutManager.LayoutParams) { FlexboxLayoutManager.LayoutParams flexboxLp = (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams(); flexboxLp.setFlexGrow(1.0f); }

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。