java流式布局换行_FlowLayout流式布局实战

背景

流式布局在移动端或者前端开发中很常见，特别是在多标签的展示中， 往往起到了关键的作用。然而Android 官方， 并没有为开发者提供这样一个布局,可参考github有名的仓库:https://github.com/google/flexbox-layout

上效果图

image.png

实现逻辑

往FlowLayout里面放子View,FlowLayout会横向对齐布局子View同时自动换行,当子View超出FlowLayout最大高度时支持滑动查看

布局文件

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="8dp"

android:text="搜索历史"

android:textColor="@android:color/black"

android:textSize="18sp"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:paddingLeft="10dp"

android:layout_margin="8dp">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="水果味孕妇奶粉" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="儿童洗衣机" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="洗衣机全自动" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="小度" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="儿童汽车可坐人" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="抽真空收纳袋" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="儿童滑板车" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="稳压器 电容" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/shape_button_circular"

android:text="羊奶粉" />

android:layout_width="wrap_content"

android:lay