Android移动开发第一次作业
一、作业目标
- 在第一次的作业源码基础上，丰富代码，在列表页上点击跳到另一详情页面上。
- 具体在本例中的实现为：
点击第一个tab中的任意图片会通过Intent将点击图片的信息传送到另一个详情页面，同时跳转到详情页面显示对应的人物简介。
二、改进之处
- 优化上次作业的第一个页面代码，将其从简单的文字列表改进为图片瀑布流；
- 在图片瀑布流中添加点击图片切换到另一详情页面的功能；
- 优化上次作业的第二个页面代码，将点击后显示单张图片修改为显示多张可滑动图片。
二、技术说明
在本次改进中，我们主要采用以下技术：
- RecyclerView：官网指南
- RecyclerView是一个高度可定制的列表视图，用于展示大量数据的列表。
- 我们将使用RecyclerView来在一个标签页中展示列表效果，并实现列表项的显示和交互。
- Intent：官网指南
- Android开发中用于在不同组件之间进行通信的机制。
- 它可以用于启动Activity、Service、BroadcastReceiver等组件，以及传递数据和执行特定的操作。
- Intent可以分为两种类型：显式Intent（Explicit Intent）和隐式Intent（Implicit Intent）。
三、项目新增主要文件说明
- Java文件说明：
- Fragment1、Fragment2、Fragment3、Fragment4：四个Tab页面管理
- MainActivity1Binding：App主程序
- F1ImageAdapter、F2ImageAdapter：两个适配器分别对应Fragment1和2
- ActivityImageInfor：点击跳转的目的页面
- 布局文件说明：
- 在activity_main1.xml：整体布局框架
- top.xml：顶部布局
- buttom.xml：底部布局
- fragment1.xml、fragment2.xml、fragment3.xml、fragment4.xml：四个Tab页面的布局
- fragment1_item_image.xml、fragment2_item_image.xml：列表具体内容的布局
- activity_image_info.xml：跳转目的页面的布局
四、关键代码解析
在这里只对新增和修改的文件代码进行解析，其他代码解析可以查看上一次Blog 点击
- Fragment1.java
- 通过使用RecyclerView和瀑布流布局来展示图片列表
- 在getImages方法中通过反射获取图片资源，并将其添加到适配器中，以便在列表中显示。
public class Fragment1 extends Fragment {
private Fragment1Binding fragment1Binding;
ArrayList<Integer> imagelist = new ArrayList<>();
private RecyclerView recyclerView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
fragment1Binding = Fragment1Binding.inflate(inflater, container, false);
View view = fragment1Binding.getRoot();
recyclerView = fragment1Binding.recyclerView;
// 设置为两列的瀑布流布局
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
// 获取图片资源列表
getImages();
// 创建并设置图片适配器
F1ImageAdapter imageAdapter = new F1ImageAdapter(requireContext(), imagelist);
recyclerView.setAdapter(imageAdapter);
return view;
}
// 获取图片资源列
private void getImages() {
// 通过反射获取 R.drawable 类的所有字段
Field[] fields = R.drawable.class.getFields();
// 遍历所有字段
for (Field field : fields) {
try {
// 判断字段类型是否为整型
if (field.getType() == int.class) {
String fieldName = field.getName();
// 排除以"ic"开头、包含"re"和"16"的图片资源，需要根据你的图片名做修改
if (!fieldName.startsWith("ic") && !fieldName.contains("re") && !fieldName.contains("16")) {
// 获取图片资源的资源ID并添加到列表中
int resId = field.getInt(null);
imagelist.add(resId);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
@Override
public void onDestroyView() {
super.onDestroyView();
fragment1Binding = null;
}
}
- Fragment2.java
- 使用ListView显示运动员姓名列表，并在点击列表项时弹出选中运动员的姓名。
- 通过反射获取对应的图片资源列表，并在RecyclerView中显示这些图片。
public class Fragment2 extends Fragment {
private Fragment2Binding fragment2Binding;
ArrayList<String> list_name = new ArrayList<>();
ArrayList<String> list_mini_name = new ArrayList<>();
ArrayList<Integer> image_list = new ArrayList<>();
private ArrayAdapter<String> adapter;
private RecyclerView recyclerView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
fragment2Binding = Fragment2Binding.inflate(inflater, container, false);
View view = fragment2Binding.getRoot();
recyclerView = fragment2Binding.recyclerView;
// 添加运动员员姓名和缩写到列表中
list_name.add("马龙");
list_mini_name.add("ml");
list_name.add("樊振东");
list_mini_name.add("fzd");
list_name.add("孙颖莎");
list_mini_name.add("sys");
list_name.add("钱天一");
list_mini_name.add("qty");
// 创建适配器并设置给 ListView
adapter = new ArrayAdapter<>(getContext(), android.R.layout.simple_list_item_1, list_name);
fragment2Binding.listView.setAdapter(adapter);
fragment2Binding.listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
// 当点击列表项时，弹出选中球员的姓名
Toast.makeText(container.getContext(), list_name.get(position), Toast.LENGTH_SHORT).show();
// 根据选中的球员缩写获取对应的图片资源
getImages(list_mini_name.get(position));
// 创建并设置图片适配器
F2ImageAdapter f2ImageAdapter = new F2ImageAdapter(requireContext(), image_list);
recyclerView.setLayoutManager(new LinearLayoutManager(getContext(), LinearLayoutManager.VERTICAL, false));
recyclerView.setAdapter(f2ImageAdapter);
}
});
return view;
}
// 根据选中的球员缩写获取对应的图片资源
private void getImages(String target) {
// 通过反射获取 R.drawable 类的所有字段
Field[] fields = R.drawable.class.getFields();
// 清空图片资源列表
image_list.clear();
// 遍历所有字段
for (Field field : fields) {
try {
// 判断字段类型是否为整型
if (field.getType() == int.class) {
String fieldName = field.getName();
// 判断字段名是否以选中的球员缩写开头，并且不包含"re"和"16"，需要具体根据你的图片名做修改
if (fieldName.startsWith(target) && !fieldName.contains("re") && !fieldName.contains("16")) {
// 获取图片资源的资源ID并添加到列表中
int resId = field.getInt(null);
image_list.add(resId);
}
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
@Override
public void onDestroyView() {
super.onDestroyView();
fragment2Binding = null;
}
}
- F1ImageAdapter.java
- 该适配器类用于在RecyclerView中显示图片列表，并为每个图片项设置点击事件和圆角效果。
- 提供了适配器的基本功能，并通过自定义的ViewHolder类来处理每个列表项的操作和显示效果。
public class F1ImageAdapter extends RecyclerView.Adapter<F1ImageAdapter.ViewHolder> {
private Context context;
private List<Integer> imagelist;
public F1ImageAdapter(Context context, List<Integer> list) {
this.context = context;
this.imagelist = list;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 加载布局文件
View view = LayoutInflater.from(context).inflate(R.layout.fragment1_item_image, parent, false);
// 设置图片的宽度为屏幕的一半，并使用自适应高度
int widthPixels = context.getResources().getDisplayMetrics().widthPixels;
int imageWidth = widthPixels / 2;
ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
layoutParams.width = imageWidth;
view.setLayoutParams(layoutParams);
// 创建 ViewHolder 对象
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
// 获取当前位置的图片资源ID
Integer resId = imagelist.get(position);
// 绑定图片到 ImageView
holder.bindImage(resId);
}
@Override
public int getItemCount() {
// 返回图片资源列表的大小
return imagelist.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView imageView;
public ViewHolder(View view) {
super(view);
// 获取 ImageView 控件
imageView = view.findViewById(R.id.imageView);
if (this.imageView != null) {
// 设置点击事件
this.imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// 获取点击的图片位置
int position = getAdapterPosition();
// 获取点击的图片资源ID和名称
int resourceId = imagelist.get(position);
String imageName = context.getResources().getResourceEntryName(resourceId);
// 弹出提示信息
Toast.makeText(context, "您点击了图片" + imageName, Toast.LENGTH_SHORT).show();
// 跳转到图片详情界面，并将图片名称传递过去
Intent intent = new Intent(context, ActivityImageInfo.class);
Bundle bundle = new Bundle();
bundle.putString("name", imageName);
intent.putExtras(bundle);
context.startActivity(intent);
}
});
}
}
// 绑定图片到 ImageView，并设置圆角效果
public void bindImage(int resId) {
// 设置圆角半径
int radiusInPixels = 20;
// 从资源ID中解码图片
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resId);
// 创建圆角图片
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), bitmap);
roundedBitmapDrawable.setCornerRadius(radiusInPixels);
// 设置圆角图片到 ImageView
imageView.setImageDrawable(roundedBitmapDrawable);
}
}
}
- F2ImageAdapter.java
- 该适配器类用于在RecyclerView中显示图片列表，并为每个图片项设置圆角效果。
- 它提供了适配器的基本功能，并通过自定义的ViewHolder类来处理每个列表项的操作和显示效果。
public class F2ImageAdapter extends RecyclerView.Adapter<F2ImageAdapter.ViewHolder> {
private Context context;
private List<Integer> imagelist;
public F2ImageAdapter(Context context, List<Integer> list) {
this.context = context;
this.imagelist = list;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
// 加载布局文件
View view = LayoutInflater.from(context).inflate(R.layout.fragment1_item_image, parent, false);
// 创建 ViewHolder 对象
ViewHolder viewHolder = new ViewHolder(view);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
// 获取当前位置的图片资源ID
Integer resId = imagelist.get(position);
// 绑定图片到 ImageView
holder.bindImage(resId);
}
@Override
public int getItemCount() {
// 返回图片资源列表的大小
return imagelist.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
ImageView imageView;
public ViewHolder(View view) {
super(view);
// 获取 ImageView 控件
imageView = view.findViewById(R.id.imageView);
}
// 绑定图片到 ImageView，并设置圆角效果
public void bindImage(int resId) {
// 设置圆角半径
int radiusInPixels = 20;
// 从资源ID中解码图片
Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resId);
// 创建圆角图片
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), bitmap);
roundedBitmapDrawable.setCornerRadius(radiusInPixels);
// 设置圆角图片到 ImageView
imageView.setImageDrawable(roundedBitmapDrawable);
}
}
}
- ActivityImageInfo.java
- 根据传递的图片名称选择显示对应的图片和相关信息
public class ActivityImageInfo extends AppCompatActivity {
private ImageView imageView;
private TextView nameTextView, inforTextView;
private ActivityImageInfoBinding activityImageInfoBinding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 通过binding对象填充布局
activityImageInfoBinding = ActivityImageInfoBinding.inflate(getLayoutInflater());
setContentView(activityImageInfoBinding.getRoot());
// 从binding对象获取视图的引用
imageView = activityImageInfoBinding.imageView;
nameTextView = activityImageInfoBinding.textView1;
inforTextView = activityImageInfoBinding.textView2;
// 获取传递过来的图片名称
String imageName = getIntent().getStringExtra("name");
// 根据图片名称显示信息
showInfo(imageName);
}
private void showInfo(String imageName) {
if (imageName != null) {
String twospace = "\u3000\u3000";
// 通过条件来选择显示的图片内容
if (imageName.startsWith("ml")) {
showImage(R.drawable.ml23_16_9);
nameTextView.setText("人物简介：马龙--六边形战士");
inforTextView.setText("详细信息………………");
} else if (imageName.startsWith("fzd")) {
showImage(R.drawable.fzd7_16_9);
nameTextView.setText("人物简介：樊振东");
inforTextView.setText("详细信息………………");
} else if (imageName.startsWith("sys")) {
showImage(R.drawable.sys6_16_9);
nameTextView.setText("人物简介：孙颖莎");
inforTextView.setText("详细信息………………");
} else if (imageName.startsWith("qty")) {
showImage(R.drawable.qty6_16_9);
nameTextView.setText("人物简介：钱天一");
inforTextView.setText("详细信息………………");
}
}
}
private void showImage(int imageId) {
// 设置圆角效果
int radiusInPixels = 27; // 圆角半径，可以根据需要进行调整
Bitmap bitmap = BitmapFactory.decodeResource(activityImageInfoBinding.getRoot().getResources(), imageId);
// 创建圆角位图
RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(activityImageInfoBinding.getRoot().getResources(), bitmap);
roundedBitmapDrawable.setCornerRadius(radiusInPixels);
// 设置圆角图片
imageView.setImageDrawable(roundedBitmapDrawable);
}
}
- activity_image_info.xml
- 通过ScrollView使得过长的文字可以通过滚动来进行展示
<!-- 显示图片的ImageView -->
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<!-- 显示人物简介的TextView -->
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/stxinwei"
android:padding="8dp"
android:text="TextView"
android:background="#fedcbd"
android:textAppearance="@android:style/TextAppearance.Large"
android:textSize="27sp" />
<!-- 用于显示详细信息的ScrollView，以便支持滚动 -->
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- 显示详细信息的TextView -->
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/stkaiti"
android:background="#feeeed"
android:padding="2dp"
android:textSize="25sp" />
</ScrollView>
五、效果展示
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
