安卓开发

安卓开发-UI界面–RecycleView与Adapter页面跳转

文章目录

    • 安卓开发-UI界面--RecycleView与Adapter页面跳转
      • 一、功能说明
      • 二、开发技术
      • 三、设计流程与核心代码详解
            • 1、设计RecycleView页面
            • 2.设计item页面
            • 3、编写对应的适配器
            • 4、在对应的fragment.java文件中添加相关内容
            • 5、MainActivity2文件实现跳转后页面
            • 6、设计mainactivity2页面
      • 四、效果展示
      • 源码开源地址

一、功能说明

​ 本次实验在类微信页面设计的基本框架中的某个tab页面中添加RecycleView，并在列表页面的基础上进行点击跳转设计。这里选择的是通讯录列表页面，点击联系人可以跳转到通讯录详情页面。

二、开发技术

​ 本次实验旨在熟悉RecycleView、Adapter、Activity生命周期

  • RecycleView

    从Android5.0开始，google带来了一个全新的列表组件，叫做RecycleView，使得我们日常使用几乎已经抛弃了ListView。RecycleView的优势在于提供了VIewHolder模式，同时支持列表布局与网格布局、支持瀑布流布局，还恶意对列表进行添加删除是的动画。

  • Adapter–数据和视图之间交互的中介

  • Activity

    • Activity是一个可视化的用户界面，负责创建一个屏幕窗口，放置UI组件，供用户交互。在这个通讯录例子中，我们就是打开app，看到的界面是MainActivity，当我们点击联系人，跳转东安另一个界面，即MainActivity2。

    • Activity生命周期指Activity从创建到销毁的过程。Activity表现为四种状态：

      ​ 1、活动状态Active：Activity在用户界面中处于最上层，完全能被用户看到，能够与用户进行交互。

      ​ 2、暂停状态Pause：Activity在界面上被部分遮挡，不再处于用户界面的最上层，且不能够与用户进行交互。(如弹出消息框)

      ​ 3、停止状态Stop：Activity被其他Activity全部遮挡，界面完全不能被用户看到。(如玩游戏时来电了)

      ​ 4、非活动状态Dead：Activity没有启动或者被finish()。

三、设计流程与核心代码详解

1、设计RecycleView页面

​ 我们想在通讯录页面中展示联系人列表，这里我们选择使用RecycleView控件，将其放在fragment2.xml文件中。

fragmeng2.xml文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=""xmlns:tools=""android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".fragment1"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recycleview"android:layout_width="match_parent"android:layout_height="match_parent" />
</FrameLayout>
2.设计item页面

  • item页面对应RecycleView中的每一行，item页面用来设计每一行中的元素布局。这里包含头像（ImageView）、姓名（TextView）、分组TextView）
    ![在这里插入图片描述](.png#pic_center

  • item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""xmlns:app=""android:id="@+id/LinearLayout11"android:layout_width="match_parent"android:layout_height="wrap_content"><ImageViewandroid:id="@+id/imageView6"android:layout_width="100dp"android:layout_height="100dp"android:layout_weight="1"app:srcCompat="@drawable/faxian" /><LinearLayoutandroid:id="@+id/linearlayout1"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="10sp"android:text="姓名"android:textColor="#856363"android:textSize="30sp" /><TextViewandroid:id="@+id/textView3"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="10sp"android:textColor="#856363"android:text="分组"android:textSize="30sp" /></LinearLayout>
</LinearLayout>
3、编写对应的适配器
  • 这里的Adapter用于配置RecycleVIew的内容展示和控制点击跳转功能（包括设置数据格式、生成、绑定以及获取ViewHolder）
package com.example.test;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
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 java.util.List;
import java.util.Map;public class Myadapter extends RecyclerView.Adapter <Myadapter.MyViewHolder> {private List<Map<String,Object>> mydata;private Context mycontext;public Myadapter(List<Map<String,Object>> data,Context context){mydata=data;mycontext=context;}@NonNull@Override
//    生成一个ViewHolder  Hodler-->指针  指向一个视图的指针public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
//     inflater 将一个xml的布局文件压缩成view 用LayoutInflaterView view = LayoutInflater.from(mycontext).inflate(R.layout.item,parent,false);MyViewHolder holder=new MyViewHolder(view);return holder;}
//    绑定ViewHolder@Overridepublic void onBindViewHolder(MyViewHolder holder, @SuppressLint({"RecycleView", "RecyclerView"}) int position) {
//    通过hodler找到TextViewholder.textView.setText(mydata.get(position).get("姓名").toString());holder.textView2.setText(mydata.get(position).get("分组").toString());holder.imageView.setImageResource((int)(mydata.get(position).get("头像")));holder.linearLayout.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Intent intent=new Intent(mycontext,MainActivity2.class);intent.putExtra("tx",(int)mydata.get(position).get("头像"));intent.putExtra("name",mydata.get(position).get("姓名").toString());intent.putExtra("detail",mydata.get(position).get("信息").toString());mycontext.startActivity(intent);}});}@Overridepublic int getItemCount() {return mydata.size();//确定有多少行}//    获得ViewHolderpublic class  MyViewHolder extends RecyclerView.ViewHolder{private TextView textView;//控件是什么就写什么 这里是TextViewprivate TextView textView2;private ImageView imageView;private LinearLayout linearLayout;public MyViewHolder(@NonNull View itemView) {super(itemView);textView=itemView.findViewById(R.id.textView2);textView2=itemView.findViewById(R.id.textView3);imageView=itemView.findViewById(R.id.imageView6);linearLayout=itemView.findViewById(R.id.linearlayout1);}}
}
4、在对应的fragment.java文件中添加相关内容
  • 在fragment2.java文件中写入我们的数据（姓名–name、分组–group、详细信息–detail、头像–image）
package com.example.test;
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 java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;public class fragment2 extends Fragment {RecyclerView recyclerView;private List<Map<String,Object>> mydata;private Context mycontext;Myadapter myadapter;@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentView view;view=inflater.inflate(R.layout.fragment2, container, false);mycontext=view.getContext();recyclerView=view.findViewById(R.id.recycleview);//数据mydata=new ArrayList<Map<String,Object>>();String [] name={"陈禹含","陈禹中","肖梦圆","王晓钰","程子妍","周文君","聂银杏","方心月","聂菁","张赛飞"};String [] group={"本人","家人","大学","大学","大学","高中","高中","高中","初中","初中"};String [] detail={"大三本科生","本人的弟弟","信安的好朋友~","软工的好朋友~","播主的好朋友","高中文科班好朋友","高中一个班好朋友~","高中一个班好朋友！","初中一个班的好朋友~","初中一起玩的好朋友！"};int[] image={R.drawable.gou,R.drawable.xiaogou,R.drawable.tu,R.drawable.tuzi,R.drawable.mao,R.drawable.xiong,R.drawable.xiaoixiong,R.drawable.zhu,R.drawable.xiaozhu,R.drawable.yang};for (int i=0;i<name.length;i++){Map<String,Object> map=new HashMap<String,Object>();map.put("姓名",name[i]);map.put("分组",group[i]);map.put("头像",image[i]);map.put("信息",detail[i]);mydata.add(map);}LinearLayoutManager manager=new LinearLayoutManager(mycontext);manager.setOrientation(recyclerView.VERTICAL);myadapter=new Myadapter(mydata, mycontext);//如何铺 水平or垂直？recyclerView.setLayoutManager(manager);recyclerView.setAdapter(myadapter);recyclerView.addItemDecoration(new DividerItemDecoration(mycontext,LinearLayoutManager.VERTICAL));return view;}
}
5、MainActivity2文件实现跳转后页面
  • 新建EmptyActivity文件，通过它来实现点击联系人后跳转页面展示联系人的详细信息
package com.example.test;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;public class MainActivity2 extends AppCompatActivity{private ImageView imageView;private TextView textView1,textView2;private Button button;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main2);Intent intent = getIntent();String first = intent.getStringExtra("name");String second = intent.getStringExtra("detail");imageView =findViewById(R.id.image2);textView1 = findViewById(R.id.name2);textView2 = findViewById(R.id.detail2);button = findViewById(R.id.fanhui);textView1.setText(first);textView2.setText(second);imageView.setImageResource(intent.getIntExtra("tx",1));imageView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {Toast.makeText(MainActivity2.this,first,Toast.LENGTH_SHORT).show();}});button.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {finish();}});}
}
6、设计mainactivity2页面

​

-这里对应点击联系人后的详细信息展示页面（包括头像、姓名、详细信息，还有一个返回按钮）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android=""xmlns:app=""xmlns:tools=""android:id="@+id/linear"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"tools:context=".MainActivity2"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="1"android:orientation="horizontal"><ImageViewandroid:id="@+id/image2"android:layout_width="100dp"android:layout_height="100dp"android:layout_weight="1" /><TextViewandroid:id="@+id/name2"android:layout_width="wrap_content"android:layout_height="100dp"android:layout_weight="1"android:background="#FFFDFD"android:gravity="center"android:textColor="#856363"android:textSize="20sp" /><TextViewandroid:id="@+id/detail2"android:layout_width="wrap_content"android:layout_height="100dp"android:layout_gravity="center"android:layout_weight="1"android:gravity="center"android:textColor="#856363"android:textSize="20sp" /></LinearLayout><Buttonandroid:id="@+id/fanhui"android:layout_width="100dp"android:layout_height="50dp"android:layout_gravity="center"android:layout_weight="1"android:background="#00BCD4"android:gravity="center"android:text="返回"android:textSize="25sp" />
</LinearLayout>

​ 我们通过intent传递和接收数据与参数，将intent传送的数据展示在跳转后的页面上。使用监听当点击联系人时将通过startActivity()来开启一个新的活动（写在适配器Adapter中），而退出跳转后的界面后，最后将回到主界面活动，故我们还需要再MainActivity2的最后使用finish()来结束掉它。

四、效果展示

源码开源地址