一、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瀑布流布局是一种非常实用的布局方式，可以使得页面更加美观、流畅。通过本文的介绍，希望读者能够更好地理解和应用瀑布流布局，并在实际开发中能够运用自如。
原创文章，作者：OJHHM，如若转载，请注明出处：https://www.506064.com/n/360902.html
微信扫一扫 
支付宝扫一扫 