Android FlowLayout详解

一、概述

Android FlowLayout是一个Android库，可以帮助我们实现像HTML中的流式布局那样的界面。其主要作用是为我们提供了一个动态的容器，可以根据内部控件的尺寸和数量自动进行布局。FlowLayour在实现各种独特的布局需求时非常有用，尤其是在需要添加可变长度控件时。

二、使用方法

首先需要在app的gradle中加上依赖：

<dependency>
    <groupId>com.nex3z</groupId>
    <artifactId>flow-layout</artifactId>
    <version>1.2.3</version>
</dependency>

然后像普通的LinearLayout代码一样在XML中使用：

<com.nex3z.flowlayout.FlowLayout
    android:id="@+id/flow_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"/>

把你要添加的控件放进FlowLayou的容器中。根据需要添加一个回调接口实现，以在容器更新时获取布局参数。

三、适用场景

FlowLayout的使用场景非常广泛，例如：

1. 标签的显示

在许多应用程序中，标签用来快速定位选项。可以使用FlowLayout的强大特性创建这种效果，而不必手动实现。例如：

String[] tags = {"标签1", "标签2", "标签3", "标签4", "标签5", "标签6"};
FlowLayout flowLayout = findViewById(R.id.flow_layout);
for (int i = 0; i < tags.length; i++) {
    TextView tv = new TextView(mContext);
    tv.setText(tags[i]);
    tv.setPadding(8, 4, 8, 4);
    tv.setBackgroundResource(R.drawable.label_normal_bg);
    flowLayout.addView(tv);
}

FlowLayout的主要优势就在于这里，标签可以动态增长，而不必在XML中定义宽度。

2. 动态边距

FlowLayout的子项之间的边距可以很容易地调整。通过修改组件属性可以为每个子项设置不同的边距，从而使布局更加丰富多样。

FlowLayout flowLayout = new FlowLayout(mContext);
for (int i = 0; i < 20; i++) {
    TextView tv = new TextView(mContext);
    tv.setText("Item  " + (i+1));
    tv.setPadding(20*i, 20*i, 20*i, 20*i);               //设置边距
    tv.setBackgroundResource (R.drawable.bg_button);    
    flowLayout.addView(tv);
}

3. 图片墙

FlowLayout非常适合用作图片集 （图像墙）的容器，因为它可以动态地将图片呈现为一组方块。

下面是代码示例：

final List<String> data = DataUtils.getImageUrls();
FlowLayout flowLayout = findViewById(R.id.flow_layout);
for (int i = 0; i < data.size(); i++) {
    SimpleDraweeView draweeView = new SimpleDraweeView(mContext);
    draweeView.setTag(i);
    Glide.with(mContext)
        .load(data.get(i))
        .centerCrop()
        .into(draweeView);
    ViewGroup.MarginLayoutParams lp = new ViewGroup.MarginLayoutParams(
            ViewGroup.MarginLayoutParams.WRAP_CONTENT,
            ViewGroup.MarginLayoutParams.WRAP_CONTENT);
    lp.rightMargin = SpUtils.dip2px(mContext, 10);
    lp.bottomMargin = SpUtils.dip2px(mContext, 10);
    flowLayout.addView(draweeView, lp);
}

4. 水平分页

FlowLayout可以非常方便地实现水平分页。只需要将最大列数设置为屏幕宽度，添加的子项数量与分页数相同即可。

示例代码如下：

int itemTotal = images.length;
int COLUMN_LIMIT = CommonUtils.getWidthPixels(mContext);
int itemCountPerPage = COLUMN_LIMIT / SpUtils.dip2px(mContext, ITEM_WIDTH_DPI);
int pageCount = (int) Math.ceil((float) itemTotal / (float) itemCountPerPage);
int index = 0;
LayoutInflater inflater = LayoutInflater.from(mContext);

for (int pageIndex = 0; pageIndex < pageCount; pageIndex++) {
    final FlowLayout subFlow = new FlowLayout(mContext);
    subFlow.setPadding(padding, padding, padding, padding);
    subFlow.setMinimumWidth(COLUMN_LIMIT);
    subFlow.setId(pageIndex);
    subFlow.setTag(pageIndex + "_" + pageCount);
    subFlow.setColumnLimit(COLUMN_LIMIT);

    if (pageIndex == pageCount - 1) {
        itemCountPerPage = itemTotal - pageIndex * itemCountPerPage;
    }
    for (int i = 0; i < itemCountPerPage; i++) {
        final View item = inflater.inflate(R.layout.layout_item, subFlow, false);
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) item.getLayoutParams();
        layoutParams.width = COLUMN_LIMIT / SpUtils.dip2px(mContext, ITEM_WIDTH_DPI);
        layoutParams.height = COLUMN_LIMIT / SpUtils.dip2px(mContext, ITEM_WIDTH_DPI) + 40;
        item.setLayoutParams(layoutParams);
        ImageView iv = item.findViewById(R.id.item_img);
        Glide.with(mContext)
                .load(images[index++)]
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .placeholder(R.drawable.title_logo)
                .into(iv);

        subFlow.addView(item);

        final int pos = index - 1;
        item.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "Clicked: " + pos, Toast.LENGTH_SHORT).show();
            }
        });
    }
    pagerAdapter.addView(subFlow);
}

四、结语

总之，Android FlowLayout是一个非常不错的库，能够帮助我们在应用程序开发中快速定位控件，达到更好的用户体验效果。结合上文的应用场景示例，相信读者已经对其使用方法有了充分的了解。