微信的门户页面框架设计（AS）

shyhigh

已于 2023-11-12 16:16:46 修改

阅读量85

点赞数

文章标签：微信 gitee

于 2023-10-16 13:55:18 首次发布

本文链接：https://blog.csdn.net/qq_64228308/article/details/133856184

版权

作业1: App门户页面设计与开发

1、请根据课程内容设计一个app的门户框架，需要实现3-4个tab切换效果；本功能要求需要的技术为：activity、xml、fragment

2、在任一tab页中实现列表效果；本功能的实现需要使用recycleview；

一.设计目标：

1.完成基本的微信页面布局设计，包括顶部显示栏，和底部导航栏（四个tab页包括微信、朋友、发现、我）。

2.利用fragment（分段）、activity完善门户页面的框架设计，实现四个页面的切换，点击相应的导航键，便可以切换到该页面，相应的图标也发生改变，并对控件进行监听。

二.设计流程：

1.制作底部导航栏bottom.xml

点击 res-layout 新建xml文件

bottom平均分成四块，每块由一个图片和一个文字构成。可以用水平的LinearLayout中再包裹一个竖直的LinearLayout，被包裹的每个LinearLayout里包含一个ImageButton和TextView控件。

准备两组八张图标存放在res-drawable。

添加bottom.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:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@color/purple_200"
    android:clickable="false"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/linearlayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:layout_height="57dp"
            android:src="@drawable/a_original"
            tools:srcCompat="@drawable/a_original" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/black"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearlayout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="103dp"
            android:layout_height="60dp"
            android:src="@drawable/b_original"
            tools:srcCompat="@drawable/b_original" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="朋友"
            android:textColor="@color/black"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearlayout3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="103dp"
            android:layout_height="63dp"
            android:src="@drawable/c_original"
            tools:srcCompat="@drawable/c_original" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="发现"
            android:textColor="@color/black"
            android:textSize="23sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearlayout4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:clickable="true"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView4"
            android:layout_width="match_parent"
            android:layout_height="62dp"
            android:src="@drawable/d_original"
            tools:srcCompat="@drawable/d_original" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="我"
            android:textColor="@color/black"
            android:textSize="23sp" />
    </LinearLayout>

</LinearLayout>

代码解析：

外部LinearLayout：android:orientation=“horizontal”，布局中组件的排列方式，有horizontal（水平）和vertical（垂直）两种方式。

内部ImageView：tools:srcCompat="@drawable"，vector绘制图片的地址。

功能说明（布局展示）：

2.制作顶部的top.xml,在res-layout新建一个xml文件：

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"
android:background="@color/purple_200">

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="微信"
android:textColor="@color/black"
android:textSize="30sp" />
</LinearLayout>

代码解析：

android:id="@+id/textView2"，为组件设置一个资源id，在java文件中可以通过findViewById(id)找到该组件。

android:layout_width=“wrap_content”，布局的宽度，通常不直接写数字，用wrap_content（组件实际大小），fill_parent或者match_parent填满父容器。

android:layout_height=“wrap_content”，布局的高度，参数同上。

android:layout_weight=“1”，用来等比例地划分区域。

android:background="@color/purple_200"，为组件设置一个背景图片，或者直接用颜色覆盖。

android:gravity=“center”,表示textView中的文字相对于TextView的对齐方式。

android:text=“微信”,要显示的文字。

android:textColor="@color/black"，设置文字的颜色。

android:textSize=“30sp” />，设置文字的大小。

功能说明（布局展示）：

3.activity_main的配置

添加activity_main.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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<include layout="@layout/top"/>

<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">

</FrameLayout>

<include layout="@layout/bottom" />
</LinearLayout>

代码解析：

相关的属性作用和bottom.xml以及top.xml类似。

功能说明（布局展示）：

对主页面显示的内容布局。整个主页面使用竖直的LinerLayout，将top.xml和bottom.xml导入，以及中间内容content（对应Fragment）。

4.创建Fragment

在java目录下创建四个fragment类，Fragment1(微信)、Fragment2(朋友)、3Fragment(发现)、Fragment4(我)，系统会自动在res-layout目录下生成四个对应的xml文件（可自主命名），对应bottom的四个按钮。

以kFragment1(朋友)为例，配置相关代码

package Com.example.project1;



import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Fragment1 extends Fragment {



    public Fragment1() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_1, container, false);
    }
}

配置Fragment1对应的xml文件代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信界面"
        android:textSize="30sp"/>

</LinearLayout>

5.配置MainActivity

5.1声明所需要的变量

private Fragment hTab01 = new Fragment1();
private Fragment hTab02 = new Fragment2();
private Fragment hTab03 = new Fragment3();
private Fragment hTab04 = new Fragment4();

private LinearLayout hTabWeChat;
private LinearLayout hTabFrd;
private LinearLayout hTabContact;
private LinearLayout hTabMe;

private ImageView imageWeixin,imagepengyou,imagefaxian, imagewo;

private FragmentManager fm;
private TextView textView;

代码解析：

Fragment变量：对应创建的Fragment ，FragmentManager变量：管理Fragment的类
ImageView变量：对应之前创建的ImageView，LinearLayout变量：对应之前创建的LinearLayout

5.2 利用FragmentManager对Fragment进行管理，实现页面切换

将所有的Fragment添加进去：

private void initFragment() {
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.beginTransaction();
transaction.add(R.id.content, hTab01);
transaction.add(R.id.content, hTab02);
transaction.add(R.id.content, hTab03);
transaction.add(R.id.content, hTab04);
transaction.commit();
}
页面的切换（功能）：

private void showfragment(int i){
    FragmentTransaction transaction=fm.beginTransaction();
    hideFragment(transaction);
    switch (i){
        case 0:
            textView.setText("微信");
            transaction.show(hTab01);
            imageWeixin.setImageResource(R.drawable.a_original);
            break;

        case 1:
            textView.setText("朋友");
            transaction.show(hTab02);
            imagepengyou.setImageResource(R.drawable.b_original);
            break;

        case 2:
            textView.setText("发现");
            transaction.show(hTab03);
            imagefaxian.setImageResource(R.drawable.c_original);
            break;

        case 3:
            textView.setText("我");
            transaction.show(hTab04);
            imagewo.setImageResource(R.drawable.d_original);
            break;

        default:
            break;
    }
    transaction.commit();
}

为了使所有Fragment不会发生重叠，将所有Fragment都隐藏（功能）：

private void hideFragment(FragmentTransaction transaction) {
    transaction.hide(hTab01);
    transaction.hide(hTab02);
    transaction.hide(hTab03);
    transaction.hide(hTab04);

}

5.3 完成事件的触发

事件触发代码：

private void initEvent() {
hTabWeChat.setOnClickListener(this);
hTabFrd.setOnClickListener(this);
hTabContact.setOnClickListener(this);
hTabMe.setOnClickListener(this);
}
点击相应按钮的响应函数

public void onClick(View v) {
    resetImage();
    int viewId = v.getId();

    if (viewId == R.id.linearlayout1) {
        showfragment(0);
    } else if (viewId == R.id.linearlayout2) {
        showfragment(1);
    } else if (viewId == R.id.linearlayout3) {
        showfragment(2);
    } else if (viewId == R.id.linearlayout4) {
        showfragment(3);
    }
}

5.4 实现点击后的按钮切换

public void resetImage(){
    imageWeixin.setImageResource(R.drawable.a_original);
    imagepengyou.setImageResource(R.drawable.b_original);
    imagefaxian.setImageResource(R.drawable.c_original);
    imagewo.setImageResource(R.drawable.d_original);
}

5.5 主函数调用

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);

    textView=findViewById(R.id.textView2);

    hTabWeChat =findViewById(R.id.linearlayout1);
    hTabFrd =findViewById(R.id.linearlayout2);
    hTabContact =findViewById(R.id.linearlayout3);
    hTabMe =findViewById(R.id.linearlayout4);

    imageWeixin=findViewById(R.id.imageView1);
    imagepengyou=findViewById(R.id.imageView2);
    imagefaxian=findViewById(R.id.imageView3);
    imagewo =findViewById(R.id.imageView4);

    initEvent();
    initFragment();
    showfragment(0);
}

5.6 完整的MainActivity代码

package Com.example.project1;
import android.annotation.SuppressLint;


import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment hTab01 = new Fragment1();
    private Fragment hTab02 = new Fragment2();
    private Fragment hTab03 = new Fragment3();
    private Fragment hTab04 = new Fragment4();

    private LinearLayout hTabWeChat;
    private LinearLayout hTabFrd;
    private LinearLayout hTabContact;
    private LinearLayout hTabMe;

    private ImageView imageWeixin,imagepengyou,imagefaxian, imagewo;

    private FragmentManager fm;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        textView=findViewById(R.id.textView2);

        hTabWeChat =findViewById(R.id.linearlayout1);
        hTabFrd =findViewById(R.id.linearlayout2);
        hTabContact =findViewById(R.id.linearlayout3);
        hTabMe =findViewById(R.id.linearlayout4);

        imageWeixin=findViewById(R.id.imageView1);
        imagepengyou=findViewById(R.id.imageView2);
        imagefaxian=findViewById(R.id.imageView3);
        imagewo =findViewById(R.id.imageView4);

        initEvent();
        initFragment();
        showfragment(0);
    }


    private void initFragment() {
        fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.content, hTab01);
        transaction.add(R.id.content, hTab02);
        transaction.add(R.id.content, hTab03);
        transaction.add(R.id.content, hTab04);
        transaction.commit();
    }



    private void showfragment(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                textView.setText("微信");
                transaction.show(hTab01);
                imageWeixin.setImageResource(R.drawable.a_original);
                break;

            case 1:
                textView.setText("朋友");
                transaction.show(hTab02);
                imagepengyou.setImageResource(R.drawable.b_original);
                break;

            case 2:
                textView.setText("发现");
                transaction.show(hTab03);
                imagefaxian.setImageResource(R.drawable.c_original);
                break;

            case 3:
                textView.setText("我");
                transaction.show(hTab04);
                imagewo.setImageResource(R.drawable.d_original);
                break;

            default:
                break;
        }
        transaction.commit();
    }


    private void hideFragment(FragmentTransaction transaction) {
        transaction.hide(hTab01);
        transaction.hide(hTab02);
        transaction.hide(hTab03);
        transaction.hide(hTab04);

    }

    private void initEvent() {
        hTabWeChat.setOnClickListener(this);
        hTabFrd.setOnClickListener(this);
        hTabContact.setOnClickListener(this);
        hTabMe.setOnClickListener(this);
    }

    @SuppressLint("NonConstantResourceId")
    public void onClick(View v) {
        resetImage();
        int viewId = v.getId();

        if (viewId == R.id.linearlayout1) {
            showfragment(0);
        } else if (viewId == R.id.linearlayout2) {
            showfragment(1);
        } else if (viewId == R.id.linearlayout3) {
            showfragment(2);
        } else if (viewId == R.id.linearlayout4) {
            showfragment(3);
        }
    }


    public void resetImage(){
        imageWeixin.setImageResource(R.drawable.a_original);
        imagepengyou.setImageResource(R.drawable.b_original);
        imagefaxian.setImageResource(R.drawable.c_original);
        imagewo.setImageResource(R.drawable.d_original);
    }
}

新版Onclick无法用case只能用if_else

AndroidManifest.xml

<activity
    android:name="Com.example.project1.MainActivity"
    android:exported="true"
    android:label="@string/app_name"
    android:theme="@style/Theme.AppCompat">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

AndroidManifest.xml中要加入 android:theme="@style/Theme.AppCompat">指定style字样

三运行结果

3.1运行环境：

操作系统：Windows 11 家庭中文版

编译器：Android Studio 2023.3.1.patch1

3.2 运行结果：

运行后点击微信、朋友、发现、我的效果，可以看到界面和图标都发生了相应的切换。

然后加入recycleview列表

1.建立item.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">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="TextView"
        android:textColor="@color/purple_200"
        android:textSize="35sp" />
</LinearLayout>

2.重新写fragement1.java

package Com.example.project1;

import android.content.Context;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;


public class Fragment1 extends Fragment{

    Context context;
    RecyclerView recyclerView;
    View view;
    List list;

    @Override
    public View onCreateView  (LayoutInflater inflater, ViewGroup container,
                              Bundle savedInstanceState) {

        View view=inflater.inflate(R.layout.fragment_1,container,false);
        context=view.getContext();

        recyclerView=view.findViewById(R.id.recyclerview);
        list=new ArrayList();
        for(int i=0;i<10;i++){
            list.add("这是第"+i+"行数据");
        }

        Myadapter myadapter = new Myadapter(context,list);
        recyclerView.setAdapter(myadapter);
        LinearLayoutManager manager=new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);


        return view;
    }

}

对应的xml

<?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:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Fragment1">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

效果：

文件夹

现在加入点击展示新的view

新的fragement1.java

package Com.example.project1;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.Context;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class Fragment1 extends Fragment implements MyAdapter.OnItemClickListener {

    private Context context;
    private RecyclerView recyclerView;
    private View view;
    private List<Superhero> superheroList;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_1, container, false);
        context = getContext();  // 使用 getContext() 获取上下文

        recyclerView = view.findViewById(R.id.recyclerview);
        superheroList = new ArrayList<>();
        superheroList.add(new Superhero("Spiderman", R.drawable.spiderman, getString(R.string.spiderman_intro)));
        superheroList.add(new Superhero("Batman", R.drawable.batman, getString(R.string.batman_intro)));

        MyAdapter myAdapter = new MyAdapter(context, superheroList, this);
        recyclerView.setAdapter(myAdapter);

        LinearLayoutManager manager = new LinearLayoutManager(context);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(manager);

        return view;
    }

    @Override
    public void onItemClick(Superhero superhero) {
        // 创建 AlertDialog.Builder 对象
        AlertDialog.Builder builder = new AlertDialog.Builder(context);

        // 设置对话框标题和消息
        builder.setTitle(superhero.getName())
                .setMessage(superhero.getIntro())

                // 添加 "OK" 按钮，点击时关闭对话框
                .setPositiveButton("OK", (dialog, id) -> dialog.dismiss());

        // 创建并显示对话框
        AlertDialog dialog = builder.create();
        dialog.show();
    }


    public void onItemClick(String data) {

    }
}

对应的xml

<!-- fragment_1.xml -->

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/introTextView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/recyclerview"
        android:layout_marginTop="16dp"
        android:padding="16dp"
        android:textSize="18sp" />

</RelativeLayout>

item.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- item.xml -->

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:text="Default Text"
        android:textSize="18sp"
        android:gravity="center_vertical" />

</LinearLayout>

string.xml 中要声明

<string name="spiderman_intro">平凡的英雄</string>
<string name="batman_intro">有钱又有病的英雄</string>

Superhero.java

// Superhero.java
package Com.example.project1;

public class Superhero {
    private String name;
    private int imageResource;
    private String intro;

    public Superhero(String name, int imageResource, String intro) {
        this.name = name;
        this.imageResource = imageResource;
        this.intro = intro;
    }

    public String getName() {
        return name;
    }

    public int getImageResource() {
        return imageResource;
    }

    public String getIntro() {
        return intro;
    }
}

MyAdapter.java

package Com.example.project1;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyHolder> {

    private Context context;
    private List<Superhero> dataList;
    private OnItemClickListener onItemClickListener;

    public MyAdapter(Context context, List<Superhero> list, OnItemClickListener onItemClickListener) {
        this.context = context;
        this.dataList = list;
        this.onItemClickListener = onItemClickListener;
    }

    @NonNull
    @Override
    public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.item, parent, false);
        return new MyHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull MyHolder holder, int position) {
        holder.superhero = dataList.get(position);
        holder.textView.setText(holder.superhero.getName());
        holder.imageView.setImageResource(holder.superhero.getImageResource());

        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (onItemClickListener != null) {
                    onItemClickListener.onItemClick(holder.superhero);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return dataList.size();
    }

    public interface OnItemClickListener {
        void onItemClick(Superhero superhero);
    }

    public static class MyHolder extends RecyclerView.ViewHolder {
        TextView textView;
        ImageView imageView;
        Superhero superhero;

        public MyHolder(@NonNull View itemView) {
            super(itemView);
            textView = itemView.findViewById(R.id.textView1);
            imageView = itemView.findViewById(R.id.imageView1);
        }
    }
}