android适配手机升级：最新布局FlexboxLayout替代LinearLayout（支持RecycleView）

最新推荐文章于 2024-08-19 20:55:23 发布
最新推荐文章于 2024-08-19 20:55:23 发布
阅读量6.8k 收藏 15
点赞数 7
分类专栏： Android控件使用 文章标签： FlexboxLayout 适配
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/79026336
版权

FlexboxLayout是google前一段时间推出的新控件，目前github已经有了10K颗星星了，FlexboxLayout的功能十分强大，使用FlexboxLayout代替LinearLayout是最好不过的选择，同时结合之前的百分比适配的话，很好的解决手机布局适配问题。

FlexboxLayout主要5大布局属性，分别是flexDirection,flexWrap,justifyContent ,alignItems ,alignContent
具体解释如下：

  • 引入FlexboxLayout
compile 'com.google.android:flexbox:0.3.2'

  • Flexboxlayout 5大布局属性之-flexDirection

    这里写图片描述

   1、row（默认值）：水平方向、从左向右依次排列

   2、row_reverse：水平方向、从右向左依次排列

   3、column：垂直方向、从上向下依次排列

   4、column-reverse：垂直方向、从下向上依次排列

详细对应的属性如下：

1、 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexDirection="row">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="row（默认值）：水平方向、从左向右依次排列" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fd0202"
        android:gravity="center"
        android:text="textview1"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fdcf02"
        android:gravity="center"
        android:text="textview2"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#38fd02"
        android:gravity="center"
        android:text="textview3"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#02bafd"
        android:gravity="center"
        android:text="textview4"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#020afd"
        android:gravity="center"
        android:text="textview5"
        android:textColor="#ffffff" />

</com.google.android.flexbox.FlexboxLayout>

2、 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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="row_reverse：水平方向、从右向左依次排列" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fd0202"
        android:gravity="center"
        android:text="textview1"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fdcf02"
        android:gravity="center"
        android:text="textview2"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#38fd02"
        android:gravity="center"
        android:text="textview3"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#02bafd"
        android:gravity="center"
        android:text="textview4"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#020afd"
        android:gravity="center"
        android:text="textview5"
        android:textColor="#ffffff" />

</com.google.android.flexbox.FlexboxLayout>

3、 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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:gravity="center"
        android:text="column：垂直方向、从上向下依次排列" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fd0202"
        android:gravity="center"
        android:text="textview1"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fdcf02"
        android:gravity="center"
        android:text="textview2"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#38fd02"
        android:gravity="center"
        android:text="textview3"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#02bafd"
        android:gravity="center"
        android:text="textview4"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#020afd"
        android:gravity="center"
        android:text="textview5"
        android:textColor="#ffffff" />

</com.google.android.flexbox.FlexboxLayout>

4、 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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="5dp"  android:gravity="center"
        android:text="column-reverse：垂直方向、从下向上依次排列" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fd0202"
        android:gravity="center"
        android:text="textview1"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#fdcf02"
        android:gravity="center"
        android:text="textview2"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#38fd02"
        android:gravity="center"
        android:text="textview3"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#02bafd"
        android:gravity="center"
        android:text="textview4"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#020afd"
        android:gravity="center"
        android:text="textview5"
        android:textColor="#ffffff" />

</com.google.android.flexbox.FlexboxLayout>
  • Flexboxlayout大布局属性之-flexWrap

这里写图片描述

     1、nowrap:不换行

     2、wrap：按正常方向换行

     3、wrap-reverse：按反方向换行

详细对应的属性如下：

1、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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="nowrap:不换行" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

2、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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="wrap：按正常方向换行" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

3、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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="wrap-reverse：按反方向换行" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
  • Flexboxlayout 5大布局属性之-justifyContent

这里写图片描述

    1、flex_start（默认值）：左对齐

    2、flex-end：右对齐

    3、center： 居中

    4、space-between：两端对齐，控件之间的间隔相等

    5、space-around：每个控件距离两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)

详细对应的属性如下：

1、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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="flex_start（默认值）：左对齐" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

2、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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="flex-end：右对齐" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

3、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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="center： 居中" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

4、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="space-between：两端对齐，控件之间的间隔相等" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

5、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="space-around：每个控件距离两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
  • Flexboxlayout 5大布局属性之-alignItems

这里写图片描述

    1、stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

    2、flex-start：左上方开始，并与左上方对齐

    3、flex-end：左下方开始，并与左下方对齐

    4、center：左控件的中间开始，并与中心线水平对齐

    5、baseline: 控件中的文字向上对齐

详细对应的属性如下：

1、stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

这里写图片描述

<?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:layout_width="80dp"
            android:layout_height="80dp"
            android:gravity="center"
            android:padding="5dp"
            android:text="stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

2、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="flex-start：左上方开始，并与左上方对齐" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

3、flex-end：左下方开始，并与左下方对齐

这里写图片描述

 效果图中：应为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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="flex-end：左下方开始，并与左下方对齐" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

4、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="center：左控件的中间开始，并与中心线水平对齐" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

5、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:padding="5dp"
            android:text="baseline: 控件中的文字向上对齐" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
  • Flexboxlayout 5大布局属性之-alignContent

这里写图片描述

    1、stretch(默认值)：占满整个父控件。

    2、flex-start：与左上角对齐。

    3、flex-end：与左下角对齐。

    4、center：居中对齐。

    5、space_between：两端对齐。

    6、space_around：控件两侧的间隔都相等（所以控件到控件距离是边上的2倍）

详细对应的属性如下：

1、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="stretch(默认值)：占满整个父控件。" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

2、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="flex-start：与左上角对齐。" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

3、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="flex-end：与左下角对齐。" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

4、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="center：居中对齐。" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

5、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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="space_between：两端对齐。" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>

6、space_around：控件两侧的间隔都相等（所以控件到控件距离是边上的2倍）

这里写图片描述

<?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:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="5dp"
            android:text="space_around：控件两侧的间隔都相等（所以控件到控件距离是边上的2倍）" />

        <TextView
            android:id="@+id/textview1"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#ff0202"
            android:gravity="center"
            android:padding="5dp"
            android:text="textview1" />

        <TextView
            android:id="@+id/textview2"
            android:layout_width="60dp"
            android:layout_height="80dp"
            android:background="#ffc402"
            android:gravity="center"
            android:text="textview2" />

        <TextView
            android:id="@+id/textview3"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:background="#06ff02"
            android:gravity="center"
            android:text="textview3" />

        <TextView
            android:id="@+id/textview4"
            android:layout_width="90dp"
            android:layout_height="80dp"
            android:background="#02c8ff"
            android:gravity="center"
            android:text="textview4" />

        <TextView
            android:id="@+id/textview5"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#022cff"

            android:gravity="center"
            android:text="textview5" />


    </com.google.android.flexbox.FlexboxLayout>
</FrameLayout>
  • 元素的权重

这里写图片描述

<?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:layout_width="0dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="layout_flexGrow(表示元素的权重属性)"
        app:layout_flexGrow="2" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="0dp"
        android:layout_height="80dp"
        android:background="#ff0202"
        android:gravity="center"
        android:padding="5dp"
        android:text="textview1"
        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:layout_width="300dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="因为宽度不足，所以text1就缩小三分之二，text2缩小三分之一。"
        app:layout_flexShrink="2" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="#ff0202"
        android:gravity="center"
        android:padding="5dp"
        android:text="textview1"
        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:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="layout_order(控制排列的顺序，按照从小到大的顺序依次排列)"
        app:layout_order="1" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:background="#ff0202"
        android:gravity="center"
        android:padding="5dp"
        android:text="textview1"
        app:layout_order="6" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:background="#ffc402"
        android:gravity="center"
        android:text="textview2"
        app:layout_order="5" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#06ff02"
        android:gravity="center"
        android:text="textview3"
        app:layout_order="4" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="90dp"
        android:layout_height="80dp"
        android:background="#02c8ff"
        android:gravity="center"
        android:text="textview4"
        app:layout_order="3" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:background="#022cff"
        android:gravity="center"
        android:text="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:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="layout_flexBasisPercent(按照横轴的百分比进行布局)"
        app:layout_flexBasisPercent="30%" />

    <TextView
        android:id="@+id/textview1"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:background="#ff0202"
        android:gravity="center"
        android:padding="5dp"
        android:text="textview1"
        app:layout_flexBasisPercent="50%" />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="60dp"
        android:layout_height="80dp"
        android:background="#ffc402"
        android:gravity="center"
        android:text="textview2"
        app:layout_flexBasisPercent="50%" />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="#06ff02"
        android:gravity="center"
        android:text="textview3"
        app:layout_flexBasisPercent="50%" />

    <TextView
        android:id="@+id/textview4"
        android:layout_width="90dp"
        android:layout_height="80dp"
        android:background="#02c8ff"
        android:gravity="center"
        android:text="textview4"
        app:layout_flexBasisPercent="50%" />

    <TextView
        android:id="@+id/textview5"
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:background="#022cff"
        android:gravity="center"
        android:text="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="80dp"
        android:layout_height="wrap_content"
        android:background="#05f20d"
        android:gravity="center"
        android:padding="5dp"
        android:text="layout_alignSelf(允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。默认值为auto)" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#0534f2"
        android:gravity="center"
        android:text="text1"
        android:textColor="#ffffff"
        app:layout_alignSelf="center" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#f20505"
        android:gravity="center"
        android:text="text2"
        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/ic_remove_black_24dp"
        app:showDividerHorizontal="beginning">

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#f2ea05"
            android:gravity="center"
            android:text="text2"
            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/ic_remove_black_24dp"
        app:showDividerVertical="end|beginning">

        <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="#d205f2"
            android:gravity="center"
            android:text="text2"
            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/ic_remove_black_24dp"
        app:showDivider="end|middle|beginning">

        <TextView
            android:layout_width="120dp"
            android:layout_height="100dp"
            android:background="#0534f2"
            android:gravity="center"
            android:text="text3"
            android:textColor="#ffffff" />
    </com.google.android.flexbox.FlexboxLayout>


</com.google.android.flexbox.FlexboxLayout>
  • 与RecyclerView 的结合

这里写图片描述

item的布局

<?xml version="1.0" encoding="utf-8"?>

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="1dp"
    android:src="@drawable/cat_1"
    android:scaleType="centerCrop"/>
package tsou.cn.flexboxlayouttest.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.google.android.flexbox.FlexboxLayoutManager;

import java.util.List;

import tsou.cn.flexboxlayouttest.R;

public class HomeAdapter extends RecyclerView.Adapter<HomeAdapter.ViewHolder> {
    private Context mContext;
    private List<Integer> mList;

    private OnItemClickListener onItemClickListener;

    public HomeAdapter(Context mContext, List<Integer> list) {
        this.mContext = mContext;
        this.mList = list;
    }

    public interface OnItemClickListener {
        //点击轮播图
        void OnSliderClick(int postion);


    }

    public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
        this.onItemClickListener = onItemClickListener;
    }


    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(mContext).inflate(R.layout.item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mImage.setImageResource(mList.get(position));
        ViewGroup.LayoutParams lp = holder.mImage.getLayoutParams();
        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            FlexboxLayoutManager.LayoutParams flexboxLp =
                    (FlexboxLayoutManager.LayoutParams) holder.mImage.getLayoutParams();
            flexboxLp.setFlexGrow(1.0f);
        }

    }

    @Override
    public int getItemCount() {
        return mList.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {
        View view;
        ImageView mImage;

        ViewHolder(View view) {
            super(view);
            this.view = view;
            this.mImage = (ImageView) view.findViewById(R.id.image);
        }
    }
}
package tsou.cn.flexboxlayouttest.activity;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;

import com.google.android.flexbox.AlignItems;
import com.google.android.flexbox.FlexDirection;
import com.google.android.flexbox.FlexWrap;
import com.google.android.flexbox.FlexboxLayoutManager;

import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

import tsou.cn.flexboxlayouttest.R;
import tsou.cn.flexboxlayouttest.adapter.HomeAdapter;

public class RecyclerViewActivity extends AppCompatActivity {

    private RecyclerView mRecyclerview;
    private FlexboxLayoutManager manager;

    private List<Integer> list = new CopyOnWriteArrayList<>();

    public static void actionStart(Context context) {
        context.startActivity(new Intent(context, RecyclerViewActivity.class));
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_recycler);
        initData();
        initView();
    }

    private void initData() {
//        for (int i = 0; i < 255; i++) {
//            list.add("https://unsplash.it/200/200?random&" + i);
//        }
        for (int i = 0; i < 5; i++) {
            list.add(R.drawable.cat_1);
            list.add(R.drawable.cat_2);
            list.add(R.drawable.cat_3);
            list.add(R.drawable.cat_4);
            list.add(R.drawable.cat_5);
            list.add(R.drawable.cat_1);
            list.add(R.drawable.cat_4);
            list.add(R.drawable.cat_5);
            list.add(R.drawable.cat_13);
            list.add(R.drawable.cat_14);
            list.add(R.drawable.cat_18);
            list.add(R.drawable.cat_6);
            list.add(R.drawable.cat_7);
            list.add(R.drawable.cat_8);
            list.add(R.drawable.cat_15);
            list.add(R.drawable.cat_16);
            list.add(R.drawable.cat_17);
            list.add(R.drawable.cat_9);
            list.add(R.drawable.cat_2);
            list.add(R.drawable.cat_3);
            list.add(R.drawable.cat_10);
            list.add(R.drawable.cat_11);
            list.add(R.drawable.cat_12);
            list.add(R.drawable.cat_19);
        }
    }

    private void initView() {
        mRecyclerview = (RecyclerView) findViewById(R.id.recyclerview);

        manager = new FlexboxLayoutManager(this);
        //设置主轴排列方式
        manager.setFlexDirection(FlexDirection.ROW);
        //是否换行
        manager.setFlexWrap(FlexWrap.WRAP);
        //对齐方式
        manager.setAlignItems(AlignItems.STRETCH);
        mRecyclerview.setLayoutManager(manager);
        mRecyclerview.setAdapter(new HomeAdapter(this, list));

    }
}

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

晓果博客
关注
专栏目录
android适配手机升级：最新布局FlexboxLayout替代LinearLayout（支持RecycleView
m0_66264324的博客
01-19 559
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:layout_widt
Android两大布局：线性布局(LinearLayout) 相对布局(RelativeLayout)
辣m;精彩
12-17 1469
主要单词 RelativeLayout  LinearLayout orientation  vertical  horizontal  gravity Android两大布局？ 1.LinearLayout: 这种布局比较常用，就是每个元素占一行，当然也可能声明为横向排放，也就是每个元素占一列。 LinearLayout按照垂直或者水平的顺序依次排列子元素，每一个子元素都位于前
FlexboxLayout-----Android弹性布局
08-14
FlexboxLayout是一个Android平台上与CSS的弹性盒子布局模块 有相似功能的库。博客地址：http://blog.csdn.net/dickyqie/article/details/77155327
Android FlexboxLayout布局属性详解
最新发布
2401_85192019的博客
08-19 951
需要注意的是项目中如果有的没有文本基线，那么默认他的基线就是左上角也就是起点左右位置。让每个项目的高度设置为了填满容器的高度（这里的高度是指同一轴上的最高高度） 现在我们设置对齐方式为中心对齐，添加属性。这也是为什么我们的每一个项目的高度都是不相同的，但是可以看到前面每个项目的高度都是一样的，因为默认属性。属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。的同学应该比较好理解这个属性，其实就是按照项目内的文本线来对齐项目。是设置多个轴的对齐方式，通俗的讲可以理解为比如是项目是水平换行，
Google开源的FlexboxLayout
stormzhang的专栏
05-15 356
阅读本文大概需要8分钟。最近Google开源了一个项目叫「FlexboxLayout」，但是貌似没多少资料对这个项目介绍的，那么今天来讲讲这个项目的作用以及简单的使用介绍...
Android之练习MVVM+DataBinding框架模式
afsdfrsg的博客
03-28 360
MVVM的缺点数据绑定使得 Bug 不易调试，也会使得一个位置的 Bug 被快速传递到别的位置。虽然使用Model方便了保证数据一致性，但是大的模块中长期不释放内存就会造成花费更多的内存。数据双向绑定不利于View部分的代码复用。再更深层次学习，可以使用LiveData+ViewModel以下是采用MVVM框架的代码：int level;@Override//初始化viewModel//模拟查询账号数据}else {@Bindable。
Android-FlexboxLayout布局你学会了吗？
m0_57624732的博客
06-03 1186
github上的项目主页：https://github.com/google/flexbox-layout 使用前先添加引用： dependencies { implementation ‘com.google.android:flexbox:0.3.2’ } 写一个布局演示： <?xml version="1.0" encoding="utf-8"?> <com.google.android.flexbox.FlexboxLayout xmlns:android=“http://sche
FlexboxLayout流式布局替换Recycleview实现单选/多选
12-08
FlexboxLayout是Android开发中的一种布局工具，它源自于Web前端的Flexbox布局模型，用于替代传统的LinearLayout、RelativeLayout等布局，特别是在实现复杂、灵活的界面布局时，FlexboxLayout显示出了其强大的优势。...
FlexboxLayout流式布局替换Recycleview实现单选/多选(纯java代码)
12-11
FlexboxLayout是Android开发中的一种布局管理器，它是Google在Android Support Library中引入的一个新组件，主要用于替代传统的LinearLayout和GridLayout等布局方式。FlexboxLayout基于Web前端布局中的Flexbox模型，...
FlexboxLayout:Android版Flexbox-开源
04-25
FlexboxLayout是一个库项目，将CSS Flexible Box Layout Module的类似功能引入了Android。 从1.1.0版开始，该库有望与AndroidX一起使用。 如果您使用1.1.0或更高版本，则应迁移到AndroidX。 有两种在布局中使用...
android最新最全的布局大全
04-08
本文档资料最主要是介绍android有关的布局，对初学者和布局不熟悉的学者来说是非常有帮助的。
flexadapter, 在Android上，使用RecyclerView最简单的方法.zip
09-17
flexadapter, 在Android上，使用RecyclerView最简单的方法 定义和协调RecyclerView或者ViewPager中的多个布局，而不包含样板。单个适配器中的多个项布局，但没有转换。每个项目 span，滑动和拖动一个RecyclerView中的行为，只有几行代码。在ViewPager
com.google.android:flexbox:0.3.0-alpha2依赖资源
03-28
要在主工程的gradle中添加版本信息或者自己在资源包中添加版本号，依赖此资源就可以实现FlexboxLayout与Recycleview的后续操作，我的主工程版本代码： ext { minSdkVersion = 9 targetSdkVersion = 25 compileSdkVersion = 25 buildToolsVersion = "25.0.2" supportLibVersion = "25.3.0" espressoVersion = "2.2.2" testRunnerVersion = "0.5" junitVersion = "4.12" }
响应式布局flex的使用，更好的适配不同尺寸的设备。
01-30
响应式布局flex的使用，更好的适配不同尺寸的设备。响应式布局flex的使用，更好的适配不同尺寸的设备。
Android开发之玩转FlexboxLayout布局（可实现流式布局）
06-20
最近发现了一个好的布局控件，有流式布局的效果，FlexboxLayout，我写了一个例子，上传到这里，和大家交流学习，希望大家多多指正
Android Flexboxlayout使用详解
Jack921的专栏
07-27 1376
对于学习React Native或者前端的同学肯定对Flexbox 的有所了解，因为这是前端领域CSS的一种布局方案，现在google也开源了类似前端Flexbox的项目叫Flexboxlayout，这样android也可以用Flexboxlayout实现类似前端Flexbox的布局。首先Flexboxlayout有5大布局属性分别是flexDirection,flexWrap,justifyCon
【Android -- 开源库】FlexboxLayout 的基本使用
Kevin Learn Android
12-05 3135
本篇文章就介绍一下它的用法和最新版添加的一些特性（支持集成RecyclerView）。
安卓flex
heqian650的博客
08-25 408
安卓4.3 flex 的兼容性，注意手机字体设置问题
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值