Android瀑布流详解

一、Android瀑布流布局

瀑布流布局，也称为瀑布流式布局，是一种网页设计布局。该布局会自动适应浏览器窗口大小，并将内容按照特定的方式进行展示，使得页面更美观优雅。在Android中，我们也可以使用瀑布流布局来实现相册、商品展示等场景。

Android中最常用的瀑布流布局是StaggeredGridView，它提供了多列瀑布流展示功能，让图片或者其他控件更加美观，流畅。使用它可以很方便地实现瀑布流布局。

compile 'com.etsy.android.grid:library:1.0.5'

然后在布局文件中使用StaggeredGridView即可：

二、Android瀑布流实现2列图片展示

在实际开发中，我们经常需要将一些图片展示在瀑布流布局中，以下是如何展示两列图片：

StaggeredGridView gridView = (StaggeredGridView) findViewById(R.id.grid_view);
gridView.setAdapter(new StaggeredAdapter(this, imageData));  // 设置适配器
gridView.setColumnCount(2);  // 设置为两列

其中StaggeredAdapter是自定义适配器，可以根据需求自行实现。

三、Android瀑布流顶部空白移动

在瀑布流布局中，默认情况下每个item都是按照顺序排列的，没有任何间隔。而在实际开发中，我们通常需要给每个item留出一定的间隔，或者让第一行的item顶部留出空白。对于这个问题，可以使用StaggeredGridView的一些属性来解决。

app:item_margin="2dp"
app:first_vertical_spacing="2dp"

其中，item_margin是设置item之间的间距，first_vertical_spacing是设置第一行item顶部空出的距离。

四、Android瀑布流实现

实现瀑布流布局可以使用StaggeredGridView，但如果自定义实现呢？这里提供一种自定义实现方式：

public class WaterfallLayout extends ViewGroup {

    private int mColumns = 2;  // 列数
    private int mItemGap = 10;  // item间距
    private int mTopBlank = 10;  // 顶部空白高度
    private List
    mColumnsHeight = new ArrayList<>();  // 每列的高度
    private List
     mItemList = new ArrayList<>();  // item控件list

    public WaterfallLayout(Context context) {
        super(context);
        init();
    }

    private void init() {
        mColumnsHeight.clear();
        for (int i = 0; i < mColumns; i++) {
            mColumnsHeight.add(mTopBlank);
        }
    }

    ...

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < mColumns; i++) {
            // 遍历每一列上的item子控件，设置控件位置
            for (int j = 0; j < getChildCount(); j++) {
                View child = getChildAt(j);
                if (child.getVisibility() == View.GONE) {
                    continue;
                }
                LayoutParams layoutParams = child.getLayoutParams();
                int cHeight = child.getMeasuredHeight();
                if ((layoutParams instanceof MarginLayoutParams)) {
                    MarginLayoutParams params1 = (MarginLayoutParams) layoutParams;
                    cHeight += params1.topMargin + params1.bottomMargin;
                }
                if (mItemList.contains(child)) {
                    continue;
                }
                int column = getMinHeightColumn();
                int lC = getPaddingLeft() + column * (getMeasuredWidth() / mColumns) + column * mItemGap;
                int rC = lC + getMeasuredWidth() / mColumns;
                int tC = mColumnsHeight.get(column);
                int bC = tC + cHeight;
                child.layout(lC, tC, rC, bC);  // 设置位置
                mColumnsHeight.set(column, bC + mItemGap);
                mItemList.add(child);
            }
        }
    }
}

    
   

五、Android瀑布流间分割线

在瀑布流布局中，我们通常需要给每个item之间加上间隔线。可以在item布局文件中添加一个View来实现：

其中，View的高度和背景色可以根据需求自行调整。

六、Android瀑布流multitype

multitype是一种瀑布流扩展库，支持多条目类型、动态添加删除等功能。使用multitype，可以方便地实现多种类型的瀑布流布局。

repositories {
    maven { url "https://jitpack.io" }
}
dependencies {
    implementation 'com.github.Skykai521:MutiType:v1.0.1'
}

使用方法与RecyclerView类似，我们需要定义不同类型的Holder

@MutiTypeItemType(1)
public class TextItem implements Item {

    public String text;

    public TextItem(String text) {
        this.text = text;
    }

    @Override
    public int itemType() {
        return 1;
    }

    @Override
    public int itemId() {
        return text.hashCode();
    }

    @Override
    public boolean isItemSameAs(Item newItem) {
        return newItem instanceof TextItem && ((TextItem) newItem).text.equals(text);
    }

    @Override
    public boolean isContentSameAs(Item newItem) {
        return newItem instanceof TextItem && ((TextItem) newItem).text.equals(text);
    }
}

然后在Adapter中调用Bind和onCreate方法即可：

public class MyAdapter implements BindDelegate {

    public List
    items;

    public MyAdapter(List
     items) {
        this.items = items;
    }

    @Override
    public void onBindViewHolder(BindViewHolder holder, int position, List payloads) {
        Item item = items.get(position);
        if (holder.getItemViewType() == 1) {
            TextItem textItem = (TextItem) item;
            TextView textView = holder.itemView.findViewById(R.id.text_view);
            textView.setText(textItem.text);
        }
    }

    @Override
    public BindViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View root;
        if (viewType == 1) {
            root = LayoutInflater.from(parent.getContext()).inflate(R.layout.text_item, parent, false);
        } else {
            root = LayoutInflater.from(parent.getContext()).inflate(R.layout.image_item, parent, false);
        }
        return new BindViewHolder(root);
    }

    @Override
    public int getItemCount() {
        return items == null ? 0 : items.size();
    }

    @Override
    public int getItemViewType(int position) {
        return items.get(position).itemType();
    }
}

    
   

七、Android瀑布流搭配paging3

在实际开发中，我们通常需要使用分页展示数据。而paging3是Google推出的分页加载的库，可以让我们更方便地实现数据分页。下面是一个利用paging3实现分页数据加载的例子：

private fun initRecyclerView() {
    val staggeredAdapter = StaggeredAdapter(viewModel)
    recyclerView.apply {
        setHasFixedSize(true)
        layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL)
        adapter = staggeredAdapter.withLoadStateHeaderAndFooter(
        header = PagingLoadStateAdapter(staggeredAdapter),
        footer = PagingLoadStateAdapter(staggeredAdapter)
        )
    }
    viewModel.pagerFlow.collectLatest { pagingData ->
        staggeredAdapter.submitData(pagingData)
    }
}

其中，StaggeredAdapter继承自PagingDataAdapter，可以根据具体需求进行实现。

八、Android瀑布流布局滑动错位

在使用瀑布流布局的时候，有时候会出现滑动错位的现象。这个问题通常是由于item的高度不一致导致的。正确的做法是在父布局里面重写onMeasure方法，自动确定item的高度：

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int columnWidth = getMeasuredWidth() / mColumns;
    int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
    for (int i = 0; i < getChildCount(); i++) {
        View child = getChildAt(i);
        if (child.getVisibility() == View.GONE) {
            continue;
        }
        // 重新计算item高度
        LayoutParams layoutParams = child.getLayoutParams();
        int cWidth = columnWidth - layoutParams.leftMargin - layoutParams.rightMargin;
        child.measure(MeasureSpec.makeMeasureSpec(cWidth, MeasureSpec.EXACTLY), childHeightMeasureSpec);
    }
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

九、Android瀑布流设置条目横向间距

瀑布流布局默认的间距可能不符合我们的需求，我们可以使用StaggeredGridView的setHorizontalSpacing方法来调整横向间距：

StaggeredGridView gridView = (StaggeredGridView) findViewById(R.id.grid_view);
gridView.setAdapter(new StaggeredAdapter(this, imageData));
gridView.setColumnCount(2);
gridView.setHorizontalSpacing(20);  // 设置横向间距

结束语

Android瀑布流布局是一种非常实用的布局方式，可以使得页面更加美观、流畅。通过本文的介绍，希望读者能够更好地理解和应用瀑布流布局，并在实际开发中能够运用自如。