RecyclerView使用示例(瀑布流)-阿里云开发者社区

RecyclerView使用示例(瀑布流)

2024-04-02 21

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： RecyclerView使用示例(瀑布流)

效果图

代码示例

ShopFragment.java（显示RecyclerView的Fragment）

pacpackage com.gjc.ihelp.fragment;

import android.app.Fragment;
import android.os.Bundle;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

import com.gjc.ihelp.R;
import com.gjc.ihelp.adapter.GoodsAdapter;
import com.gjc.ihelp.data.GoodsData;

import java.util.ArrayList;
import java.util.List;

public class ShopFragment extends Fragment {

    private View view;
    private TextView tvTitle;
    private RecyclerView rvList;

    //页面数据
    private List<GoodsData> goodsDataList;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_shop, container, false);
        initData();
        initView();
        return view;
    }

    private void initData() {
        goodsDataList = new ArrayList<>();

        // 初始化用户数据
        for (int i = 0; i < 100; i++) {
            GoodsData goodsData = new GoodsData();
            if (Math.random() * 100 < 10) {
                goodsData.goodsImg = R.drawable.goods;
            } else if (Math.random() * 100 >= 10 && Math.random() * 100 < 20) {
                goodsData.goodsImg = R.drawable.goods_1;
            } else if (Math.random() * 100 >= 20 && Math.random() * 100 < 30) {
                goodsData.goodsImg = R.drawable.goods_2;
            } else if (Math.random() * 100 >= 30 && Math.random() * 100 < 40) {
                goodsData.goodsImg = R.drawable.goods_3;
            } else if (Math.random() * 100 >= 40 && Math.random() * 100 < 50) {
                goodsData.goodsImg = R.drawable.goods_4;
            } else if (Math.random() * 100 >= 50 && Math.random() * 100 < 60) {
                goodsData.goodsImg = R.drawable.goods_5;
            } else if (Math.random() * 100 >= 60 && Math.random() * 100 < 70) {
                goodsData.goodsImg = R.drawable.goods_6;
            } else if (Math.random() * 100 >= 70 && Math.random() * 100 < 80) {
                goodsData.goodsImg = R.drawable.goods_7;
            } else if (Math.random() * 100 >= 80 && Math.random() * 100 < 90) {
                goodsData.goodsImg = R.drawable.goods_8;
            } else {
                goodsData.goodsImg = R.drawable.goods_9;
            }
            goodsData.integral = (int) (Math.random() * 100 + 100);
            goodsDataList.add(goodsData);
        }

    }

    private void initView() {
        tvTitle = view.findViewById(R.id.tv_title);
        rvList = view.findViewById(R.id.rv_list);

        tvTitle.setText("商品列表");
        /**
         * StaggeredGridLayoutManager 方法参数
         *    setSpanCount：设置网格的列数
         *    setOrientation：设置瀑布流布局的方向，取值说明同LinearLayoutManager
         *    setReverseLayout：设置是否为相反方向开始布局，默认false。如果设置为true，那么垂直方向将从下往上开始布局，水平方向将从右往左开始布局
         */
        // 2:设置网格列数 StaggeredGridLayoutManager.VERTICAL:设置瀑布流布局的方向
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        GoodsAdapter myAdapter = new GoodsAdapter(getActivity(), goodsDataList);
        //添加 adapter
        rvList.setAdapter(myAdapter);
        //添加 manager
        rvList.setLayoutManager(manager);

    }

}

fragment_shop.xml（相对应的xml文件）

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

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:text="@string/user_list"
        android:textSize="30sp"
        android:textStyle="bold"
        android:gravity="center"
        android:textColor="#ffffff"/>
    
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_list"
        android:background="#f0f0f0"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

GoodsData.java（数据源）

package com.gjc.ihelp.data;

public class GoodsData {

    public int goodsImg;//商品图片
    public int integral;//所需积分

    public GoodsData() {
    }

}

GoodsAdapter.java（适配器类）

package com.sjm.ihelp.adapter;

import android.app.Activity;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.sjm.ihelp.R;
import com.sjm.ihelp.Utils.ToastUtil;
import com.sjm.ihelp.data.GoodsData;

import java.util.List;

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

    private Context context;

    private List<GoodsData> goodsDataList;
    private ImageView ivGoodsImg;
    private TextView tvNeedIntegral;
    private Button btExchange;

    public GoodsAdapter(Context context, List<GoodsData> goodsDataList) {
        this.context = context;
        this.goodsDataList = goodsDataList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = View.inflate(context, R.layout.adapter_goods, null);
        return new MyViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
        ivGoodsImg.setBackgroundResource(goodsDataList.get(position).goodsImg);
        tvNeedIntegral.setText(goodsDataList.get(position).integral + "");
        btExchange.setOnClickListener(v -> {
            ToastUtil.show((Activity) context, "兑换成功");
        });
    }

    @Override
    public int getItemCount() {
        return 50;
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            //获取文本节点
            ivGoodsImg = itemView.findViewById(R.id.iv_goods_img);
            btExchange = itemView.findViewById(R.id.bt_exchange);
            tvNeedIntegral = itemView.findViewById(R.id.tv_need_integral);
        }
    }

}

adapter_goods.xml（item）

<?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:paddingTop="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv_goods_img"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/goods_2"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:orientation="horizontal">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="所需积分："
                android:textSize="18sp"
                android:textColor="#000000"/>
            <TextView
                android:id="@+id/tv_need_integral"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="999"
                android:textSize="18sp"
                android:textColor="#ff0000"/>
        </LinearLayout>

        <Button
            android:id="@+id/bt_exchange"
            android:layout_width="70dp"
            android:layout_height="30dp"
            android:text="@string/exchange"
            android:layout_marginRight="10dp"
            android:layout_gravity="right|center"
            android:background="@drawable/button_style_orange"/>
    </FrameLayout>

</LinearLayout>
<?xml