安卓开发-UI界面--RecycleView与Adapter页面跳转
安卓开发-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文件
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment1">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycleview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
FrameLayout>
2.设计item页面
-
item页面对应RecycleView中的每一行，item页面用来设计每一行中的元素布局。这里包含头像（ImageView）、姓名（TextView）、分组TextView）
-
item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/LinearLayout11"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageView6"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_weight="1"
app:srcCompat="@drawable/faxian" />
<LinearLayout
android:id="@+id/linearlayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android: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" />
<TextView
android: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 用LayoutInflater
View view = LayoutInflater.from(mycontext).inflate(R.layout.item,parent,false);
MyViewHolder holder=new MyViewHolder(view);
return holder;
}
// 绑定ViewHolder
@Override
public void onBindViewHolder(MyViewHolder holder, @SuppressLint({"RecycleView", "RecyclerView"}) int position) {
// 通过hodler找到TextView
holder.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() {
@Override
public 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);
}
});
}
@Override
public int getItemCount() {
return mydata.size();//确定有多少行
}
// 获得ViewHolder
public class MyViewHolder extends RecyclerView.ViewHolder{
private TextView textView;//控件是什么就写什么 这里是TextView
private 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;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View 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;
@Override
protected 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() {
@Override
public void onClick(View view) {
Toast.makeText(MainActivity2.this,first,Toast.LENGTH_SHORT).show();
}
});
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}});
}
}
6、设计mainactivity2页面
-这里对应点击联系人后的详细信息展示页面（包括头像、姓名、详细信息，还有一个返回按钮）
<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:id="@+id/linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".MainActivity2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="@+id/image2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_weight="1" />
<TextView
android: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" />
<TextView
android: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>
<Button
android: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()来结束掉它。
四、效果展示
源码开源地址
- https://gitee.com/airenary/android2