如何在GridView图片跳转的新Activity中显示对应图片专属文本

1. 自定义GridView的Item布局 #

创建grid_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="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <!-- 图片上方的专属文本 -->
    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:textColor="@android:color/black"
        android:paddingBottom="8dp"/>

    <!-- 展示的图片 -->
    <ImageView
        android:id="@+id/item_image"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"/>
</LinearLayout>

2. 准备数据模型 #

创建实体类GridItem.java，绑定每个项的文本和图片资源：

public class GridItem {
    private String itemText;
    private int itemImageResId;

    public GridItem(String itemText, int itemImageResId) {
        this.itemText = itemText;
        this.itemImageResId = itemImageResId;
    }

    public String getItemText() {
        return itemText;
    }

    public int getItemImageResId() {
        return itemImageResId;
    }
}

3. 自定义GridView适配器 #

替换原有适配器，适配自定义布局和数据模型：

public class GridAdapter extends BaseAdapter {
    private Context mContext;
    private List<GridItem> mItemList;

    public GridAdapter(Context context, List<GridItem> itemList) {
        mContext = context;
        mItemList = itemList;
    }

    @Override
    public int getCount() {
        return mItemList.size();
    }

    @Override
    public Object getItem(int position) {
        return mItemList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.grid_item, parent, false);
            holder = new ViewHolder();
            holder.itemText = convertView.findViewById(R.id.item_text);
            holder.itemImage = convertView.findViewById(R.id.item_image);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        // 绑定对应文本和图片
        GridItem currentItem = mItemList.get(position);
        holder.itemText.setText(currentItem.getItemText());
        holder.itemImage.setImageResource(currentItem.getItemImageResId());

        return convertView;
    }

    static class ViewHolder {
        TextView itemText;
        ImageView itemImage;
    }
}

4. 修改MainActivity的GridView配置 #

在MainActivity中初始化数据并绑定适配器，保留原有的跳转逻辑：

public class MainActivity extends AppCompatActivity {
    private GridView mGridView;
    private List<GridItem> mGridItems;

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

        mGridView = findViewById(R.id.grid_view);

        // 初始化文本-图片对应数据
        mGridItems = new ArrayList<>();
        mGridItems.add(new GridItem("花海", R.drawable.flower_field));
        mGridItems.add(new GridItem("雪山", R.drawable.snow_mountain));
        mGridItems.add(new GridItem("湖泊", R.drawable.lake));
        // 根据需求添加更多项

        // 设置自定义适配器
        GridAdapter adapter = new GridAdapter(this, mGridItems);
        mGridView.setAdapter(adapter);

        // 保留点击跳转逻辑，可额外传递文本到SingleView
        mGridView.setOnItemClickListener((parent, view, position, id) -> {
            GridItem item = mGridItems.get(position);
            Intent intent = new Intent(MainActivity.this, SingleViewActivity.class);
            intent.putExtra("image_res_id", item.getItemImageResId());
            intent.putExtra("image_text", item.getItemText());
            startActivity(intent);
        });
    }
}

5. （可选）在SingleView页面显示文本 #

如果需要在跳转后的页面也展示对应文本，修改activity_single_view.xml添加TextView：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/single_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:paddingBottom="16dp"/>

    <ImageView
        android:id="@+id/single_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"/>
</LinearLayout>

然后修改SingleViewActivity的代码：

public class SingleViewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_single_view);

        TextView singleText = findViewById(R.id.single_text);
        ImageView singleImage = findViewById(R.id.single_image);

        Intent intent = getIntent();
        int imageResId = intent.getIntExtra("image_res_id", 0);
        String imageText = intent.getStringExtra("image_text");

        singleText.setText(imageText);
        singleImage.setImageResource(imageResId);
    }
}

内容的提问来源于stack exchange，提问作者Magnus Marks