Google官方Android开源库--FlexboxLayout

原文来自: Flexbox-layout

什么是Flexbox?

Flexbox 布局模型宗旨是对于在一个flex容器平铺出flex项提供更多高效的方法,即使flex项的大小未知.因此,它提供了更有效的方法,利用已存在的布局去实现响应式用户界面.

布局模型

flexbox_visual

安装Gradle依赖

1
2
3
4
dependencies {

compile 'com.google.android:flexbox:0.1.2'
}

用法

FlexboxLayout像LinearLayout和RelativeLayout一样继承了ViewGroup,你可以在一个XML中像这样指定属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<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);

支持的属性

对于一个FlexboxLayout,你能指定以下的属性:

1.flexDirection

子项的方向是摆放在Flexbox布局里面的,它决定里主轴线的方向(和十字交叉轴,垂直于主轴线),可能的值是:

  • row (default) 主轴为水平方向,起点在左端
    flexdirction_row
  • row_reverse 主轴为水平方向,起点在右端
    fiexdirection_row_reverse
  • column 主轴为垂直方向,起点在上沿
    flexdirection_column
  • column_reverse 主轴为垂直方向,起点在下沿。
    flexdirection_column_reverse

2.flexWrap

这个属性控制着flex容器是单行还是多行,方向是十字交叉轴可能的值是:

  • nowrap (default) 不换行
    flexwrap_nowrap
  • wrap 按正常方向换行
    flexwrap_wrap
  • wrap_reverse 按反方向换行
    flexwrap_wrap_reverse

3.justifyContent

这个属性控制着主轴线的边缘对齐方式,可能的值是:

  • flex_start (default) 左对齐
    justifycontent_flex_start
  • flex_end 右对齐
    justifycontent_flex_end
  • center 居中
    justifycontent_center
  • space_between 两端对齐
    justifycontent_space_between
  • space_around 每个子项两侧间的间距离相等
    justifycontent_space_around

4.alignItems

这个属性控制着十字轴的边缘对齐方式,可能的值是:

  • stretch (default) 如果子项没有设置高度或者设为auto,将占满整个容器的高度
    alignlitems_stretch
  • flex_start 交叉轴的起点中对齐
    alignlitems_flex_start
  • flex_end 交叉轴的终点对齐
    alignlitems_flex_end
  • center 交叉轴的中点对齐
    alignlitems_center
  • baseline 项目的第一行文字的基线对其
    alignlitems_baseline

5.alignContent

这个属性控制着flex行和flex容器的边缘对齐方式,可能的值是:

  • stretch (default) 轴线占满整个交叉轴
    alignContent_stretch
  • flex_start 与交叉轴的起点对齐
    alignContent_flex_start
  • flex_end 与交叉轴的终点对齐
    alignContent_flex_end
  • center 与交叉轴的终点对齐
    alignContent_center
  • space_between 与交叉轴两端对齐,轴线之间的间隔平均分配
    alignContent_space_between
  • space_around 每根轴线两侧的间隔相等
    alignContent_space_around

你也可以在FlexboxLayout中指定以下的属性:

1.layout_order

这个属性是能够改变子视图如何平铺的顺序. 默认你情况下,子视图显示和平铺顺序在布局XML文件中呈现的是相同的,如果不是指定情况下,1是它默认设置的值

2.layout_flexGrow

这个属性定义项目的放大比例,即如果存在剩余空间,也不放大,0是它默认设置的值

3.layout_flexShrink

这个属性定义了项目的缩小比例,即如果空间不足,该项目将缩小,0是它默认设置的值
负值对该属性无效。

4.layout_alignSelf

这个属性确定(垂直于主轴线)沿着横轴的对齐。在同一方向上的对准可由父视图的alignItems确定,但是如果这是设置为auto以外的值,对于这个子视图来说十字轴对准是要被重写。可能的值有:

  • auto (default) (自动)
  • flex_start (与交叉轴的起点对齐)
  • flex_end(与交叉轴的终点对齐)
  • center(与交叉轴的中点对齐)
  • baseline(与第一行文字的基线对齐)
  • stretch (如果子项没有设置高度或者设为auto,将占满整个容器的高度)

5.layout_flexBasisPercent

在一个分数格式中初始化flex项的长度,相对于父视图.该子视图的初始大小主要是试图扩大作为对父视图主要尺寸为指定的分数.如果这个值设置了,通过layout_width (或者 layout_height)这个属性计算值重写来指定长度.这个属性仅仅当它的父视图长度定义了(MeasureSpec 模式是MeasureSpec.EXACTLY)时才有效.默认值是-1,意味着没有设置

跟传统已知的CSS的区别

  • 没有flex-flow属性
  • 没有flex属性
  • layout_flexBasisPercent代替 flexBasis
  • 最小宽度和最小高度不能被指定
if (本文对您有用) { Pay (请随意¥打赏) } else { Commit feedback (底部评论区提交建议、反馈) } 感谢支持!