Android弹性收缩自适应布局FlexboxLayout

时间:2021-12-03 16:17:14

Android弹性收缩自适应布局FlexboxLayout


其在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://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:alignContent="flex_start"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="zhang"
        android:textColor="@android:color/white" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="phil"
        android:textColor="@android:color/white"
        app:layout_flexGrow="1" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="zhang phil"
        android:textColor="@android:color/white" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="csdn"
        android:textColor="@android:color/white" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="zhang phil 3"
        android:textColor="@android:color/white"
        app:layout_order="3" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="zhang phil 2"
        android:textColor="@android:color/white"
        app:layout_order="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="zhang phil 1"
        android:textColor="@android:color/white"
        app:layout_order="1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="zhang phil @ csdn"
        android:textColor="@android:color/white" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="5dp"
        android:background="@android:color/holo_blue_bright"
        android:gravity="center"
        android:text="https://blog.csdn.net/zhangphil"
        android:textColor="@android:color/white" />
</com.google.android.flexbox.FlexboxLayout>

代码运行结果输出:

Android弹性收缩自适应布局FlexboxLayout


app:layout_order

默认值是1,值越小,越靠前排列,越大,越排到后面。