如何通过同一ImageView实现布局的显示与隐藏切换？

嘿，这个需求很典型，实现起来一点不难，我给你一步步拆解：

步骤1：编写布局XML文件 #

首先得把布局结构搭好——两个布局容器（这里用LinearLayout举例，你也可以换成RelativeLayout/ConstraintLayout），第一个默认显示，第二个默认隐藏，再放一个可点击的ImageView用来触发切换：

<?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">

    <!-- 第一个默认显示的布局 -->
    <LinearLayout
        android:id="@+id/firstLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f0f0f0"
        android:padding="16dp"
        android:visibility="visible">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一个布局（默认显示）" />
    </LinearLayout>

    <!-- 第二个默认隐藏的布局 -->
    <LinearLayout
        android:id="@+id/secondLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#e0e0e0"
        android:padding="16dp"
        android:visibility="gone">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第二个布局（默认隐藏）" />
    </LinearLayout>

    <!-- 切换用的ImageView -->
    <ImageView
        android:id="@+id/toggleImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_expand" <!-- 初始展开图标 -->
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="16dp"
        android:clickable="true"
        android:focusable="true" />

</LinearLayout>

步骤2：在Activity中实现核心切换逻辑 #

我们需要一个布尔变量来记录第二个布局的显示状态，每次点击ImageView就切换这个状态，同步更新布局可见性和图标。这里分两种主流写法：

写法1：Kotlin + ViewBinding（官方推荐） #

首先要在模块的build.gradle里开启ViewBinding：

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

然后在Activity里写逻辑：

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.yourpackage.databinding.ActivityMainBinding // 替换成你的包名对应的Binding类
import android.view.View

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private var isSecondLayoutVisible = false // 初始为隐藏状态

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

        // 给ImageView设置点击事件
        binding.toggleImageView.setOnClickListener {
            // 切换状态标记
            isSecondLayoutVisible = !isSecondLayoutVisible

            // 更新第二个布局的可见性
            binding.secondLayout.visibility = if (isSecondLayoutVisible) {
                View.VISIBLE
            } else {
                View.GONE
            }

            // 切换ImageView的图标
            binding.toggleImageView.setImageResource(
                if (isSecondLayoutVisible) {
                    R.drawable.ic_collapse // 收起图标
                } else {
                    R.drawable.ic_expand // 展开图标
                }
            )
        }
    }
}

写法2：Java + findViewById #

如果还在使用Java，也可以这么写：

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {
    private LinearLayout secondLayout;
    private ImageView toggleImageView;
    private boolean isSecondLayoutVisible = false;

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

        // 绑定控件
        secondLayout = findViewById(R.id.secondLayout);
        toggleImageView = findViewById(R.id.toggleImageView);

        // 设置点击事件
        toggleImageView.setOnClickListener(v -> {
            // 切换状态
            isSecondLayoutVisible = !isSecondLayoutVisible;

            // 更新布局可见性
            secondLayout.setVisibility(isSecondLayoutVisible ? View.VISIBLE : View.GONE);

            // 切换图标
            toggleImageView.setImageResource(isSecondLayoutVisible ? R.drawable.ic_collapse : R.drawable.ic_expand);
        });
    }
}

可选优化：保存屏幕旋转后的状态 #

默认情况下，屏幕旋转会重建Activity，导致状态丢失。如果想避免这个问题，可以加上状态保存逻辑：

Kotlin版本 #

override fun onSaveInstanceState(outState: Bundle) {
    super.onSaveInstanceState(outState)
    // 保存状态标记
    outState.putBoolean("isSecondLayoutVisible", isSecondLayoutVisible)
}

override fun onRestoreInstanceState(savedInstanceState: Bundle) {
    super.onRestoreInstanceState(savedInstanceState)
    // 恢复状态
    isSecondLayoutVisible = savedInstanceState.getBoolean("isSecondLayoutVisible")
    // 同步更新布局和图标
    binding.secondLayout.visibility = if (isSecondLayoutVisible) View.VISIBLE else View.GONE
    binding.toggleImageView.setImageResource(if (isSecondLayoutVisible) R.drawable.ic_collapse else R.drawable.ic_expand)
}

Java版本 #

@Override
protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    outState.putBoolean("isSecondLayoutVisible", isSecondLayoutVisible);
}

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
    super.onRestoreInstanceState(savedInstanceState);
    isSecondLayoutVisible = savedInstanceState.getBoolean("isSecondLayoutVisible");
    secondLayout.setVisibility(isSecondLayoutVisible ? View.VISIBLE : View.GONE);
    toggleImageView.setImageResource(isSecondLayoutVisible ? R.drawable.ic_collapse : R.drawable.ic_expand);
}

注意事项 #

• 记得在drawable文件夹里准备好ic_expand和ic_collapse两个图标，可以用Android Studio的「File → New → Vector Asset」工具生成系统自带的展开/收起图标，非常方便。
• 如果使用ViewBinding，一定要确保包名替换正确，不然会找不到Binding类。

这样就完美实现你要的功能啦😉

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