【Android】弹性布局- - FlexboxLayout

其他 2021-12-12 15:17:40 阅读次数: 0

【Android】弹性布局- - FlexboxLayout

介绍

提到布局，大家都知道ConstraintLayout、LinearLayout、RelativeLayout等等。那么今天我们来介绍一下Google I/O在2016年发布的FlexboxLayout,这款布局听说称之为高级版的LinearLayout,FlexboxLayout相对于LinearLayout来说主要就是多了一个“换行”的特性。

Flexbox是web前端里面css领域的一种布局，跟LinearLayout很相似，但是相对来说强大了很多。

使用

  • 引入

首先，需要添加依赖

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

FlexboxLayout五大属性

  1. flexDirection

    flexdirection属性决定主轴的方向(即项目的排列方向)。在LinearLayout中相当于vertical和horizontal。

  • ​ row(默认值):水平显示，起点在左端。
  • ​ row-reverse:水平显示，起点在右端。
  • ​ column:垂直显示，起点在顶部。
  • ​ column_reverse:垂直显示，起点在底部。

flexdirection属性实现效果和相应代码:

  • row

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

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

img

<?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同时还支持以下元素属性:

  • 元素权重:

img

<?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>
  • 元素的缩放比例:

img

<?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>
  • 改变元素的排列顺序:

img

<?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>
  • 子元素占据空间的百分比

img

<?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>
  • 单个子元素的位置对齐方式

img

<?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>
  • 分割线

img

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

作者：赖炜超
原文链接

猜你喜欢

转载自blog.csdn.net/fjnu_se/article/details/121879673
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022