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>

代码运行结果输出:




app:layout_order


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

评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!