android flexboxlayout简单使用

android flexboxlayout简单使用

什么是flexbox

简单来说 Flexbox 是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局，并且 React Native 也是使用的 Flex 布局。

你可以简单的理解为 Flexbox 是CSS领域类似 Linearlayout 的一种布局，但是要比 Linearlayout 要强大的多

flexboxlayout就是谷歌发布的类似flex的应用于android的方案

使用

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

---

<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>

支持的属性

• flexDirection

  决定主轴的水平方向

  
  
  • row （默认值）：主轴为水平方向，起点在左端
  • row-reverse 主轴为水平方向，起点在右端
  • column 主轴为垂直方向，起点在上沿
  • column-reverse 主轴为垂直方向，起点在下沿
• flexWrap Flex 跟 LinearLayout 一样，都是不带换行排列的，但是flexWrap属性可以支持换行排列
  
  • nowrap 不换行
  • wrap 按正常方向换行
  • wrap-reverse 按反方向换行
• justifyContent

  属性定义了项目在主轴上的对齐方式

  
  
  • flex-start 左对齐 默认值
  • flex-end 右对齐
  • center 居中
  • space-between 两端对其，项目之间的间隔都相等
  • space-around 每个项目两侧的间隔相等。
• alignItems

  定义项目在副轴轴上如何对齐

  
  
  • flex-start 交叉轴的起点对齐
  • flex-end 交叉轴的终点对其
  • center 交叉轴的中点对其
  • baseline 项目的第一行文字的基线对齐
  • stretch 默认值如果项目未设置高度或设为auto，将占满整个容器的高度
• alignContent

  属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

  
  
  • flex-start 与交叉轴的起点对齐
  • flex-end 与交叉轴的终点对齐
  • center 与交叉轴的中点对齐
  • space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
  • space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
  • stretch 默认值）：轴线占满整个交叉轴

---

跟CSS不同之处

• 没有flex-flow属性
• 没有flex属性
• layout_flexBasisPercent 属性即为CSS中 flexbox 中的 flexBasis 属性
• 不支持min-width 和 min-height