用RecyclerView实现瀑布流

首先建立一个 PbRecyclerViewActivity.java文件：

 1 public class PbRecyclerViewActivity extends AppCompatActivity {
 2     private RecyclerView RVpb;
 3     @Override
 4     protected void onCreate(Bundle savedInstanceState) {
 5         super.onCreate(savedInstanceState);
 6         setContentView(R.layout.activity_pb_recycler_view);
 7         RVpb=findViewById(R.id.rv_pb);
 8         RVpb.addItemDecoration(new MyDecoration());//设置边框记得一定要加这个
 9         RVpb.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
10         //是VERTICAL的话，数字代表列；如果是horizontal,数字代表行
11         //StaggeredGridLayoutManager是参差不齐的渲染，即瀑布流
12         RVpb.setAdapter(new StaggeredGridAdapter(PbRecyclerViewActivity.this, new StaggeredGridAdapter.OnItemClickListener() {
13             @Override
14             public void onClick(int pos) {
15                 Toast.makeText(PbRecyclerViewActivity.this, "pick"+pos, Toast.LENGTH_SHORT).show();
16             }
17         }));//点击事件
18     }
19     class MyDecoration extends RecyclerView.ItemDecoration{
20         @Override
21         public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
22             super.getItemOffsets(outRect, view, parent, state);
23             int gap=getResources().getDimensionPixelOffset(R.dimen.deviderHeight2);
24             outRect.set(gap,gap,gap,gap);//设置边框
25         }
26     }
27 }

对应的activity_pb_recycler_view.xml文件：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="match_parent">
 4
 5     <androidx.recyclerview.widget.RecyclerView
 6         android:id="@+id/rv_pb"
 7         android:layout_width="match_parent"
 8         android:layout_height="wrap_content"
 9         android:background="@color/purple_200"/>
10 </LinearLayout>

然后建立适配器StaggeredGridAdapter.java文件：

 1 public class StaggeredGridAdapter extends RecyclerView.Adapter<StaggeredGridAdapter.LinearViewHolder>{
 2     private Context mcontext;
 3     private OnItemClickListener mlistener;
 4     public StaggeredGridAdapter(Context context, OnItemClickListener listener){
 5         this.mcontext=context;
 6         this.mlistener=listener;
 7     }
 8     @NonNull
 9     @Override
10     public StaggeredGridAdapter.LinearViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
11         return new LinearViewHolder(LayoutInflater.from(mcontext).inflate(R.layout.layout_staggered_grid_recyclerview_item,parent,false));
12     }//这里原来是RecyclerView.ViewHolder，建立完LinearViewHolder class后要把它改成LinearAdapter.LinearViewHolder就可以了
13
14     @Override
15     public void onBindViewHolder(@NonNull StaggeredGridAdapter.LinearViewHolder holder, int position) {
16         if(position%2!=0){
17             holder.imageView.setImageResource(R.drawable.image1);
18         }else {
19             holder.imageView.setImageResource(R.drawable.image2);
20         }
21
22         holder.itemView.setOnClickListener(new View.OnClickListener() {
23             @Override
24             public void onClick(View view) {
25                 //Toast.makeText(mcontext, "click...", Toast.LENGTH_SHORT).show();//第一种方法
26                 mlistener.onClick(position);//第二种方法，
27             }
28         });//增加点击事件，这是第一种方法
29     }//这里原来是RecyclerView.ViewHolder，建立完LinearViewHolder class后要把它改成LinearAdapter.LinearViewHolder就可以了
30
31     @Override
32     public int getItemCount() {
33         return 21;
34     }//设置有多少个
35
36     class LinearViewHolder extends RecyclerView.ViewHolder {
37         private ImageView imageView;
38         public LinearViewHolder(@NonNull View itemView) {
39             super(itemView);
40             imageView=itemView.findViewById(R.id.iv);
41         }
42     }
43     public interface OnItemClickListener{
44         void onClick(int pos);
45     }//点击事件的第二种方法，建立接口
46 }

对应的layout_staggered_grid_recyclerview_item.xml文件：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="wrap_content"
 3     android:layout_height="wrap_content"
 4     android:orientation="vertical"
 5     android:background="@color/white">
 6
 7     <ImageView
 8         android:id="@+id/iv"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:scaleType="centerCrop"/>
12 </LinearLayout>

最终效果图：