文章目录
前言
在上个类微信页面设计基础上,已在联系人界面使用recycleview实现列表效果。现根据上个作业的源码基础,完善联系人界面的列表效果使其更加丰富,并且实现在列表页上点击跳转到另一详情页面。
一、需求分析
完善联系人界面的列表效果,使其具有基本的元素,如联系人头像、联系人备注、联系人分组等;在列表页上点击某一联系人时可跳转到另一详情页面,并可以在另一详情页面点击返回。
二、开发技术及知识
1.Adapter:
在 Android 开发中,适配器(Adapter)是连接数据源和 UI 控件之间的桥梁。它将数据转化为可供 UI 控件展示的格式,并负责管理数据与界面之间的交互。适配器通常用于列表、网格及其他可滚动视图的数据绑定。
适配器的主要作用包括:数据转换、视图创建、数据绑定、交互处理。
2.Intent:
Intent是一种用于在不同组件(如Activity、Service)之间传递数据和进行通信的机制。它可以用于启动组件、传递数据、实现组件之间的交互等。
3.Activity生命周期:
Activity生命周期指Activity从创建到销毁的过程。
Activity表现为四种状态:
①活动状态Active:Activity在用户界面中处于最上层,完全能被用户看到,能够与用户进行交互。
②暂停状态Pause:Activity在界面上被部分遮挡,不再处于用户界面的最上层,且不能够与用户进行交互。(如弹出消息框)
③停止状态Stop:Activity被其他Activity全部遮挡,界面完全不能被用户看到。
④非活动状态Dead:Activity没有启动或者被finish()。
三、设计流程
1.完善列表页面
上一个作业中联系人列表页面太过单一,只有联系人备注,现加上联系人头像、联系人分组等元素。
在friendFragment.java文件中写入数据——姓名、分组、详细信息、头像。
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.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 friendFragment 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.fragment_friend, container, false);
mycontext=view.getContext();
recyclerView=view.findViewById(R.id.recycleview);
//数据
mydata=new ArrayList<Map<String,Object>>();
String [] name={"赵永康","爸爸","妈妈","妹妹","崔少","翁少","徐少","范晨","凡卓","冰倩"};
String [] group={"本人","家人","家人","家人","大学","大学","大学","高中","初中","初中"};
String [] detail={"自己zyk","本人的爸爸","本人的妈妈","本人的妹妹","大学朋友","大学朋友","大学朋友","高中朋友","初中朋友","初中朋友"};
int[] image={R.drawable.friend_green,R.drawable.friend_green,R.drawable.friend_green,
R.drawable.friend_green,R.drawable.friend_green,R.drawable.friend_green,
R.drawable.friend_green,R.drawable.friend_green,R.drawable.friend_green,R.drawable.friend_green};
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);
recyclerView.setLayoutManager(manager);
recyclerView.setAdapter(myadapter);
recyclerView.addItemDecoration(new DividerItemDecoration(mycontext,LinearLayoutManager.VERTICAL));
return view;
}
}
2.设计item页面
item页面对应列表页中的每一行,用来设计每一行中的元素布局。包含联系人头像、联系人备注、联系人分组。
<?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"
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/wechat_people" />
<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.编写适配器文件Myadapter
Myadapter.java文件用于配置列表页的内容展示和实现点击跳转功能。
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
public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
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) {
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;
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.新建MainActivity2文件
在AS中新建一个MainActivity2.java文件并生成其对应的xml布局文件。通过MainActivity.java文件来实现点击联系人列表页后跳转到另一界面展示联系人的详细信息。
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();
}});
}
}
5.设计MainActivity2布局文件
activity_main2.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: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="128dp"
android:layout_height="85dp"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#00BCD4"
android:gravity="center"
android:text="返回"
android:textSize="25sp" />
</LinearLayout>
四、结果展示
总结
通过这个实验,我使用AS实现了在列表页点击联系人跳转到详情页的功能。这个功能可以提供更好的用户交互体验,并且方便用户查看每个联系人的详细信息。我学习了如何在AS中使用Intent和多个Activity来实现页面跳转,并了解了在列表页和详情页之间传递数据的方法。