recycleView的页面进行点击跳转设计

recycleView的页面跳转设计

---

前言

这是AS对在APP门户界面上，对有recycleView的页面进行点击跳转设计（比如，某一tab页是新闻列表，则点击某一行能跳转到新闻详情页面）的一个实验记录博客，如果博客中有内容描述错误或者代码有误，欢迎批评和指正。

---

提示：以下是本篇文章正文内容。

一、实验内容与界面展示

1. 实验内容与技术

1、请在实验二的基础上，对有recycleView的页面进行点击跳转设计。比如，某一tab页是新闻列表，则点击某一行能跳转到新闻详情页面；
2、本次作业考查的基础原理是对activity的生命周期的理解以及状态转变操作；

2. 界面展示

二、实现过程

首先先交代一下实验二所实现的界面效果以及大致思路：在原有的wechart项目上选择微信tab添加recyclerview显示，实现滑动、删除等功能。
所以在本次的实验中，实现的内容是：对有recyclerView的微信聊天页面进行点击跳转设计。点击微信界面的聊天列表中的聊天对象名称，跳转到与其对应的聊天对象的聊天详情页面中。
先来创建我们跳转后的聊天详情页面的类，接着在相对应的页面设计中设计布局，然后在页面详情类中的内容部分中用添加recyclerview显示，实现点击对象的聊天信息的具体内容展示。

1. 创建Activity类，命名为detail_caoActivity

在com.example.wechart.details包里new一个Empty Activity文件，命名为detail_caoActivity。来实现跳转后的聊天界面展示。其自带的页面设计文件生成与res.layout中，命名为activity_detail_cao。

2. activity_detail_cao.xml文件的相关配置添加

在res.layout包里找到detail_caoActivity类对应的activity_detail_文件，在其顶部的linearLayout中写一个TextView，在中间添加一个RecyclerView，在底部的linearLayout中写一个TextView和加一个button。

activity_detail_cao.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="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".details.detail_caoActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="51dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textView6"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/teal_700"
            android:gravity="center"
            android:text="TextView"
            android:textSize="30sp" />

    </LinearLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_weixindetail"
        android:layout_width="match_parent"
        android:layout_height="551dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="63dp"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView8"
            android:layout_width="299dp"
            android:layout_height="match_parent"
            android:background="@drawable/xiankuang"
            android:gravity="center"
            android:paddingLeft="15dp"
            android:paddingTop="15dp"
            android:paddingRight="10dp"
            android:paddingBottom="10dp"
            android:text="请输入内容"
            android:textSize="20dp" />

        <Button
            android:id="@+id/button"
            android:layout_width="112dp"
            android:layout_height="match_parent"
            android:background="#D0D0D0"
            android:text="发送"
            android:textColor="@color/white"
            android:textSize="24sp"
            app:backgroundTint="@color/teal_700" />

    </LinearLayout>


</LinearLayout>

activity_detail_cao页面设计的图片：

3. 制作detail_weixin.xml文件

detail_weixin.xml文件用于activity_detail_cao.xml文件中的中间RecyclerView部分的内容显示。显示聊天对象的头像和聊天时间以及内容。

detail_weixin.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:roundiv="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:background="@color/design_default_color_background"
    android:baselineAligned="false"
    android:orientation="vertical">


    <TextView
        android:id="@+id/detail_time"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@color/cardview_dark_background"
        tools:text="中午12:00" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:background="@color/white"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/detail_img"
            android:layout_width="43dp"
            android:layout_height="40dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="#FFFFFF"
            android:scaleType="centerCrop"
            android:src="@drawable/newsimg"
            roundiv:radius="20dp" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/white"
            android:orientation="vertical">

            <TextView
                android:id="@+id/detail_content"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:ellipsize="end"
                android:gravity="center|start"
                android:maxLines="1"
                android:textColor="@color/design_default_color_on_secondary"
                tools:text="啦啦啦啊" />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

detail_weixin面设计的图片：

4. 构造数据类javaBean，命名为WeixindetailContent

构建用来展示聊天详细内容的实体类，要用三个变量来分别表示头像，消息内容，消息时间。

WeixindetailContent文件代码如下：

public class WeixindetailContent {
    private Integer weChatdetailAvatarId;
    private String weChatdetailContent;
    private String weChatdetailTime;



    public WeixindetailContent(Integer weChatdetailAvatarId, String weChatdetailContent, String weChatdetailTime) {
        this.weChatdetailAvatarId = weChatdetailAvatarId;
        this.weChatdetailContent = weChatdetailContent;
        this.weChatdetailTime = weChatdetailTime;

    }

    public WeixindetailContent() {

    }

    public Integer getWeChatdetailAvaterId() {
        return weChatdetailAvatarId;
    }

    public void setWeChatdetailAvaterId(Integer weChatAvaterId) {
        this.weChatdetailAvatarId = weChatAvaterId;
    }

    public String getWeChatdetailContent() {
        return weChatdetailContent;
    }

    public void setWeChatdetailContent(String weChatContent) {
        this.weChatdetailContent = weChatContent;
    }

    public String getWeChatdetailTime() {
        return weChatdetailTime;
    }

    public void setWeChatdetailTime(String weChatTime) {
        this.weChatdetailTime = weChatTime;
    }
}

5. 构造Adapter类，命名为WeixindetailContent

继承RecyclerView.Adapter的Adapter类（VH是ViewHolder的类名）, 在Adapter中创建一个继承RecyclerView.ViewHolder的静态内部类，记为VH,在Adaptec中实现方法：
onCreateViewHolder()：初始化ViewHolder；
onBindViewHolder()：将数据绑定到ViewHolder上；
getItemCount()：获取list的大小。
onRemoveItem()：自己写的方法，用来删除list里的数据。

再增加一个通过点击触发的监听，创建一个intent来实现从微信页面到被调detail_caoActivity页面的跳转,并且向detail_caoActivity发送数据（聊天对象的名称）

WeixindetailContent代码如下：

public class WeixindetailAdapter extends RecyclerView.Adapter<WeixindetailAdapter.WeixindetailViewHolder> {
    private Context context;   //上下文
    private List<WeixindetailContent> wechatData2;   //展示聊天列表的list数组
    private LayoutInflater inflater;

    //添加了一个接口
    public interface OnItemOnClickListener {
        void onItemOnClick(View view, int position);

        void onItemLongOnClick(View view, int position);
    }

    private OnItemOnClickListener mOnItemOnClickListener;

    //供外部来设置监听
    public void setOnItemOnClickListener(OnItemOnClickListener listener) {
        this.mOnItemOnClickListener = listener;
    }

    public WeixindetailAdapter(Context context, List<WeixindetailContent> wechatData2) {
        this.context = context;
        this.wechatData2 = wechatData2;
    }

    @NonNull
    @Override
    public WeixindetailViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(this.context).inflate(R.layout.detai_weixin, parent, false);
        return new WeixindetailViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull WeixindetailViewHolder holder, @SuppressLint("RecyclerView") int position) {
        holder.wechatdetailAvaterView.setImageResource(wechatData2.get(position).getWeChatdetailAvaterId());
        holder.wechatdetaiContentView.setText(wechatData2.get(position).getWeChatdetailContent());
        holder.wechatdetailTimeView.setText(wechatData2.get(position).getWeChatdetailTime());
    }

    @Override
    public int getItemCount() {
        return wechatData2 == null ? 0 : wechatData2.size();
    }

    //根据位置删除wechatDate里的数据
    public void onRemoveItem(int position) {
        if (position < 0 || position > getItemCount()) {
            return;
        }

        wechatData2.remove(position);
        notifyItemRemoved(position);
        /*如果移除的是最后一个，忽略。
         * 避免下标错误
         * */
        if (position != wechatData2.size()) {
            notifyItemRangeChanged(position, wechatData2.size() - position);
        }
    }

    public class WeixindetailViewHolder extends RecyclerView.ViewHolder {
        TextView wechatdetaiContentView, wechatdetailTimeView;
        ImageView wechatdetailAvaterView;

        public WeixindetailViewHolder(@NonNull View itemView) {
            super(itemView);
            wechatdetailAvaterView = itemView.findViewById(R.id.detail_img);
            wechatdetaiContentView = itemView.findViewById(R.id.detail_content);
            wechatdetailTimeView = itemView.findViewById(R.id.detail_time);

        }
    }
}

6. 配置detail_caoActivity.java文件

接下来就到我们最后的部分啦，在detail_caoActivity中“显示”我们的写的聊天详情布局页面。并且编写代码实现页面跳转。

6.1 声明变量

    private List<WeixindetailContent> weChatData2 = new ArrayList<>();
    //展示内容的数据集
    private Context context;
    //声明上下文
    private RecyclerView recyclerView;
    //声明recyclerView，在后面onCreateView()函数中通过view.findViewById()进行赋值
    private WeixindetailAdapter weixindetailAdapter;

6.2 activity的生命周期

@Override
    protected void onPostResume() {
        super.onPostResume();
        Log.d("life","activity3 is onPostResume...");
    }

    @Override
    protected void onStart() {
        super.onStart();
        Log.d("life","activity3 is onStart...");
    }

    @Override
    protected void onRestart() {
        super.onRestart();
        Log.d("life","activity3 is onRestart...");
    }

    @Override
    protected void onStop() {
        super.onStop();
        Log.d("life","activity3 is onStop...");
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        Log.d("life","activity3 is onDestroy...");
    }

    @Override
    public void finish(){
        super.finish();
        Log.d("life","activity3 is finish...");
    }
    @Override
    public void finishActivity(int requestCode){
        super.finishActivity(requestCode);
        Log.d("life","detail_caoActivity...");
    }

6.3 initData()方法初始化数据

初始化数据的时候，实现将聊天详情页面的聊天对象进行修改，以及对应聊天内容详情的显示。

    
private void initData() {

        context = this;
        recyclerView = (RecyclerView) findViewById(R.id.rv_weixindetail);

        TextView textView6 = findViewById(R.id.textView6);
        Intent intent = getIntent();
        String name = intent.getStringExtra("name");
        textView6.setText(name);

        List<String> nameList = new ArrayList<>();
        nameList.add("妈妈");
        nameList.add("董小范");
        nameList.add("曹小花");
        nameList.add("小吴");
        nameList.add("姐姐");
        nameList.add("爸爸");
        nameList.add("小余鱼");
        nameList.add("罗黛玉");

        List<String> timeList = new ArrayList<>();
        timeList.add("下午7:00");
        timeList.add("下午5:00");
        timeList.add("下午3:30");
        timeList.add("下午2:00");
        timeList.add("中午12:00");
        timeList.add("上午9:30");
        timeList.add("上午8:00");
        timeList.add("上午7:00");

        List<String> ContentList = new ArrayList<>();
        ContentList.add("买衣服了没");
        ContentList.add("学姐，带个快递");
        ContentList.add("吃啥");
        ContentList.add("有快递帮忙带回去的吗");
        ContentList.add("这个剧还不错");
        ContentList.add("还有生活费么");
        ContentList.add("在哪儿");
        ContentList.add("买这个不");

        List<Integer> AvaterIdList = new ArrayList<>();
        AvaterIdList.add(R.drawable.mam);
        AvaterIdList.add(R.drawable.xiaofan);
        AvaterIdList.add(R.drawable.cao);
        AvaterIdList.add(R.drawable.wu);
        AvaterIdList.add(R.drawable.sis);
        AvaterIdList.add(R.drawable.dad);
        AvaterIdList.add(R.drawable.yu);
        AvaterIdList.add(R.drawable.luo);

        for (int i=0;i<nameList.size();i++){
            if(nameList.get(i).equals(name)) {
                WeixindetailContent weChatdetailContent = new WeixindetailContent();
                weChatdetailContent.setWeChatdetailAvaterId(AvaterIdList.get(i));
                weChatdetailContent.setWeChatdetailContent(ContentList.get(i));
                weChatdetailContent.setWeChatdetailTime(timeList.get(i));
                weChatData2.add(weChatdetailContent);
            }
        }
    }

这里要注意的是在AS里写java语言的时候，想用if语句的时候，要注意“==”要用.equals()方法实现。

6.4 initView()初始化View

初始化View，为RecyclerView配置适配器，管理器，为Adapter设置自定义的监听器

   private void initView() {
        context = this;
        weixindetailAdapter = new WeixindetailAdapter(context,weChatData2);
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context);
        linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        weixindetailAdapter.setOnItemOnClickListener(new WeixindetailAdapter.OnItemOnClickListener() {
            @Override
            public void onItemOnClick(View view, int position) {
                Toast.makeText(context, "点击"+position, Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onItemLongOnClick(View view, int position) {
                showPopMenu(view,position);
            }
        });

        recyclerView.setAdapter(weixindetailAdapter);
        recyclerView.setLayoutManager(linearLayoutManager);
        recyclerView.setHasFixedSize(true);
        recyclerView.addItemDecoration(new DividerItemDecoration(context, DividerItemDecoration.VERTICAL));
    }

6.5 OnCreate执行上面所写函数方法实现具体功能

在detail_caoActivity中，执行OnCreate函数时实现页面跳转设计并且显示出其生命周期。

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_detail_cao);
        Log.d("life","detail_caoActivity is onCreate...");
        Toast.makeText(this, "detail_caoActivity is onCreate...", Toast.LENGTH_SHORT).show();

        initData();
        initView();
        }

在OnCreate()函数中调用
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);可以是其项目运行时的顶端项目名称隐藏起来。

三、源码仓库

码云仓库地址：https://github.com/Julia-rs-zhu/Wechatdemo2

总结

超级开心，其实本来是一个小小的跳转设计，很快就可以实现的，但是鉴于我的实验二recyclerview的显示的内容没有发送博客，所以再实现跳转的同时，我把跳转的聊天详情界面也用recyclerview方法实现了，虽然实现的过程非常的坎坷，但是在不断改错的同时，我对AS的使用以及RecyclerView的学习有了进一步的提升。成功实现以后，感觉到非常的自豪、开心。熟能生巧，希望在接下来的AS学习中，在不断的实验训练下，我对AS的应用越来越熟练。
今天就到这里啦，蟹蟹看到这里的盆友！共勉！