Android中的flexboxlayout布局

提到FlexboxLayout大家估计有点模糊,它是谷歌最近开源的一个android排版库,它的前身Flexbox是2009年W3C提出了一种新的布局,可以简便、完整、响应式的实现页面布局,Flexbox 是属于web前端领域CSS的一种布局方案。

首先:我们看一下它的属性。

flexDirection:

flexDirection属性是决定主轴的方向。好比LinearLayout的vertical(垂直) 和 horizontal(水平)方向。

flexDirection有四个可选值:

  • row:一般为默认值,主轴为水平方向,起点在左端。
  • row-reverse: 主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

如图:

row:

Android中的flexboxlayout布局

row-reverse:

Android中的flexboxlayout布局

column:

Android中的flexboxlayout布局

column-reverse:

Android中的flexboxlayout布局

 flexWrap:

默认情况下是不支持换行排列。

  • nowrap:不换行。
  • wrap: 正常方向换行。
  • wrap-reverse: 反方向换行。

如图:

wrap:

Android中的flexboxlayout布局

wrap-reverse:

Android中的flexboxlayout布局

justifyContent:

指定了项目在主轴上的对齐方式。

  • flex-start: 默认值为左对齐。
  • flex-end: 右对齐。
  • center: 居中。
  • space-between: 两端对齐,其间间距相等。
  • space-around: 两侧间距相等。

 如图:

space-around:

Android中的flexboxlayout布局

alignltems:

指定项目在副轴轴上的对齐方式。

  • flex-start: 交叉轴的起点对齐。(上)
  • flex-end:  交叉轴的终点对齐。(下)
  • center:     交叉轴的中点对齐。(中间线)
  • baseline:  第一行文字的基线对齐。()
  • stretch:   默认值是占满整个容器的高度,在未设置高度或者为auto。

     如图:

flex-start:

Android中的flexboxlayout布局

flex-end:

Android中的flexboxlayout布局

center:

Android中的flexboxlayout布局

baseline:基线跟图一类似

Android中的flexboxlayout布局

stretch:默认

Android中的flexboxlayout布局

alignContent:

    指定多根轴线的对齐方式,如果只有一条轴,该属性不起任何作用。

  • flex-start: 与交叉轴的起点对齐。
  • flex-end:  与交叉轴的终点对齐。
  • center:     与交叉轴的中点对齐。
  • space-between:  与交叉轴的两端对齐,轴线之间的间隔分布均匀。
  • space-around:   每根轴线两侧的间隔相等。
  • stretch: 默认值为轴线占满整个交叉轴。

子元素的属性:

layout_order:默认情况下子元素的排列方式按照文档流的顺序依次排序,而order可以控制排列的顺序,负值在前,正直灾后,按照从小到大的顺序一次排列。

layout_flexGrow:指定项目的放大比例,默认为0,如果存在剩余空间,也不放大。如果为1,等分剩余空间。

layout_flexShrink:缩小比例,默认为1,空间不足,项目缩小。如果属性都为1,空间不足时,将等比缩小。负值无效。

layout_alignSelf:允许单个子元素与其它子元素有不一样的对齐方式,可覆盖alignltems属性,默认值为auto,表示继承父元素的alignltems属性,如没有父元素,则等同于stretch。

该属性有6个值,除了auto,其它都与align-items属性一样。

layout_flexBasisPercent:指定了在分配多余空间之前,子元素占据的main size主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。默认值为auto,即子元素的本来大小。图片后续附上。

activity_main.xml

<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="flex_start"
app:alignItems="flex_start"
app:flexWrap="wrap"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_main"> <TextView
android:id="@+id/textview1"
style="@style/FlexItem"
android:layout_width="@dimen/flex_item_length2"
android:layout_height="@dimen/flex_item_length"
android:text="@string/one" /> <TextView
android:id="@+id/textview2"
style="@style/FlexItem"
android:layout_width="@dimen/flex_item_length3"
android:layout_height="@dimen/flex_item_length"
android:text="@string/two" /> <TextView
android:id="@+id/textview3"
style="@style/FlexItem"
android:layout_width="@dimen/flex_item_length"
android:layout_height="@dimen/flex_item_length"
android:text="@string/three" /> </com.google.android.flexbox.FlexboxLayout>

添加依赖:

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

源码git上有,大家可以去git上下载。

上一篇:Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能


下一篇:移动端 new CustomEvent('input') 兼容问题