Android布局疑问：如何实现图片全在第一列、文本全在第二列？

问题说明 #

我有一组图片资源和对应的名称列表，想要实现所有图片在第一列CardView垂直排列，所有名称在第二列CardView垂直排列的布局，但当前实际布局不符合预期。

问题根源 #

当前布局逻辑存在冲突：

1. 给RecyclerView设置了GridLayoutManager(requireContext(),2)，让整个列表强制分成2列
2. 同时每个item布局(item_practise_cards.xml)又是一个2列的GridLayout，导致每个item占据一行的两列，最终呈现出"每行一对图片+名称"的效果，而非左右两列分别垂直排列所有图片和名称。

修正方案 #

1. 修改主布局fragment_practise.xml #

将单一RecyclerView替换为横向LinearLayout，内部包含两个垂直RecyclerView，分别对应图片列和名称列：

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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/flash_tablebar"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        android:layout_alignParentTop="true">

        <ImageView
            android:id="@+id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:src="@drawable/ic_arrow_back" />
    </androidx.appcompat.widget.Toolbar>

    <!-- 横向容器，承载左右两列RecyclerView -->
    <LinearLayout
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:padding="16dp"
        android:layout_marginTop="10dp">

        <!-- 左侧图片列 -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewImages"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:paddingEnd="8dp"
            tools:listitem="@layout/item_image_card" />

        <!-- 右侧名称列 -->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewNames"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:paddingStart="8dp"
            tools:listitem="@layout/item_name_card" />
    </LinearLayout>

</RelativeLayout>

2. 创建图片卡片单独布局item_image_card.xml #

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cardImagePractise"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground">

    <ImageView
        android:id="@+id/imageViewPractise"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop" />
</androidx.cardview.widget.CardView>

3. 创建名称卡片单独布局item_name_card.xml #

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/cardTextPractise"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="4dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground">

    <TextView
        android:id="@+id/textViewPractise"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:gravity="center"
        android:text="Random Name"
        android:textSize="18sp" />
</androidx.cardview.widget.CardView>

4. 修改PractiseFragment.kt逻辑 #

分别为两个RecyclerView配置适配器，传递对应的图片列表和名称列表：

package com.example.visuallithuanian.ui.activities.fragments

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.MenuItem
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.example.visuallithuanian.R
import com.example.visuallithuanian.adapter.ImageAdapter
import com.example.visuallithuanian.adapter.NameAdapter
import com.example.visuallithuanian.databinding.FragmentPractiseBinding
import dagger.hilt.android.AndroidEntryPoint

@AndroidEntryPoint
class PractiseFragment : Fragment() {
    lateinit var binding: FragmentPractiseBinding
    private lateinit var imageResources: List<Int>
    private lateinit var shuffledNames: List<String>

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentPractiseBinding.inflate(inflater, container, false)

        (requireActivity() as AppCompatActivity).setSupportActionBar(binding.toolbar)
        (requireActivity() as AppCompatActivity).supportActionBar?.setDisplayHomeAsUpEnabled(true)

        populateData()

        // 初始化图片列RecyclerView
        binding.recyclerViewImages.layoutManager = LinearLayoutManager(requireContext())
        binding.recyclerViewImages.adapter = ImageAdapter(imageResources) { position ->
            // 处理图片卡片点击逻辑
        }

        // 初始化名称列RecyclerView
        binding.recyclerViewNames.layoutManager = LinearLayoutManager(requireContext())
        binding.recyclerViewNames.adapter = NameAdapter(shuffledNames) { position ->
            // 处理名称卡片点击逻辑
        }

        return binding.root
    }

    private fun populateData() {
        imageResources = listOf(
            R.drawable.africa,
            R.drawable.asia,
            R.drawable.europe,
            R.drawable.antartica,
            R.drawable.australia
        )

        shuffledNames = listOf(
            "Africa",
            "Asia",
            "Europe",
            "Antarctica",
            "Australia"
        ).shuffled()
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when(item.itemId){
            android.R.id.home->{
                requireActivity().onBackPressed()
                return true
            }
        }
        return super.onOptionsItemSelected(item)
    }
}

5. 创建图片适配器ImageAdapter.kt #

package com.example.visuallithuanian.adapter

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.R

class ImageAdapter(
    private val imageList: List<Int>,
    private val onItemClick: (Int) -> Unit
) : RecyclerView.Adapter<ImageAdapter.ImageViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_image_card, parent, false)
        return ImageViewHolder(view)
    }

    override fun getItemCount(): Int = imageList.size

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        holder.imageView.setImageResource(imageList[position])
        holder.card.setOnClickListener { onItemClick(position) }
    }

    class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val card: CardView = itemView.findViewById(R.id.cardImagePractise)
        val imageView: ImageView = itemView.findViewById(R.id.imageViewPractise)
    }
}

6. 创建名称适配器NameAdapter.kt #

package com.example.visuallithuanian.adapter

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.R

class NameAdapter(
    private val nameList: List<String>,
    private val onItemClick: (Int) -> Unit
) : RecyclerView.Adapter<NameAdapter.NameViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): NameViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_name_card, parent, false)
        return NameViewHolder(view)
    }

    override fun getItemCount(): Int = nameList.size

    override fun onBindViewHolder(holder: NameViewHolder, position: Int) {
        holder.textView.text = nameList[position]
        holder.card.setOnClickListener { onItemClick(position) }
    }

    class NameViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val card: CardView = itemView.findViewById(R.id.cardTextPractise)
        val textView: TextView = itemView.findViewById(R.id.textViewPractise)
    }
}

上述修改后，即可实现左边一列垂直排列所有图片卡片、右边一列垂直排列所有名称卡片的预期布局。

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