RecyclerView实现简单的瀑布流

51 阅读 0 评论 34 点赞

我是靠谱客的博主还单身小白菜，最近开发中收集的这篇文章主要介绍RecyclerView实现简单的瀑布流，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

RecyclerView实现简单的瀑布流

注意： 我这里只是实现一个简单的瀑布流效果，你可以在我的程序上加一些复杂的操作。

先看一下效果图：

在这里插入图片描述

如图所示，我这里只用了两张图片，并且苹果图片的宽250高250，草莓图片宽250高222，因为我在程序中没什么限制，所以如果你要用我的程序，实现上图所示的效果，请自己改一下图片的宽和高。

因为比较简单，我直接上代码了，注释都写上了，请看代码：

StaggeredActivity中的代码：

import android.graphics.Rect;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.View;

import com.example.lenovo.review.R;


public class StaggeredActivity extends AppCompatActivity {
    private RecyclerView mStaggered;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_staggered);
        // 实例化对象
        mStaggered = findViewById(R.id.recycler_stag);
        // 定义一个瀑布流的布局管理器
        RecyclerView.LayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        // 设置布局管理器为瀑布流
        mStaggered.setLayoutManager(layoutManager);
        // 设置适配器
        mStaggered.setAdapter(new StagAdapter());
        // 添加分隔线
        mStaggered.addItemDecoration(new MyDecoration());

    }

    //设置分隔线
    class MyDecoration extends RecyclerView.ItemDecoration {
        @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            outRect.set(5, 5, 5, 5);
        }
    }
}

StaggeredActivity的布局文件中的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#B3B3B3"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_stag"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v7.widget.RecyclerView>

</LinearLayout>

StagAdapter中的代码：

import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.example.lenovo.review.R;


public class StagAdapter extends RecyclerView.Adapter<StagAdapter.MyViewHolder> {


    class MyViewHolder extends RecyclerView.ViewHolder {
        private ImageView img;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            img = itemView.findViewById(R.id.stag_img);
        }
    }

    @NonNull
    @Override
    public StagAdapter.MyViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.layout_stag_item, viewGroup, false);
        MyViewHolder holder = new MyViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(@NonNull StagAdapter.MyViewHolder holder, int i) {
        // 根据item的位置来显示不同的图片，这里设置是偶数位置显示苹果图片，奇数位置显示草莓图片
        if (i % 2 == 0) {
            // 这里是设置ImageView的图片源，我这里是drawable目录下的一个图片
            holder.img.setImageResource(R.drawable.apple_250x250);
        } else {
            // 这也是设置图片
            holder.img.setImageResource(R.drawable.blueberry_250_222);
        }

    }

    // 显示的item的数量，这里我设置是显示50个item
    @Override
    public int getItemCount() {
        return 50;
    }
}

layout_stag_item.xml中的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/stag_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        />

</LinearLayout>