Android弹性收缩自适应布局FlexboxLayout

Myth丶恋晨 2023-10-17 19:04 3阅读 0赞

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

代码运行结果输出：

![20180412152941666][]

app:layout_order

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

[20180412152941666]: https://img-blog.csdn.net/20180412152941666