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是一個非常不錯的庫，能夠幫助我們在應用程序開發中快速定位控制項，達到更好的用戶體驗效果。結合上文的應用場景示例，相信讀者已經對其使用方法有了充分的了解。