FlexboxLayout

最新推荐文章于 2025-01-24 14:53:08 发布

yanftch

最新推荐文章于 2025-01-24 14:53:08 发布

阅读量436

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Android总结文章标签： android 谷歌布局

本文链接：https://blog.youkuaiyun.com/Ivenes/article/details/64905460

Android总结专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个由Google开源的强大布局方案FlexboxLayout，该方案能够轻松实现在Android平台上的复杂布局需求，具有换行特性，提供了丰富的属性配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天看到Google官方的博客介绍了Google开源的一个强大的布局－FlexboxLayout，看见第一眼我心里的想法是，卧槽，Android 居然有这么一个强大的布局….于是就试试。。。

github地址：https://github.com/google/flexbox-layout

那么FlexboxLayout 它到底是个什么东西呢？看一下Github对这个库的介绍:FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. 意思是：FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块有相似功能的库。Flexbox 是CSS 的一种布局方案，可以简单、快捷的实现复杂布局。FlexboxLayout可以理解成一个高级版的LinearLayout，因为两个布局都把子view按顺序排列。两者之间最大的差别在于FlexboxLayout具有换行的特性。

上图：

图1

看图说话~虽然网上也有非常多的实现这种效果的开源，但是毕竟是谷歌官方出品，还是挺一下呗~~~

代码再说话：

<?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="flex_start"
app:alignItems="center"
app:flexDirection="row"
app:flexWrap="wrap"
app:justifyContent="flex_start"
app:showDivider="beginning|middle"
>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="程序猿"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="产品狗"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    app:layout_flexGrow="1"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="攻城狮"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    app:layout_flexGrow="1"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="码农.码农"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    app:layout_flexGrow="1"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="广告圈"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="IT.射鸡师"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="娱乐"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="军事"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="新闻"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="头条"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="游戏"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="生活"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    app:layout_order="2"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="音乐"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    app:layout_order="2"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:background="@drawable/shape_tv"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:text="人生"
    android:textColor="@color/text_color"
    app:layout_alignSelf="flex_start"
    app:layout_order="2"
    />
</com.google.android.flexbox.FlexboxLayout>

属性解释一下：

针对他的属性，可以分为两类：针对自己的；针对子Item的~

针对自己的： ## Attributes for the FlexboxLayout:

flexDirection

flexDirection属性决定了主轴的方向，即FlexboxLayout里子Item的排列方向，有以下四种取值：

row (default)：默认值，主轴为水平方向，从左到右。(图1就是默认)

row_reverse：主轴为水平方向，起点在右端，从右到左。(图2)

column：主轴为竖直方向，起点在上端，从上到下。(图3)

column_reverse：主轴为竖直方向，起点在下端，从下往上。(图4)

图1：

图2

图3

图4

flexWrap

flexWrap 这个属性决定Flexbox容器是单行还是多行，并且决定副轴（与主轴垂直的轴）的方向。可能有以下3个值：

noWrap: 不换行，一行显示完子元素。

wrap: 按正常方向换行。

wrap_reverse: 按反方向换行。

justifyContent

justifyContent 属性控制元素主轴方向上的对齐方式，有以下5种取值：

flex_start (default): 默认值，左对齐

flex_end: 右对齐

center: 居中对齐

space_between: 两端对齐，中间间隔相同

space_around: 每个元素到两侧的距离相等。

alignItems

alignItems 属性控制元素在副轴方向的对齐方式，有以下5种取值：

stretch (default) ：默认值，如果item没有设置高度，则充满容器高度。

flex_start：顶端对齐

flex_end：底部对齐

center：居中对齐

baseline：第一行内容的的基线对齐。

对子元素的属性：

layout_order

layout_order 属性可以改变子元素的排列顺序，默认情况下，FlexboxLayout子元素的排列是按照xml文件中出现的顺序。默认值为1，值越小排在越靠前。

layout_flexShrink(float)

layout_flexShrink子元素缩小比例，当空间不足时，子元素需要缩小（设置了换行则无效），默认值为1，如果所有子元素的layout_flexShrink 值为1,空间不足时，都等比缩小，如果有一个为0，其他为1，空间不足时，为0的不缩小，负值无效。

layout_flexBasisPercent (fraction)

layout_flexBasisPercent的值为一个百分比，表示设置子元素的长度为它父容器长度的百分比，如果设置了这个值，那么通过这个属性计算的值将会覆盖layout_width或者layout_height的值。但是需要注意，这个值只有设置了父容器的长度时才有效（也就是MeasureSpec mode 是 MeasureSpec.EXACTLY）。默认值时-1。