android中使用flexboxlayout

最新推荐文章于 2024-09-13 22:26:35 发布

lady_zhou

最新推荐文章于 2024-09-13 22:26:35 发布

阅读量1.4k

点赞数 1

分类专栏： Android 文章标签： android css 布局谷歌开源

本文链接：https://blog.csdn.net/lady_zhou/article/details/51484728

版权

Android 专栏收录该内容

54 篇文章 1 订阅

订阅专栏

FlexboxLayout在Android中的使用

很高兴和大家再次见面，我是lady_zhou，这是我的Blog，欢迎大家一起来学习FlexboxLayout

Google最近开源了一个关于布局的项目，FlexboxLayout，一款运用在Android而功能类似于CSS弹性框布局模块的布局

安装

添加下面的依赖关系到你的build.gradle文件

dependencies {
    compile 'com.google.android:flexbox:0.1.3'
}

用法

FlexboxLayout 像 LinearLayout 和 RelativeLayout一样继承ViewGroup，所以可以在xml中这样定义:

<?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"
    android:id="@+id/flexbox_layout"
    app:alignContent="center"
    app:alignItems="center"
    app:flexWrap="wrap">

    <TextView
        android:id="@+id/textview1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@android:color/holo_red_dark"
        android:text="1"
        android:textAlignment="center"
        />

    <TextView
        android:id="@+id/textview2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@android:color/holo_blue_dark"
        android:text="2"
        app:layout_alignSelf="center"
        />

    <TextView
        android:id="@+id/textview3"
        android:layout_width="160dp"
        android:layout_height="80dp"
        android:background="@android:color/holo_purple"
        android:text="3"
        app:layout_alignSelf="center" />
    <TextView
        android:id="@+id/textview4"
        android:layout_width="160dp"
        android:layout_height="80dp"
        android:background="@android:color/holo_purple"
        android:text="3"
        app:layout_alignSelf="center" />
    </com.google.android.flexbox.FlexboxLayout>

这个控件多出了几个属性，在顶部设置就可以了

app:flexWrap="wrap" // 子控件是否自动换行

app:alignItems="flex_start" // 子控件在其所在行/列中的对齐方式

app:alignContent="flex_start" //内容的对齐方式 从头对齐还是从尾对齐

app:flexDirection="column" //子控件排列方式，是列或行（可倒序排列）

app:justifyContent="flex_end" //子控件行列时的对齐方式，中间或两端

如此之外，这样写代码也可以：

FlexboxLayout flexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
flexboxLayout.setFlexDirection(FlexboxLayout.FLEX_DIRECTION_COLUMN);

View view = flexboxLayout.getChildAt(0);
FlexboxLayout.LayoutParams lp = (FlexboxLayout.LayoutParams) view.getLayoutParams();
lp.order = -1;
lp.flexGrow = 2;
view.setLayoutParams(lp);