类微信界面设计跳转

一.开发目的
在此前设计的微信app门户框架基础上实现在列表页上点击跳转到另一详情页面

二.技术说明
以下是一些关键的技术和组件：

1.Intent：Intent 是 Android 应用程序之间进行通信和数据传递的一种重要机制。我们可以使用 Intent 来启动新的 Activity，并向新的 Activity 传递数据。

2.XML布局：XML布局文件用于定义应用的界面布局，包括主界面、底部导航栏和各个选项卡的内容布局。这些XML文件指定了应用的外观和布局。

3.OnClickListener：OnClickListener 是一个接口，用于处理视图元素（如按钮、列表项等）的点击事件。

三.开发过程与关键代码解析：
1.详情页面布局
首先是要创建详情页面的布局，我准备在上方显示点击的列表页点击项(通过使用intent来实现传递数据到详情页面)，在下方输出对应的游戏详情。

原app游戏界面列表效果：

详情页面设计：

详情页面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:orientation="vertical">
    <FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp">
 
        <ImageView
            android:id="@+id/iv_gamedt_icon"
            android:layout_width="150dp"
            android:layout_height="80dp" />
 
 
        <TextView
            android:id="@+id/tv_gamedt_name"
            android:layout_width="220dp"
            android:layout_height="30dp"
            android:textSize="20dp"
            android:text=""
            android:gravity="left"
            android:layout_marginLeft="168dp" />
 
        <TextView
            android:id="@+id/tv_gamedt_type"
            android:layout_width="220dp"
            android:layout_height="20dp"
            android:layout_marginLeft="168dp"
            android:layout_marginTop="25dp"
            android:textSize="15dp"
            android:text=""/>
 
    </FrameLayout>
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:text="游戏详情:"
        android:textSize="30dp"/>
    <TextView
        android:id="@+id/tv_gamedt_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="20dp"/>
 
 
 
</LinearLayout>

现在的详情页面的骨架就大致完成了。

2.点击事件与数据传递：

首先我们需要在GameItemAdapter类中定义一个接口来表示列表项点击事件的监听器

然后添加一个成员变量用于存储点击事件监听器的实例

接着修改GameItemAdapter类的构造函数，以便传入点击事件监听器的实例

    // 添加接口定义
    public interface OnItemClickListener {
        void onItemClick(int position);
    }
 
    // 加一个成员变量用于存储点击事件监听器的实例。
    private OnItemClickListener onItemClickListener;
 
    //修改后的构造函数
        public GameItemAdapter(Context context, List<GameItem> gameItemList, OnItemClickListener onItemClickListener) {
        this.context = context;
        this.gameItemList = gameItemList;
        this.onItemClickListener = onItemClickListener;
    }
 

在onBindViewHolder方法中设置点击事件监听器

同时在点击事件的处理方法中创建一个intent，并将相关数据添加到intent的附加信息中，然后启动另外一个Activity

    @Override
    public void onBindViewHolder(@NonNull GameItemViewHolder holder, int position) {
        GameItem gameItem = gameItemList.get(position);
        holder.ivGameIcon.setImageResource(gameItem.getIconResId());
        holder.tvGameName.setText(gameItem.getName());
        holder.tvGameType.setText(gameItem.getType());
 
        // 为列表项设置点击事件监听器
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int adapterPosition = holder.getBindingAdapterPosition();
                if (onItemClickListener != null && adapterPosition != RecyclerView.NO_POSITION) {
                    // 获取被点击的游戏项数据
                    GameItem clickedGameItem = gameItemList.get(adapterPosition);
 
                    // 创建Intent
                    Intent intent = new Intent(context, GameDetailActivity.class);
 
                    // 将游戏项数据添加到Intent中
                    intent.putExtra("game_name", clickedGameItem.getName());
                    intent.putExtra("game_type", clickedGameItem.getType());
                    intent.putExtra("game_icon_res_id", clickedGameItem.getIconResId());
 
                    // 启动详细信息页面
                    context.startActivity(intent);
                }
            }
        });
    }

在GameFragment类中实现OnItemClickListener接口

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_game, container, false);
 
 
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_game, container, false);
 
        // 初始化RecyclerView
        recyclerView = view.findViewById(R.id.rcv_game);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
 
        // 创建游戏项目数据
        gameItemList = new ArrayList<>();
        gameItemList.add(new GameItem(R.drawable.game_image_0,"马里奥", "冒险\t"));
        gameItemList.add(new GameItem(R.drawable.game_image_1, "PUBG", "射击\t"));
        gameItemList.add(new GameItem(R.drawable.game_image_2, "愤怒的小鸟", "益智\t"));
        gameItemList.add(new GameItem(R.drawable.game_image_3, "我的世界", "益智\t"));
        gameItemList.add(new GameItem(R.drawable.game_image_4, "地铁跑酷", "休闲\t"));
        gameItemList.add(new GameItem(R.drawable.game_image_5, "星露谷物语", "休闲\t"));
 
        // 创建适配器并绑定数据到RecyclerView
        GameItemAdapter adapter = new GameItemAdapter(getContext(), gameItemList,this);
        recyclerView.setAdapter(adapter);
 
        return view;
 
 
    }
    @Override
    public void onItemClick(int position) {
        // 处理列表项的点击事件
        // 在这里可以启动详情页面或执行其他操作
    }
 
 
}
 
 现在在GameDetailActivity(游戏详情活动)中我们可以获取intent传递的数据，然后将这些数据设置到布局的对应视图元素上

        // 获取从前一个 Activity 传递的数据
        Intent intent = getIntent();
        String gameName = intent.getStringExtra("game_name");
        String gameType = intent.getStringExtra("game_type");
        int gameIconResId = intent.getIntExtra("game_icon_res_id", 0);
 
        // 获取布局中的视图元素
        ImageView gameIconImageView = findViewById(R.id.iv_gamedt_icon);
        TextView gameNameTextView = findViewById(R.id.tv_gamedt_name);
        TextView gameTypeTextView = findViewById(R.id.tv_gamedt_type);
        TextView gameDetailTextView = findViewById(R.id.tv_gamedt_detail);
 
        // 根据游戏名称查找对应的游戏详情
        String gameDetail = findGameDetail(gameName);
        gameDetailTextView.setText(gameDetail);
 
 
 
        // 设置数据到视图元素
        gameIconImageView.setImageResource(gameIconResId);
        gameNameTextView.setText(gameName);
        gameTypeTextView.setText(gameType);
 
    现在我们实现了点击事件与数据传递。

3.游戏详情

根据游戏名称来显示对应的游戏详情

    private String findGameDetail(String gameName) {
        for (GameDtailItem gameDetailItem : gameDtailItemList) {
            if (gameDetailItem.getGameName().equals(gameName)) {
                return gameDetailItem.getGameDetail();
            }
        }
        return "游戏详情未找到";
    }

 现在只缺少对应的游戏详情文本资源了，仿照最开始制作GameItem类的思路制作GameDtailItem类其中包含游戏名称和对应游戏详情以及获取方法

package items;
 
public class GameDtailItem {
    private String name;    // 游戏名称
    private String detail;    // 游戏详情
 
    public GameDtailItem(String name, String detail) {
        this.name = name;
        this.detail = detail;
    }
    public String getGameName() {
        return name;
    }
 
    public String getGameDetail() {
        return detail;
    }
}

最后创建游戏详情数据表

// 创建游戏详情数据
        gameDtailItemList = new ArrayList<>();
        gameDtailItemList.add(new GameDtailItem("马里奥","马力欧（早年常译作马里奥）是游戏《马力欧系列》中的角色。在《超级马力欧兄弟》中，他靠吃蘑菇变成超级马力欧，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易吉一起，长年担任任天堂的招牌角色。在任天堂官方网页的标签图片上就是FC时代的马力欧。"));
        gameDtailItemList.add(new GameDtailItem("地铁跑酷","《地铁跑酷》是由丹麦的SYBO Games公司开发，且由创梦天地在中国发行的一款跑酷躲避游戏，该游戏于2013年10月在iOS、Android平台上线。\n" + "游戏主线从三条铁轨上展开，玩家要以孩子Jake的身份不断在铁轨中穿梭来躲避列车，同时收集金币，躲避警察及猎狗的追捕。"));
        gameDtailItemList.add(new GameDtailItem("我的世界","《我的世界》（Minecraft）是一款沙盒类电子游戏，开创者为马库斯·阿列克谢·泊松（Notch）。游戏由Mojang Studios维护，现隶属于微软Xbox游戏工作室。游戏最初于2009年5月17日作为Classic版本发布，并于2011年11月18日发布Java正式版。我的世界的游戏平台囊括桌面设备、移动设备和游戏主机。"));
        gameDtailItemList.add(new GameDtailItem("星露谷物语","《星露谷物语》是由ConcernedApe单人开发，并与《星界边境》的制作者Chucklefish一同参与发行的一款开放式乡村模拟经营类游戏。\n" +"游戏中玩家扮演继承了爷爷农场的“Stardew valley”主角开阔和经营整座小牧场。"));
        gameDtailItemList.add(new GameDtailItem("PUBG","《绝地求生》(PUBG) 是由韩国Krafton工作室开发的一款战术竞技型射击类沙盒游戏。2022年1月12日，该游戏于主机和PC上可免费下载游玩。"));
        gameDtailItemList.add(new GameDtailItem("愤怒的小鸟","《愤怒的小鸟》是由Rovio开发的一款休闲益智类游戏，于2009年12月首发于iOS平台。游戏以小鸟报复偷走鸟蛋的肥猪为背景，讲述了小鸟与肥猪的一系列故事。"));

这就实现了在列表页上点击跳转到另一详情页面

4.结果

点击后的游戏详情页：

四.线上仓库地址：

翁梓策/666