Android RecyclerView的使用

目录

1.学习目标：

2.效果预览：

3.实现过程：

1.页面结构

2.核心代码

1.indexAdapter.java

2.Pokemon_Fragment

3.总结

4.代码仓库

---

---

1.学习目标：

了解RecyclerView的使用方法，学会自己重写Adapter，绑定数据并输出。在类微信界面的基础上实现

2.效果预览：

可以滑动查看图鉴，点击展开能力卡

3.实现过程： 1.页面结构

在需要显示内容的Fragment上，放上一个RecyclerView,结构和效果如下：

 

新建一个item.xml，用作recyclerView每一行的显示模板

 代码如下：

主页布局：

2.核心代码

自己配adapter，实现数据绑定

1.indexAdapter.java

package com.example.myapp;

import android.content.Context;
import android.graphics.Color;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import com.bumptech.glide.Glide;

import java.util.List;
import java.util.Map;

public class IndexAdapter extends RecyclerView.Adapter {
    private List> data;
    private Context context;
    private View inflater;
    //标记被展开的item
    private int opened = -1;
    /*构造函数*/
    public IndexAdapter(Context context, List> data) {
        this.context = context;
        this.data = data;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        //创建viewHolder，绑定每一项的布局为item
        inflater= LayoutInflater.from(context).inflate(R.layout.item,parent,false);
        MyViewHolder holder = new MyViewHolder(inflater);
        return holder;
    }

    //绑定数据和控件
    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {

        bindView(holder,position);
        //通过点击改变状态
        holder.clickBar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(opened == holder.getAdapterPosition()){
                    opened = -1;
                    notifyItemChanged(holder.getAdapterPosition());
                }else{
                    int oldOpened = opened;
                    opened = holder.getAdapterPosition();
                    notifyItemChanged(oldOpened);
                    notifyItemChanged(opened);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        //返回数据总条数
        return data.size();
    }

    //内部类，绑定控件
    public class MyViewHolder extends RecyclerView.ViewHolder {
        ImageView pokemonIMG;
        TextView pokemonID,pokemonName,pokemonAttr;
        LinearLayout clickBar,spreadBar;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
            pokemonIMG = itemView.findViewById(R.id.pokemonIMG);
            pokemonID = itemView.findViewById(R.id.pokemonID);
            pokemonName = itemView.findViewById(R.id.pokemonName);
            pokemonAttr = itemView.findViewById(R.id.pokemonAttr);
            clickBar = itemView.findViewById(R.id.clickBar);
            spreadBar = itemView.findViewById(R.id.spreadBar);
        }
    }

    //自定义方法，用来确定属性文字颜色
    public void setAttrColor(@NonNull MyViewHolder holder,int position){
        String attr = data.get(position).get("key4").toString();
        switch (attr){
            case "草":
                holder.pokemonAttr.setTextColor(Color.parseColor("#4CAF50"));break;
            case "火":
                holder.pokemonAttr.setTextColor(Color.parseColor("#FFF44336"));
        }
    }

    //自定义方法，用于绑定数据
    public void bindView(@NonNull MyViewHolder holder, int position){
        String imageUrl = data.get(position).get("key1").toString();
        Glide.with(context).load(imageUrl).into(holder.pokemonIMG);
        holder.pokemonID.setText("NO."+data.get(position).get("key2").toString());
        holder.pokemonName.setText(data.get(position).get("key3").toString());
        holder.pokemonAttr.setText(data.get(position).get("key4").toString());
        setAttrColor(holder,position);
        if(position == opened){
            holder.spreadBar.setVisibility(View.VISIBLE);
        }else{
            holder.spreadBar.setVisibility(View.GONE);
        }
    }

}

 在这段代码中，除了基本功能以外，还实现了根据属性不同显示不同颜色的字的效果，以及点击切换资料卡状态的效果（实现能力卡的展开和收缩），详情见注释

除此之外，使用了Glide加载网络上的图片，使用步骤

1.在build.grade中加载依赖

implementation 'com.github.bumptech.glide:glide:4.5.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.5.0'

 2.在AndroidManifest.xml中设置允许网络访问

3.在grade.propertites中添加（如果已经有了可以忽略）

android.useAndroidX=true
android.enableJetifier=true

4.使用

String imageUrl = data.get(position).get("key1").toString();
Glide.with(context).load(imageUrl).into(holder.pokemonIMG);

2.Pokemon_Fragment

package com.example.myapp;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.SimpleItemAnimator;

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

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class Pokemon_Fragment extends Fragment {
    //用于设置fragment的layout
    private View view;
    //声明recycleView
    private RecyclerView recycleView;
    //声明适配器
    private IndexAdapter indexAdapter;
    //声明数据
    List> data = new ArrayList();
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        //获取fragment的layout
        view= inflater.inflate(R.layout.fragment_weixin, container, false);
        initData();
        initRecycleView();
        // Inflate the layout for this fragment
        return view;
    }

    public void initData(){
        //初始化数据
        String[] pokemonIMG = {"http://www.kaotop.com/file/tupian/20220518/cf47f9fac4ed3037ff2a8ea83204e32aff8fb5f3.png",
                "http://www.kaotop.com/file/tupian/20220518/3245e4f8c04aa0619cb31884dbf123c6918b3700.png",
                "http://www.kaotop.com/file/tupian/20220518/3245e4f8c04aa0619cb31884dbf123c6918b3700.png",
                "http://www.kaotop.com/file/tupian/20220518/3bfcc4360c44f37815dc1e59f75818935cbfc41b.png",
                "http://www.kaotop.com/file/tupian/20220518/6b55babb3825ef9fa9e5d9ff44a14bdb8406ce97.png",
                "http://www.kaotop.com/file/tupian/20220518/d0ee81f16175c97770192fb691fdda8da1f4f349.png",
                "http://www.kaotop.com/file/tupian/20220518/285395ca77d82861fd30cea64567021a50c1169c.png",
                "http://www.kaotop.com/file/tupian/20220518/2050f1fd1283f473d7d048f8631712e7e003f802.png",
                "http://www.kaotop.com/file/tupian/20220518/ca3db4aad5c85a525d9be86852b26db1db7a22c0.png",
                "http://www.kaotop.com/file/tupian/20220518/0aa78a0061bda9d88cbb0bbf739cd9cc56522fe9.png"};
        String[] pokemonID = {"001","002","003","003","003","004","005","006","006","006"};
        String[] pokemonName = {"妙蛙种子","妙蛙草","妙蛙花","超级妙蛙花","妙蛙花 超级巨化","小火龙","火恐龙","喷火龙","超级喷火龙X","超级喷火龙Y"};
        String[] pokemonAttr ={"草","草","草","草","草","火","火","火","火","火"};
        for(int i=0;i itemData= new HashMap();
            itemData.put("key1",pokemonIMG[i]);
            itemData.put("key2",pokemonID[i]);
            itemData.put("key3",pokemonName[i]);
            itemData.put("key4",pokemonAttr[i]);
            data.add(itemData);
        }
    }
    public void initRecycleView(){
        //获取RecycleView
        recycleView = view.findViewById(R.id.recycleView_index);
        //创建adapter,getActivity获得Fragment依附的Activity对象
        indexAdapter = new IndexAdapter(getActivity(),data);
        //给recycleView设置Adapter
        recycleView.setAdapter(indexAdapter);
        //设置布局
        LinearLayoutManager manager = new LinearLayoutManager(getActivity());
        manager.setOrientation(RecyclerView.VERTICAL);
        recycleView.setLayoutManager(manager);
        //设置动画效果，关闭切换动画
        ((SimpleItemAnimator)recycleView.getItemAnimator()).setSupportsChangeAnimations(false);
        recycleView.getItemAnimator().setChangeDuration(300);
        recycleView.getItemAnimator().setMoveDuration(300);

    }

}

3.总结

在实验中发现了以下问题：

1.item的布局，使用了大量的LinerLayout和TextView的结合，在实现过程中，加深了对布局的理解

2.Glide依赖的导入，刚开始导错了地方，一直失败

3.要注意对象的创建和上下文到底是谁

4.开发过程总结起来就是获取对象，为对象设置属性，为对象绑定数据和方法。获取对象一般通过findViewByID()

5.理解position参数就是当前item的编号

 public void onBindViewHolder(@NonNull MyViewHolder holder, int position)

在后面绑定数据时，也是通过position的状态来决定能力卡的展开与否，代码：

if(position == opened){
    holder.spreadBar.setVisibility(View.VISIBLE);
}else{
    holder.spreadBar.setVisibility(View.GONE);
}

4.代码仓库

杨少杰/MyAPP