利用RecyclerView在Fragment中实现瀑布流

前言

上周通过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
<?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="match_parent"
android:orientation="vertical">


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

//item.xml
<?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="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        tools:srcCompat="@tools:sample/avatars" />


</LinearLayout>

有以上两个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<Adapter.myviewholder> {
    private List<Peaky> list;
    private View inflater;

    public Adapter(List<Peaky> 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<Peaky> 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不断更新改进为瀑布流带来的更方便的使用吧。