利用RecyclerView在Fragment中实现瀑布流

Edana ·

更新时间:2024-09-20

· 917 次阅读

目录前言项目源码准备工作Layout文件的构建JAVA程序的编写新建Peaky类Adapter适配器修改WechatFragment项目心得前言

上周通过Android开发中的fragment实现了简易微信界面
的搭建，本周将在其基础上在fragment中进行RecyclerView的布局，并将RecyclerView设置为瀑布流的形式进行照片展示。效果如下图：
瀑布流展示

项目源码

已发布至gitee

准备工作

在build.gradle中添加implementation 'com.android.support:recyclerview-v7:27.1.1'的依赖项，但新版本的Android Stuio强制新项目使用Androidx来对android.support.xxx进行整理，并停止了对android.support的更新。所以如果是使用了androidx的项目，则在build.gradle的dependencies中加入implementation 'androidx.recyclerview:recyclerview:1.1.0'或者在Project Structure中的Dependencies中点击右侧➕，搜索recyclerview，添加上述依赖即可。添加完依赖，下面就开始coding吧！

Layout文件的构建

由于之前已经搭建好了简易的微信界面，所以我直接对其中的一个fragment的layout进行更改，加入recyclerview的视图模视。

//tab01.xml

//item.xml

有以上两个layout文件后，基本的recyclerview的xml文件就已经完成，下面进行后台的coding即可。

JAVA程序的编写 新建Peaky类

在RecyclerView中我展示的是英剧PeakyBlinders相关剧照，因此我新建Peaky类，其中我添加了name和imageid的属性，可根据展示需求添加更多属性。

package com.example.mywechat;
public class Peaky {
    private String name;
    private int imageid;
    public Peaky(String name , int imageid)
    {
        this.name = name;
        this.imageid = imageid;
    }
    public String getName()
    {
        return name;
    }
    public int getImageid()
    {
        return imageid;
    }
}

Adapter适配器

为recyclerview增加一个适配器，我直接将其命名为adapter，它需要继承RecyclerView.Adapter，并要使用viewholder

package com.example.mywechat;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class Adapter extends RecyclerView.Adapter {
    private List list;
    private View inflater;
    public Adapter(List peakyList) {
        list = peakyList;
    }
    @Override
    public Adapter.myviewholder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
        inflater = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.item,viewGroup,false);
        myviewholder myviewholder = new myviewholder(inflater);
        return myviewholder;
    }
    @Override
    public void onBindViewHolder(@NonNull Adapter.myviewholder holder, int position) {
        Peaky peaky = list.get(position);
        holder.peakyImage.setImageResource(peaky.getImageid());
    }
    @Override
    public int getItemCount() {
        return list.size();
    }
    class myviewholder extends RecyclerView.ViewHolder{
        View peakyView;
        ImageView peakyImage;
        public myviewholder(@NonNull View itemView) {
            super(itemView);
            peakyView = itemView;
            peakyImage = itemView.findViewById(R.id.imageView);
        }
    }
}

修改WechatFragment

基于上个简易微信界面的项目，我对WechatFragment直接进行修改，我使用StaggeredGridLayoutManager来进行瀑布流形式的布局。

package com.example.mywechat;
import android.os.Bundle;
import android.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import java.util.ArrayList;
import java.util.List;
/**
 * A simple {@link Fragment} subclass.
 */
public class WechatFragment extends Fragment {
    private List peakyList = new ArrayList();
    public WechatFragment() {
        // Required empty public constructor
    }
    @Override
    public View onCreateView (LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.tab01,container,false);
        RecyclerView recyclerView;
        initPeakys();
//        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView = view.findViewById(R.id.recycler_view);
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
        Adapter adapter = new Adapter(peakyList);
        recyclerView.setAdapter(adapter);
        return view;
    }
    private void initPeakys() {
        for (int i = 0; i < 10; i++) {
            Peaky a = new Peaky("a", R.drawable.a);
            peakyList.add(a);
            Peaky b = new Peaky("b", R.drawable.b);
            peakyList.add(b);
            Peaky c = new Peaky("c", R.drawable.c);
            peakyList.add(c);
            Peaky d = new Peaky("d", R.drawable.d);
            peakyList.add(d);
            Peaky e = new Peaky("d", R.drawable.e);
            peakyList.add(e);
            Peaky f = new Peaky("f", R.drawable.f);
            peakyList.add(f);
            Peaky g = new Peaky("g", R.drawable.g);
            peakyList.add(g);
            Peaky h = new Peaky("h", R.drawable.h);
            peakyList.add(h);
            Peaky i = new Peaky("i", R.drawable.i);
            peakyList.add(i);
        }
    }
}

其中StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);中的3是指每一行所显示的item数量。

项目心得

RecyclerView的使用教程网络上可以搜到很多，但始终需要自己去一点点的coding才能较清楚理解每个类、每个函数的作用。andriodx的存在，使很多情况下会出现一些不兼容的情况，也会出现一些代码写法的改变，不能够直接CV网络上的源码，而要根据自己的环境耐心进行debug。
关于瀑布流：网络上很多文章都对瀑布流进行了详细的说明，大多要解决图片高度自适应的问题。但是我在编写项目的时候并没有发现需要通过LayoutManager来改变imageview的大小，而是直接通过将宽高属性设置为wrap_content来直接处理图片的大小，效果非常好。我猜测应该是Andriod不断更新改进为瀑布流带来的更方便的使用吧。

作者：Samue1Zhu

recyclerview 瀑布瀑布流 fragment

1024 个赞