更多Android高级架构进阶视频学习请点击：https://space.bilibili.com/474380680
本篇文章自定义流式布局来进行介绍：

一般常见的流式布局由两种，一种是横向的个数固定，列表按照竖向进行排列。另一种是横向先排，横向排满之后再竖向排列。而本框架实现是以第二种方式进行处理。

那么这个框架到底该如何使用呢？

一、引入资源

这里提供两种方式，引入资源文件。

1、在build.gradle文件中添加以下代码：

allprojects {

    repositories {

        maven { url 'https://jitpack.io' }

    }

}

dependencies {

    compile 'com.github.zrunker:ZFlowLayout:v1.0'

}

2、在maven文件中添加以下代码：

<repositories>

    <repository>

        <id>jitpack.io</id>

        <url>https://jitpack.io</url>

    </repository>

</repositories>

<dependency>

    <groupId>com.github.zrunker</groupId>

    <artifactId>ZFlowLayout</artifactId>

    <version>v1.0</version>

</dependency>

二、使用

使用该框架，只需要两步即可。

1、引入布局文件

<cc.ibooker.zflowlayoutlib.FlowLayout

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

    android:id="@+id/flowlayou"

    android:layout_width="match_parent"

    android:layout_height="match_parent" />

2、动态添加子控件

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        FlowLayout flowLayout = findViewById(R.id.flowlayou);

        LayoutInflater inflater = LayoutInflater.from(this);

        for (int i = 0; i < 20; i++) {

            TextView textView = (TextView) inflater.inflate(R.layout.tag_textview, flowLayout, false);

            if (i == 3)

                textView.setText("Android1111" + i);

            else if (i == 6)

                textView.setText("Jave1111" + i);

            else if (i == 10)

                textView.setText("kotlin1111" + i);

            else

                textView.setText("测试" + i);

            flowLayout.addView(textView);

        }

    }

}

其中tag_textview为自定义子控件的布局文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_margin="5dp"

    android:background="@drawable/gridview_selector"

    android:padding="5dp" />

当然也可以把FlowLayout直接当做一个ViewGroup在布局文件中直接加入子控件，就不需要动态的添加子控件，如下：

<cc.ibooker.zflowlayoutlib.FlowLayout

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="王五李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="赵六王五李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="孙七赵六王五李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="周八孙七赵六王五李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="吴九周八孙七赵六王五李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="郑十吴九周八孙七赵六王五李四张三" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="Tom" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="zrunker" />

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_margin="5dp"

        android:background="@drawable/gridview_selector"

        android:padding="5dp"

        android:text="Android" />

</cc.ibooker.zflowlayoutlib.FlowLayout>

最后看看效果图：

流式布局效果图

更多Android高级架构进阶视频学习请点击：https://space.bilibili.com/474380680
原文链接https://www.jianshu.com/p/ae8ffdab753d

巴特西

高级UI晋升之自定义View实战（八）

一、引入资源

二、使用

最新文章

热门文章