Android开发-Pokémon界面设计

实现效果图

 

二、功能说明：

APP基础页面包括以下三个内容：首页（3-4个tab页面），列表页面，详情页面。从首页可以点击进入列表页面，点击列表的某一行可以进入详情页面；

三、功能实现

整体结构

 在 Android 开发中，Fragment 是一种可以嵌入到 Activity 中的 UI 组件，旨在帮助开发者实现灵活的、模块化的界面布局。你可以把 Fragment 看作是一个可以在不同的 Activity 中重复使用的界面片段。它本质上是一个小型的、可复用的 UI 部件，具有自己的生命周期、视图和事件处理机制。通过使用 Fragment，开发者可以在不同的屏幕尺寸（如手机与平板）上更高效地构建动态界面。

我们定义了四个fragment，分别对应着四个tab页面

Center用来展示pokemon最近发生的一些游戏热文，比如公告等等。

 

第二个tab页面是pokemon图鉴，第一个是妙蛙种子的图鉴，我做了三个，可以上下滑动查看详情，也可以向右滑动，切换神奇宝贝

 

 页面设计

layout_top.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="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:srcCompat="@drawable/img" />
</LinearLayout>

顶部横幅我加入了一张图片，使界面更加好看。

 layout_botton.xml

这个使四个tab页面的设计，整体采用水平架构

lauout_item.xml

这个主要是用来填充数据的，用来展示宝可梦。

gragment.xml

主要对应着四个fragment的页面设计

主要的是fragment2

fragment2

1. 布局初始化

• 在 onCreateView 方法中，Fragment2 加载了一个布局 R.layout.activity_main_adapte，并通过 LayoutInflater 将该布局绑定到视图中。

2. RecyclerView

• Fragment2 使用了一个 RecyclerView 来展示数据。RecyclerView 被设置为水平滚动（LinearLayoutManager.HORIZONTAL），并使用自定义的适配器 adapter 来展示数据。
• 数据是由一个 List<Map<String, Object>> 组成，其中包含了宝可梦（pokemon）的图片、精华（jinghua）、名字（price）以及配置（config）。这些数据来自数组 pokemon、jinghua、price 和 config。

3. 服务绑定（MusicService）

• 在 Fragment2 中，代码通过 bindService 方法绑定了一个名为 MusicService 的服务，绑定后可以通过 ServiceConnection 获取服务的 Binder 对象。
• MusicService.Mybinder 用于与服务交互，服务连接成功后调用 mybinder.todo() 方法。

4. ServiceConnection

• ServiceConnection 负责处理服务的连接与断开。
  • onServiceConnected 方法：服务成功连接时，保存服务的 Binder 对象，并调用 todo() 方法。
  • onServiceDisconnected 方法：服务断开时，清空 mybinder。

5. RecyclerView 设置

• RecyclerView 使用 LinearLayoutManager 布局管理器来设置列表的布局方式（横向滚动）。
• adapter 作为适配器，将数据绑定到 RecyclerView 中，提供每个项目的显示内容。

 对应的数据传递

 adapter将内容链接绑定到xml文件，从而实现内容的更新。

 当然必不可少的还有music服务

package com.example.myapplication1;

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import androidx.activity.EdgeToEdge;
//import android.view.View;
//import android.media.MediaParser;
//import androidx.core.graphics.Insets;
//import androidx.core.view.ViewCompat;
//import androidx.core.view.WindowInsetsCompat;
public class MusicActivity_music extends AppCompatActivity {
    void midToast(String str, int showTime) {
        LayoutInflater inflater = getLayoutInflater();
        View layout = inflater.inflate(R.layout.custom_toast, null);

        TextView text = layout.findViewById(R.id.toast_message);
        text.setText(str);

        Toast toast = new Toast(getApplicationContext());
        toast.setDuration(showTime);
        toast.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 100); // 设置在底部
        toast.setView(layout);
        toast.show();
    }
    Button button1, button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_music);

        button1 = findViewById(R.id.button_music1);
        button2 = findViewById(R.id.button_music2);

        Intent intent = new Intent(MusicActivity_music.this, MusicService.class);

        button1.setOnClickListener(view -> {
            startService(intent); // 启动服务
            midToast("Music Service Started", Toast.LENGTH_SHORT); // 弹出 Toast
        });

        button2.setOnClickListener(view -> {
            stopService(intent); // 停止服务
            midToast("Music Service Stopped", Toast.LENGTH_SHORT); // 弹出 Toast
        });
    }
}

源代码：

GitHub - Breeze1127/app: android