Android中RecyclerView嵌套RecyclerView

Vaccae

发布于 2019-07-25 11:25:47

7.4K0

发布于 2019-07-25 11:25:47

前言

这两天在做一个新的APP，在考虑用户体验上要一个两级的列表嵌套，于就想看看RecyclerView是否能做出这样的效果，自己写了一个DEMO来做一下测试，最后的效果还是比较满意的。下面我就说一下RecyclerView嵌套RecyclerView的实现。

视频效果

https://v.qq.com/x/page/g1359605wnb.html

代码演示

定义基础类

由于我们要做RecyclerView的嵌套，所以也要使用List套List的方法。我们先来创建我们的对象。

Citem类

public class Citem {
    public Citem() {
        Code = "";
        Name = "";
    }
    public String Code;
    public String Name;
}

CListdemo类

public class CListdemo {
    public CListdemo() {
        OrderNo = "";
        items = new ArrayList<>();
    }
    public String OrderNo；
    public List<Citem> items;
}

然后在MainActivity里增加一个TextView和一个Button，用于我们先创建模拟的数据。

生成模拟数据

    private void CreateData() {
        listdemos = new ArrayList<>();
        for (int i = 0; i < 3; i++) {
            CListdemo demo = new CListdemo();
            demo.OrderNo = "00000" + i;
            demo.items = new ArrayList<>();
            for (int j = 0; j < 5; j++) {
                Citem childitem = new Citem();
                childitem.Code = i + "00" + j;
                childitem.Name = "测试商品" + i + j;
                demo.items.add(childitem);
            }
            listdemos.add(demo);
        }
    }

MainActivity的OnCreate里面写创建数据及按钮功能

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        CreateData();
        
        tvtitle = findViewById(R.id.tvtitle);
        btnshow = findViewById(R.id.btnshow);
        btnshow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Gson g = new Gson();
                String datastr = g.toJson(listdemos);
                tvtitle.setText(datastr);
            }
        });
    }

运行后可以看到，我们点击显示数据后就显示出创建的模拟数据

创建最底层的RecyclerView

布局文件

我们在layout下新建一个rcl_item.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="wrap_content"
    android:layout_weight="10"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="7"
        android:orientation="vertical"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tvcode"
            android:text="编号"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/tvname"
            android:text="名称"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_weight="3"
        android:orientation="vertical"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试"
            android:id="@+id/btncs"/>

    </LinearLayout>

</LinearLayout>

显示效果为

ItemAdapter的类

public class ItemAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private List<Citem> mitems;
    private Context mContext;

    public ItemAdapter(Context context) {
        mContext = context;
    }

    //给当前列表数据赋值
    public void SetData(List<Citem> citems) {
        mitems = citems;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.rcl_item, parent, false);
        return new lstItemViewHolder(v);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        final lstItemViewHolder viewHolder = ((lstItemViewHolder) holder);
        final Citem item = mitems.get(position);
        viewHolder.tvCode.setText(item.Code);
        viewHolder.tvName.setText(item.Name);
        viewHolder.btncs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                item.Name = item.Name + ",被点击了";
                viewHolder.tvName.setText(item.Name);
            }
        });
    }

    @Override
    public int getItemCount() {
        return mitems.size();
    }

    public static class lstItemViewHolder extends RecyclerView.ViewHolder {
        public TextView tvCode;
        public TextView tvName;
        public Button btncs;

        public lstItemViewHolder(View itemView) {
            super(itemView);
            tvCode = itemView.findViewById(R.id.tvcode);
            tvName = itemView.findViewById(R.id.tvname);
            btncs = itemView.findViewById(R.id.btncs);
        }
    }

}

我们重点看一下右边的测试按钮事件，当点击测试按钮后，源数据集里面名称会后面加上“被点击了”的字符显示出来，可以看到显示效果

创建顶层的RecyclerView

布局文件

在layout下创建一个rcl_main.xml文件

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_weight="10"
        android:orientation="horizontal"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="0dp"
            android:layout_weight="5"
            android:layout_height="wrap_content"
            android:id="@+id/tvpallcode"
            android:text="列表编码"/>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:text="展开列表"
            android:id="@+id/btnshowitem"/>
    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcl_item"
        android:visibility="gone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

显示效果

mainAdapter类

我们再来创建mainAdapter的类

public class mainAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private List<CListdemo> mlistdemos;

    private Context mContext;

    private int lastpoint;

    public mainAdapter(Context context, List<CListdemo> listdemos) {
        mContext = context;
        mlistdemos = listdemos;
        lastpoint = 0; //第一个默认展开
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.rcl_main, parent, false);

        return new mainViewHolder(mContext, v);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        final mainViewHolder viewHolder = (mainViewHolder) holder;

        final CListdemo item = mlistdemos.get(position);
        viewHolder.ShowItem(item.items);
        viewHolder.tvOrderno.setText(item.OrderNo);
        viewHolder.btnshow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (viewHolder.rcl_item.getVisibility() == View.VISIBLE) {
                    viewHolder.rcl_item.setVisibility(View.GONE);
                } else {
                    viewHolder.rcl_item.setVisibility(View.VISIBLE);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return mlistdemos.size();
    }


    public static class mainViewHolder extends RecyclerView.ViewHolder {
        public TextView tvOrderno;
        public Button btnshow;
        public RecyclerView rcl_item;
        private ItemAdapter itemAdapter;
        private GridLayoutManager layoutManager;

        public void ShowItem(List<Citem> citems) {
            itemAdapter.SetData(citems);
            //填充数据
            rcl_item.setAdapter(itemAdapter);
        }


        public mainViewHolder(Context context,View itemView) {
            super(itemView);

            tvOrderno = itemView.findViewById(R.id.tvpallcode);
            btnshow = itemView.findViewById(R.id.btnshowitem);
            rcl_item = itemView.findViewById(R.id.rcl_item);

            itemAdapter = new ItemAdapter(context);
            layoutManager = new GridLayoutManager(context, 2);
            rcl_item.setLayoutManager(layoutManager);

        }
    }
}

下面红框内是关联我们的ItemAdapter的相关方法

然后我们通过创建GridLayoutManager把子的RecyclerView改为Grid为两排的布局。

主界面

最后再回到我们的主界面，在OnCreate里面把创建mainAdapter的方法写出来

        rcl_main = findViewById(R.id.rcl_main);

        adapter = new mainAdapter(this, listdemos);

        //设置布局管理器 , 将布局设置成纵向
        layoutManager = new LinearLayoutManager(this, LinearLayout.VERTICAL, false);
        layoutManager.setOrientation(LinearLayout.VERTICAL);

        rcl_main.setLayoutManager(layoutManager);
        //设置分隔线
        rcl_main.addItemDecoration(new DividerItemDecoration(this , DividerItemDecoration.VERTICAL));
        //设置增加或删除条目动画
        rcl_main.setItemAnimator(new DefaultItemAnimator());
        //填充数据
        rcl_main.setAdapter(adapter);
        //取消局部更新时闪烁动画
        ((SimpleItemAnimator)rcl_main.getItemAnimator()).setSupportsChangeAnimations(false);

这样我们就算是大功告成了。

使用截图