Android FlexboxLayout

FlexboxLayout

概述

FlexboxLayout是谷歌开源的一个强大的空间，直接继承于ViewGroup，FlexBoxLayout是为Android带来了与 CSS Flexible Box Layout（CSS 弹性盒子）相似功能的库。

依赖库：

implementation 'com.google.android:flexbox:1.0.0'    

Flex结构图

基本使用

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical">

    <com.google.android.flexbox.FlexboxLayout
        android:id="@+id/flexboxLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:alignContent="stretch"
        app:alignItems="stretch"
        app:flexDirection="row"
        app:flexWrap="wrap"
        app:justifyContent="flex_start">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="Java" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="Android"
            app:layout_order="0" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="HTML" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="CSS" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="JavaScript" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="ES" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="NodeJs" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="Python" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="Flutter" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="Golang" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="微信小程序" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"
            android:background="@drawable/shape_bg"
            android:padding="2dp"
            android:text="鸿蒙" />
    </com.google.android.flexbox.FlexboxLayout>
</LinearLayout>

FlexboxLayout属性介绍

flexDirection

app:flexDirection="row"

设置主轴排列方向

• row：默认值，主轴为水平方向，起点在左端
• row_reverse：主轴为水平方向，起点在右端
• column：主轴是垂直方向，起点在顶部
• column_reverse：主轴是垂直方向，起点在底部

flexWrap

app:flexWrap="wrap"

设置FlexboxLayout是否换行

• nowrap：默认值，不换行
• wrap：正常方向换行
• warp_reverse：反方向换行

justifyContent

app:justifyContent="flex_start"

设置主轴对齐方式

• flex_start：默认值，左对齐
• flex_end：右对齐
• center：居中
• space_between：两端对齐，子元素之间的间隔相等
• space_around：子元素两侧的间隔相等

alignItems

app:alignItems="stretch"

设置副轴对齐方式

• stretch：默认值，当子元素没有设置具体高度，会填充整个父容器
• flex_start：副轴起点对齐
• flex_end：副轴终点对齐
• center：副轴中点对齐

alignContent

app:alignContent="stretch"

设置多条轴线的对齐方式，如果只有一条轴线则不起作用

alignContent的属性与justifyContent一样，justifyContent设置主轴的对齐方式，alignContent在出现换行时设置多个轴的对齐方式

• stretch：默认值，填充整个父容器
• flex_start：与交叉轴的起点对齐
• flex_end：与交叉轴的终点对齐
• center：与交叉轴的中点对齐
• space_between：与交叉轴两端对齐，轴线之间的间隔相等
• sapce_around：轴线两侧的间隔相等

showDividerHorizontal & dividerDrawable

app:showDividerHorizontal="middle"
app:dividerDrawableHorizontal="@drawable/divider"

showDividerHorizontal设置水平方向分割线位置

• none：不显示
• beginning：只显示起点处
• middle：显示中间处
• end：只显示终点处

dividerDrawableHorizontal设置分割线样式

showDividerVertical & dividerDrawableVertical

app:showDividerVertical="middle"
app:dividerDrawableVertical="@drawable/divider"

showDividerVertical设置垂直方向分割线位置

dividerDrawableVertical设置分割线样式

showDivider & dividerDrawable

app:showDivider="middle"
app:dividerDrawable="@drawable/divider"

showDivider同时设置水平方向和垂直方向的分割线位置

dividerDrawable设置水平方向和垂直方向的分割线的样式

子元素属性介绍

layout_order

app:layout_order="-1" 

FlexboxLayout默认按照文档流排序，通过layout_order可以设置排列顺序

layout_flexGrow

app:layout_flexGrow="1"

layout_flexGrow是用于处理剩余空间，默认值为0，类似于LinearLayout的weight属性

layout_flexShrink

app:layout_flexShrink="1"

layout_flexShrink是用于当空间不足时（设置换行无效），子元素会缩小，默认值为1

当layout_flexShrink为0时，其他元素依然为1时，空间不足也不会缩小

layout_flexBasisPercent

app:layout_flexBasisPercent="50%

设置子元素占主轴空间的百分比