Android Studio网格布局隐藏View后如何消除空单元格？

问题描述 #

我使用Kotlin和XML开发Android项目，设计了一个包含6个菜单的界面：

将名为“Chuti”的菜单设置为View.GONE后，界面出现空单元格：

期望其他菜单自动填充该空位：

当前Activity代码：

class ChutiActivity : AppCompatActivity() {
   private lateinit var binding : ActivityChutiBinding
   override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityChutiBinding.inflate(layoutInflater)
    setContentView(binding.root)

    binding.chutiTV.visibility = View.GONE
    }
}

解决方案 #

1. 使用RecyclerView实现动态网格（推荐） #

这种方式最适合动态调整的菜单，移除数据后自动重排：

步骤：

• 定义菜单数据类，将所有菜单存入列表
• 移除目标菜单条目后刷新RecyclerView

代码示例：

// 菜单数据类
data class MenuItem(val name: String)

class ChutiActivity : AppCompatActivity() {
    private lateinit var binding: ActivityChutiBinding
    private val menuList = mutableListOf(
        MenuItem("Menu1"),
        MenuItem("Menu2"),
        MenuItem("Chuti"),
        MenuItem("Menu3"),
        MenuItem("Menu4"),
        MenuItem("Menu5")
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityChutiBinding.inflate(layoutInflater)
        setContentView(binding.root)

        // 移除"Chuti"菜单
        menuList.removeAll { it.name == "Chuti" }
        // 配置RecyclerView
        binding.menuRecyclerView.apply {
            layoutManager = GridLayoutManager(this@ChutiActivity, 3) // 设置每行3个
            adapter = MenuAdapter(menuList)
        }
    }
}

// RecyclerView适配器
class MenuAdapter(private val items: List<MenuItem>) : RecyclerView.Adapter<MenuAdapter.ViewHolder>() {
    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val menuText: TextView = itemView.findViewById(R.id.menuTV)
    }

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

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.menuText.text = items[position].name
    }

    override fun getItemCount() = items.size
}

对应的item_menu布局示例：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/menuTV"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="16sp"/>

2. 使用ConstraintLayout流式链（静态布局适配） #

如果是静态布局，用ConstraintLayout的Flow组件实现自动流式排列，隐藏视图后自动填充空位：

布局代码示例：

<androidx.constraintlayout.widget.ConstraintLayout
    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="wrap_content"
    android:padding="16dp">

    <!-- 菜单视图 -->
    <TextView
        android:id="@+id/menu1TV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu1"
        android:padding="16dp"/>

    <TextView
        android:id="@+id/menu2TV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu2"
        android:padding="16dp"/>

    <TextView
        android:id="@+id/chutiTV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Chuti"
        android:padding="16dp"/>

    <TextView
        android:id="@+id/menu3TV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu3"
        android:padding="16dp"/>

    <TextView
        android:id="@+id/menu4TV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu4"
        android:padding="16dp"/>

    <TextView
        android:id="@+id/menu5TV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Menu5"
        android:padding="16dp"/>

    <!-- 流式链配置 -->
    <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/menuFlow"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="menu1TV,menu2TV,chutiTV,menu3TV,menu4TV,menu5TV"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintFlow_horizontalGap="16dp"
        app:layout_constraintFlow_verticalGap="16dp"
        app:layout_constraintFlow_maxElementsWrap="3" <!-- 每行最多3个 -->
        app:layout_constraintFlow_horizontalStyle="packed"/>
</androidx.constraintlayout.widget.ConstraintLayout>

此时在Activity中设置binding.chutiTV.visibility = View.GONE，剩余菜单会自动填充空位。

3. 静态GridLayout调整（不推荐） #

如果使用GridLayout，隐藏视图后需要手动调整后续视图的行列属性，维护成本高，示例：

// 隐藏Chuti后，把第4个菜单移到Chuti的位置，第5个移到第4个的位置，以此类推
binding.menu3TV.layoutParams = (binding.menu3TV.layoutParams as GridLayout.LayoutParams).apply {
    rowSpec = GridLayout.spec(0, 1)
    columnSpec = GridLayout.spec(2, 1)
}
// 其他视图同理调整

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