介绍
提到布局，大家都知道ConstraintLayout、LinearLayout、RelativeLayout等等。那么今天我们来介绍一下Google I/O在2016年发布的FlexboxLayout,这款布局听说称之为高级版的LinearLayout,FlexboxLayout相对于LinearLayout来说主要就是多了一个“换行”的特性。
Flexbox是web前端里面css领域的一种布局，跟LinearLayout很相似，但是相对来说强大了很多。
使用
- 引入
首先，需要添加依赖
implementation 'com.google.android:flexbox:1.0.0'FlexboxLayout五大属性
-
flexDirection
flexdirection属性决定主轴的方向(即项目的排列方向)。在LinearLayout中相当于vertical和horizontal。
- row(默认值):水平显示，起点在左端。
- row-reverse:水平显示，起点在右端。
- column:垂直显示，起点在顶部。
- column_reverse:垂直显示，起点在底部。
flexdirection属性实现效果和相应代码:
- row
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
app:flexDirection="row"
tools:ignore="MissingClass">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#2196F3"
android:gravity="center"
android:text="@string/textview1"
android:textColor="#673AB7" />
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview5"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#009688"
android:gravity="center"
android:text="@string/textview5"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>
- row-reverse
<?xml version="1.0" encoding="utf-8"?>
<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:flexDirection="row_reverse">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview5"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>- column
<?xml version="1.0" encoding="utf-8"?>
<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:flexDirection="column">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview5"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>- column_reverse
<?xml version="1.0" encoding="utf-8"?>
<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:flexDirection="column_reverse">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"
android:textColor="#ffffff" />
<TextView
android:id="@+id/textview5"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>
2.flexWrap
这个属性可以支持flex换行。其中，有两种换行方式，一种是以项目排列方向换行，另一种是反方向换行。
- nowrap(默认值):不换行
- wrap:按正常方向换行
- wrap_reverse:按反方向换行
flexWrap属性实现效果和相应代码:
- nowrap
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="nowrap">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"
/>
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- wrap
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- wrap_reverse
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap_reverse">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5"/>
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>3.justifyContent
这个属性决定了元素在主轴上的对齐方式
- flex_start(默认值):左对齐
- flex_end:右对齐
- center:居中
- space_between:两端对齐，元素之间间隔都相等
- space_around:每个元素两侧的间隔相等，元素之间的间隔比元素与布局边框的间隔要大一倍
justifyContent属性实现效果和相应代码:
- flex_start
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:justifyContent="flex_start">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- flex_end
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:justifyContent="flex_end">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- center
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:justifyContent="center">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- space_between
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:justifyContent="space_between">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- space_around
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:justifyContent="space_around">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>4.alignItems
这个属性决定元素在交叉轴方向上的对齐方式。
- stretch(默认值):交叉轴方向占满整个父布局
- flex_start:交叉轴的起点对齐
- flex_end:交叉轴的终点对齐
- center:交叉轴的居中对齐
- baseline:元素第一行文字的基线对齐
alignItems属性实现效果和相应代码:
- stretch
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="stretch">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- flex_start
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="flex_start">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- flex_end
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="flex_end">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- center
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="center">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#ff0202"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#ffc402"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#06ff02"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#02c8ff"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#022cff"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- baseline
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="baseline">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
5.alignContent
这个属性决定了多根轴线的对齐方式。但是如果只有一根，属性不起作用。
- stretch(默认值):轴线占满整个交叉轴
- flex_start:交叉轴方向起点对齐
- flex_end:交叉轴方向终点对齐
- center:交叉轴方向居中对齐
- space_between:交叉轴方向两端对齐，元素之间的间隔都相等
- space_around:每个元素两侧的间隔相等。元素之间的间隔比元素与布局边框的间隔大一倍
alignContent属性实现效果和相应代码:
- stretch:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="stretch">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- flex_start:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="flex_start"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview1" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- flex_end:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="flex_end"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
- center:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="center"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- space_between:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="space_between"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>- space_around:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignContent="space_around"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1" />
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"/>
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5" />
</com.google.android.flexbox.FlexboxLayout>
</FrameLayout>6.子元素属性
FlexboxLayout同时还支持以下元素属性:
- 元素权重:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textview1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1"
app:layout_flexGrow="2" />
<TextView
android:id="@+id/textview2"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview2"
app:layout_flexGrow="1" />
</com.google.android.flexbox.FlexboxLayout>
- 元素的缩放比例:
<?xml version="1.0" encoding="utf-8"?>
<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="300dp"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textview1"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1"
app:layout_flexShrink="2" />
<TextView
android:id="@+id/textview2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="#E91E63"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview2"
app:layout_flexShrink="1" />
</com.google.android.flexbox.FlexboxLayout>- 改变元素的排列顺序:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1"
app:layout_order="6" />
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
app:layout_order="5" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
app:layout_order="4" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"
app:layout_order="3" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5"
app:layout_order="2" />
</com.google.android.flexbox.FlexboxLayout>
- 子元素占据空间的百分比
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#03A9F4"
android:gravity="center"
android:padding="5dp"
android:text="@string/textview1"
app:layout_flexBasisPercent="50%" />
<TextView
android:id="@+id/textview2"
android:layout_width="60dp"
android:layout_height="80dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
app:layout_flexBasisPercent="50%" />
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
app:layout_flexBasisPercent="50%" />
<TextView
android:id="@+id/textview4"
android:layout_width="90dp"
android:layout_height="80dp"
android:background="#FF5722"
android:gravity="center"
android:text="@string/textview4"
app:layout_flexBasisPercent="50%" />
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:background="#4CAF50"
android:gravity="center"
android:text="@string/textview5"
app:layout_flexBasisPercent="50%" />
</com.google.android.flexbox.FlexboxLayout>
- 单个子元素的位置对齐方式
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
app:alignItems="flex_start">
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"
android:textColor="#ffffff"
app:layout_alignSelf="center" />
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
app:layout_alignSelf="flex_end" />
</com.google.android.flexbox.FlexboxLayout>
- 分割线
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:layout_height="match_parent"
app:alignContent="space_around"
app:flexWrap="wrap">
<com.google.android.flexbox.FlexboxLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:dividerDrawableHorizontal="@drawable/elephant"
app:showDividerHorizontal="beginning">
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#03A9F4"
android:gravity="center"
android:text="@string/textview1"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>
<com.google.android.flexbox.FlexboxLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:dividerDrawableVertical="@drawable/elephant"
app:showDividerVertical="end|beginning">
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#E91E63"
android:gravity="center"
android:text="@string/textview2"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>
<com.google.android.flexbox.FlexboxLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:dividerDrawable="@drawable/elephant"
app:showDivider="end|middle|beginning">
<TextView
android:layout_width="120dp"
android:layout_height="100dp"
android:background="#673AB7"
android:gravity="center"
android:text="@string/textview3"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>
</com.google.android.flexbox.FlexboxLayout>以上就是关于FlexboxLayout属性的基本介绍和基本用法，我觉得对比LinearLayout好用挺多，有很多优点，有兴趣的话大家可以去试一试！因为本人只是一名大学生，涉猎稍浅，只通过查阅资料了解一点皮毛，如果有所帮助，可以点个赞，谢谢！GOOK LUCK!