作业要求
在第一次作业的源代码基础上,在RecycleView中实现点击切换详情页面,该如何实现呢?
一、视图实现效果
程序UI设计:App有四个界面,第一个界面介绍《日常》的人物,第二个界面介绍《日常》的音乐,剩下两个页面暂定。
- 在人物介绍界面中,有一个人物姓名的列表,当点击他们的姓名时,就可以跳转到人物简介的详情页中
人物简介有四个信息:人物的照片,姓名,梗和简介。 - 在音乐介绍界面中,有一个横向布局的列表,列表中有专辑名和专辑封面
二、关键代码解析
1.列表实现点击跳转界面
人物的基本信息我新建了一个类来存放:
定义在Fragment1中:
// Figure类型的列表
List<Figures> list;
// 添加人物基本信息的数据
private void initData() {
list.add(new Figures("1","相生祐子", "----地表最强人类", "留着茶色短发,性格活泼开朗,有时候很有干劲,倒霉时也容易被哄开心。对生活有乐观的憧憬,对朋友很是珍惜。"));
....
}
// 存放人物基本信息的类:Figure,有四个属性。
public class Figures {
private String id;
private String name;
private String stalk;
private String introduction;
public Figures(String id,String name,String stalk,String introduction) {
this.id = id;
this.name = name;
this.stalk = stalk;
this.introduction = introduction;
}
public String getId(){return id;}
public String getName() {
return name;
}
public String getStalk() {
return stalk;
}
public String getIntroduction() {
return introduction;
}
}
为了实现点击跳转。首先我们肯定需要设计一个点击事件,
我将其放在适配器中实现,当点击名字时,实现跳转:利用Intent跳转到详情页面的Activity中;并传入人物的基本信息。
MyAdapter代码:
public void onBindViewHolder(@NonNull MyHolder holder, int position) {
Fragment1.Figures figure = list.get(position);
holder.textView1.setText(figure.getName());
holder.layout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 点击跳转人物详情页面,使用Intent实现
Intent intent = new Intent(view.getContext(), FigureActivity.class);
// 传递人物id,用于查找人物图片
intent.putExtra("id", figure.getId());
// 传递人物姓名,梗语句和简介
intent.putExtra("name", figure.getName());
intent.putExtra("stalk", figure.getStalk());
intent.putExtra("introduction", figure.getIntroduction());
// 启动Intent
view.getContext().startActivity(intent);
}
});
}
我想要实现每个人都有自己的图片,由于技术有限,我无法做到利用Intent直接传输图片地址,所以我在FigureActivity中再定位图片。
FigureActivity核心代码:
...
Intent intent = getIntent();
// 用于查找图片的id
String id = intent.getStringExtra("id");
// 遍历drawable的所有图片,找到我们想要的图片的id
int resId = 0;
Field[] fields = R.drawable.class.getFields();
for (Field field : fields) {
try {
if (field.getType() == int.class) {
String fieldName = field.getName();
if (fieldName.equals("figure" + id)) {
resId = field.getInt(null);
}
}
} catch (IllegalAccessException e) {
throw new RuntimeException(e);
}
...
新增的XML文件
activity_figure.cml:
<?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"
tools:context=".FigureActivity">
<ImageView
android:id="@+id/figureView"
android:layout_width="426dp"
android:layout_height="231dp"
android:src="@drawable/group"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/nameView"
android:layout_width="180dp"
android:layout_height="52dp"
android:text="TextView"
android:textSize="35dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.38" />
<TextView
android:id="@+id/stalkView"
android:layout_width="410dp"
android:layout_height="47dp"
android:text="TextView"
android:textSize="23dp"
app:layout_constraintBottom_toTopOf="@+id/introView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/nameView"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="@+id/introView"
android:layout_width="419dp"
android:layout_height="373dp"
android:textColor="#76716B"
android:gravity="left"
android:text="TextView"
android:textSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
2.音乐页面横向布局
RecycleView实现横向布局,只需要设置参数horizontal。
// 设置为横向布局
manager.setOrientation(LinearLayoutManager.HORIZONTAL);
Fragmen2变动:
private Fragment2Binding binding2;
List<String> list2;
// 图片地址
List<Integer> imgList = Arrays.asList(R.drawable.album1, R.drawable.album2, R.drawable.album3, R.drawable.album4,
R.drawable.album5, R.drawable.album6, R.drawable.album7, R.drawable.album8, R.drawable.album9,
R.drawable.album10, R.drawable.album11, R.drawable.album12, R.drawable.album13, R.drawable.album14);
Context context2;
RecyclerView recyclerView2;
MyAdapter2 myadapter2;
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
binding2 = Fragment2Binding.inflate(inflater,container,false);
View view = binding2.getRoot();
context2 = view.getContext();
recyclerView2=binding2.recyclerView2;
list2 = new ArrayList<>();
// 初始化数据方法,需自定义
initData();
LinearLayoutManager manager=new LinearLayoutManager(context2);
recyclerView2.setLayoutManager(manager);
// 设置为横向布局
manager.setOrientation(LinearLayoutManager.HORIZONTAL);
// DividerItemDecoration的实现类用于实现分割线
// 我们需要自己实现ItemDecoration接口
DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(context2,DividerItemDecoration.HORIZONTAL);
recyclerView2.addItemDecoration(dividerItemDecoration);
// 新建一个RecyclerView的适配器,并传入数据
myadapter2 = new MyAdapter2(list2,imgList, context2);
recyclerView2.setAdapter(myadapter2);
return view;
}
Fragme2的适配器MyAdapter2
适配器写法基本相同,这次的适配器重点在于,Fragment2传入了一个图片地址的列表,我们需要根据列表获取图片:
public class MyAdapter2 extends RecyclerView.Adapter<MyAdapter2.MyHolder2> {
Context context2;
List<String> list2;
List<Integer> image;
public MyAdapter2(List<String> list, List<Integer> image, Context context){
this.list2 = list;
this.image = image;
this.context2 = context;
}
public void onBindViewHolder(@NonNull MyHolder2 holder2, int position) {
holder2.albumView.setText(list2.get(position));
// 根据图片地址列表获取图片
holder2.imageView.setImageResource(image.get(position));
}
新增的XML文件
和MyAdapter2绑定的item2.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="match_parent"
android:gravity="center"
android:orientation="vertical"
android:id="@+id/albumLayout1"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
>
<TextView
android:id="@+id/albumView"
android:layout_width="match_parent"
android:layout_height="201dp"
android:layout_weight="1"
android:gravity="center"
android:text="TextView"
android:textSize="30dp" />
<ImageView
android:id="@+id/albumImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/album1" />
</LinearLayout>
三、关键技术分析
Intent
-为了实现页面跳转,我们需要用到Intent技术
在安卓开发中,Intent 是一个非常重要的概念,它的主要作用是用来描述一个操作的动作和目标。简单来说,Intent 可以用来启动活动(Activity)、传递数据(Data)以及请求操作(Action)。
- 启动活动(Activity):通过 Intent,可以启动一个或多个 Activity。例如,当你点击一个应用程序的图标时,系统会创建一个Intent,这个 Intent 的动作是 “MAIN”,并且目标就是这个应用程序的主 Activity。
- 传递数据(Data):Intent 也可以用来传递数据。例如,当你从一个 Activity 跳转到另一个 Activity 时,你可以通过Intent 将数据从源 Activity 传递到目标 Activity。
- 请求操作(Action):Intent还可以用来请求操作。例如,你可以创建一个带有 “ACTION_VIEW” 动作的 Intent,并传递给一个可以处理这个动作的BroadcastReceiver,这样就可以触发一个特定的操作。
总的来说,Intent 在 Android 中是一个非常强大的工具,它可以帮助你控制应用程序的不同部分以及不同应用程序之间的交互。
总结
在本次作业中,无法解决图片的传输,对于安卓中许多基础概念还是有许多欠缺。最后,在本质上,选择了传输图片名然后再在最终视图中查找图片的方法,也勉强达到了传输图片的效果。在数据输入中,使用本地图片和手写输入数据显得十分笨拙,后面希望学会使用web接口传输图片和数据。
本人的作业的完成度还是十分之低,大家敬请期待吧。。。。