Android作业二——RecyclerView实现点击item展开二级列表，点击后跳转到一个新的view展示信息（仿微信APP实现）

1.实验环境

Android studio编译环境

2.实验要求

按照作业一（之前提交的博客作业），将recyclerView的每个item增加点击功能，点击后跳转到一个新的view展示信息

3.最终实现界面大体显示如下

该页面菜单收录了很多首歌曲类目，标题为歌曲名，下侧对应该歌曲歌词

点击对应标题，则跳转到对应界面，界面设置包含歌曲名，对应歌词部分以及对应专辑封面

4.xml界面介绍

（1）activity_main.xml

此部分主要展示主界面，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/group_name"/>

        <FrameLayout
            android:id="@+id/id_content"
            android:layout_width="match_parent"
            android:layout_height="558dp"
            android:layout_weight="1"></FrameLayout>

        <include
            layout="@layout/bottom"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"></include>
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

（2）Fragment_contacts.xml
（删除了上次的TextView文本框的简单内容展示，添加了RecyclerView组件实现本次功能）

（3）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_margin="10dp"
    android:background="@color/ivory"
    android:orientation="vertical" >
    

    <TextView
        android:id="@+id/counter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="序号"
        android:textSize="15sp"
        android:textColor="@color/black"
        android:gravity="right"/>

    <TextView
        android:id="@+id/nickname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="昵称"
        android:fontFamily="@font/huawencaiyun"
        android:textColor="@color/blue"
        android:textSize="30sp" />

    <TextView
        android:id="@+id/personalized_signature"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/huawenxingkai"
        android:text="个性签名"
        android:textColor="@color/pinkish_red"
        android:textSize="20sp" />

</LinearLayout>>

5.编写点击事件

RecyclerView的点击事件有两种写法：
（1）在Adapter里面直接对控件做点击事件
（2）写接口，在Activity或Fragment上实现接口中定义的方法

package com.example.myapplication;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

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

public class Fragment_contacts extends Fragment {
    private Context context;
    //昵称列表
    private List<String> mList = new ArrayList<>();
    //个性签名列表
    private List<String> nList = new ArrayList<>();

    public Fragment_contacts() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_contacts, container, false);

        context = view.getContext();

        //添加数据
        InitNickNameList();
        InitSignatureList();

        //创建Adapter对象
        RecyclerView recyclerView = view.findViewById(R.id.recyclerview_contacts);
        RecyclerViewAdapter adapter = new RecyclerViewAdapter(mList, nList, context);
        recyclerView.setAdapter(adapter);

        //LinearLayoutManager是一个工具类，承担了一个View(RecyclerView)的布局、测量、子View 创建、 复用、 回收、 缓存、 滚动等操作。
        LinearLayoutManager manager = new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);
//        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL));

        //addItemDecoration用来进行分割线设计
        recyclerView.addItemDecoration(new DividerItemDecoration(context, LinearLayoutManager.VERTICAL));

        return view;
    }

    private void InitNickNameList() {
        mList.add("彩券");
        mList.add("认真的雪");
        mList.add("你还要我怎样");
        mList.add("绅士");
        mList.add("演员");
        mList.add("天外来物");
        mList.add("动物世界");
        mList.add("意外");
        mList.add("崇拜");
    }

    private void InitSignatureList() {
        nList.add("在我遇见你以前也拥有过完整的睡眠");
        nList.add("雪下的那么深，下的那么认真");
        nList.add("你停在了這條我們熟悉的街");
        nList.add("好久没见了什么角色呢");
        nList.add("簡單點 說話的方式簡單點");
        nList.add("你降落的 太突然了 我剛好呢 又路過了");
        nList.add("东打一下西戳一下 动物未必需要尖牙");
        nList.add("我在清晨的路上 誰被我遺忘");
        nList.add("抛弃世界吧 就剩我们俩");

    }


}

编写歌曲类目（歌曲名）

编写歌曲歌词部分（该部分也会展示在歌曲名下面，根据长度会有折叠）

6.点击事件对应类目实现

编写对应进入页面的详情（分了3个框图，最上面放置歌曲名，中间贴上了歌词，最下面附带上了对应歌曲专辑图片）

框图架构和最终实现图片分别如下

专辑封面图片

7.代码仓库上传

MyApplication_RecycleView: 移动开发第二次作业 RecyclerView实现点击item展开二级列表，点击后跳转到一个新的view展示信息（仿微信APP实现）

8.总结
上次微信界面设计主要实现4个tab的基础上APP门户界面框架设计，包含4个tab页，能实现tab页之间的点击切换
此次主要实现了对应页面点击并实现跳转，由此选择一个Fragment文件实现RecyclerView控件的设计开发，根据实现要求，选择在“联系人”界面进行RecyclerView的纵向布局设计，以及实现点击事件，对item中的每个LinearLayout实现点击显示内容，并根据自我喜好对跳转页面进行设计实现