Android 中的 Flexbox 布局

在玩之前，让我们了解一下 FlexBox 究竟是什么。

嘿，你也知道前端吗？如果是，那么您应该知道 CSS 中实际的 flexbox 是什么。要了解有关 CSS灵活框布局模块的更多信息，请单击此处。如果没有，请不要担心；这是解释：

Here the word “Flex” stands for Flexible. In this layout, items will “flex” to different sizes to fill the space. It helps us to make a responsive UI.

现在的问题是为什么我们要讨论前端技术而不是 Android。因为在 Android 中我们也需要制作这样的响应式 UI。就像 CSS FlexBox Layout 一样，Google 也制作了 FlexboxLayout 库以在 android 中使用。我们将通过一些简单的例子逐步讨论这个 Layout 的五个不同属性。这五个属性是，

1. 弹性方向
2. 弹性包装
3. 证明内容
4. 对齐项目
5. 对齐内容

首先，快速浏览一下这些属性：

1. 弹性方向

基本上， flexDirection属性确定主轴的方向。它有四个可能的参数，它们是，

• 排
• row_reverse
• 柱子
• column_reverse

现在，我们可以通过以下方式在 flexbox 布局中使用这些参数：

• In XML,  app:flexDirection=”parameter“
• Programmatically,

                    flexboxLayout.flexDirection = FlexDirection.PARAMETER      // Kotlin (Property access syntax)

                   flexboxLayout.setFlexDirection(FlexDirection.PARAMETER);   // Java

* In place of the word, parameter write down relevant parameters.

让我们使用下面的 flexbox 布局来测试对应属性的所有参数。

让我们看看结果：

2. 弹性包装

flexWrap属性控制 flex 容器是单行还是多行，以及横轴的方向（垂直于主轴）。简单来说，它就像支持换行符的 LinearLayout。它有三个可能的参数，它们是，

• 无包装
• 裹
• wrap_reverse

现在，我们可以通过以下方式在 flexbox 布局中使用这些参数：

• In XML,  app:flexWrap=”parameter”
• Programmatically,

                   flexboxLayout.flexWrap = FlexWrap.PARAMETER      // Kotlin (Property access syntax)

                   flexboxLayout.setFlexWrap(FlexWrap.PARAMETER);   // Java

 * In place of the word, parameter write down relevant parameters.

让我们使用下面的 flexbox 布局来测试对应属性的所有参数。

让我们看看结果：

3. 证明内容

justifyContent属性控制沿主轴的对齐方式。它有六个可能的参数，它们是：

• flex_start
• flex_end
• 中央
• space_between
• space_around
• 空间均匀

现在，我们可以通过以下方式在 flexbox 布局中使用这些参数：-

• In XML,  app:justifyContent=”parameter”
• Programmatically,

                  flexboxLayout.justifyContent = JustifyContent.PARAMETER      // Kotlin (Property access syntax)

                  flexboxLayout.setJustifyContent(JustifyContent.PARAMETER);   // Java

      * In place of the word, parameter write down relevant parameters.

让我们使用下面的 flexbox 布局来测试对应属性的所有参数。

让我们看看结果：

4.对齐项目

alignItems属性控制沿交叉轴的对齐方式。它有五个可能的参数，它们是，

• flex_start
• flex_end
• 中央
• 基线
• 拉紧

现在，我们可以通过以下方式在 flexbox 布局中使用这些参数：

• In XML,  app:alignItems=”parameter”
• Programmatically,

                 flexboxLayout.alignItems =AlignItems.PARAMETER      // Kotlin (Property access syntax)

                 flexboxLayout.setAlignItems(AlignItems.PARAMETER);   // Java

     * In place of the word, parameter write down relevant parameters.

让我们使用下面的 flexbox 布局来测试对应属性的所有参数。

让我们看看结果：

5.对齐内容

该属性控制伸缩容器中伸缩线的对齐方式。如果只有一个轴，则该属性不起作用。它有六个可能的参数，它们是，

• flex_start（默认）
• flex_end
• 中央
• space_between
• space_around
• 拉紧

现在，我们可以通过以下方式在 flexbox 布局中使用这些参数：

In XML,  app:alignContent=”parameter”

Programmatically,

                flexboxLayout.alignContent = AlignContent.PARAMETER      // Kotlin (Property access syntax)

                flexboxLayout.setAlignContent(AlignContent.PARAMETER);   // Java

* In place of the word, parameter write down relevant parameters.

让我们使用下面的 flexbox 布局来测试对应属性的所有参数。

让我们看看结果：

现在，您想在这个应用程序中使用所有这些属性吗？首先，您可以尝试自己制作。否则，您可以从我的项目的源代码中获取帮助。对于项目的源代码 -> 点击这里。