Android ConstraintLayout 按钮点击事件：上方显示三个按钮（无隐藏）

使用 ConstraintLayout 和 Kotlin 实现按钮点击事件，上方显示三个按钮（无隐藏）

本教程演示如何在 Android Studio 中使用 Kotlin 语言，创建一个包含一个按钮的 ConstraintLayout 布局，点击该按钮后，在按钮上方显示三个新的按钮，并设置每个按钮的点击事件。

1. 布局文件 (activity_main.xml)

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btnExpand"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Expand"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn1" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        app:layout_constraintTop_toBottomOf="@+id/btnExpand"
        app:layout_constraintStart_toStartOf="@+id/btnExpand"
        app:layout_constraintEnd_toEndOf="@+id/btnExpand"
        android:visibility="gone"/>

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        app:layout_constraintTop_toBottomOf="@+id/btn1"
        app:layout_constraintStart_toStartOf="@+id/btnExpand"
        app:layout_constraintEnd_toEndOf="@+id/btnExpand"
        android:visibility="gone"/>

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"
        app:layout_constraintTop_toBottomOf="@+id/btn2"
        app:layout_constraintStart_toStartOf="@+id/btnExpand"
        app:layout_constraintEnd_toEndOf="@+id/btnExpand"
        android:visibility="gone"/>

</androidx.constraintlayout.widget.ConstraintLayout>

2. Kotlin 文件 (MainActivity.kt)

class MainActivity : AppCompatActivity() {

    private lateinit var btnExpand: Button
    private lateinit var btn1: Button
    private lateinit var btn2: Button
    private lateinit var btn3: Button

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btnExpand = findViewById(R.id.btnExpand)
        btn1 = findViewById(R.id.btn1)
        btn2 = findViewById(R.id.btn2)
        btn3 = findViewById(R.id.btn3)

        btn1.setOnClickListener {
            Toast.makeText(this, 'Button 1 clicked', Toast.LENGTH_SHORT).show()
        }

        btn2.setOnClickListener {
            Toast.makeText(this, 'Button 2 clicked', Toast.LENGTH_SHORT).show()
        }

        btn3.setOnClickListener {
            Toast.makeText(this, 'Button 3 clicked', Toast.LENGTH_SHORT).show()
        }

        btnExpand.setOnClickListener {
            if (btn1.visibility == View.VISIBLE && btn2.visibility == View.VISIBLE && btn3.visibility == View.VISIBLE) {
                btn1.visibility = View.GONE
                btn2.visibility = View.GONE
                btn3.visibility = View.GONE
            } else {
                btn1.visibility = View.VISIBLE
                btn2.visibility = View.VISIBLE
                btn3.visibility = View.VISIBLE
            }
        }
    }
}

代码说明

• 布局文件 (activity_main.xml)

  • 使用 ConstraintLayout 作为布局根节点。
  • 添加一个 Button 作为初始按钮，设置 id 为 btnExpand。
  • 添加三个 Button 作为要显示的按钮，设置 id 分别为 btn1、btn2 和 btn3，并设置它们的 visibility 属性为 gone，表示初始状态隐藏。
  • 使用 app:layout_constraint 属性将三个按钮的位置相对于 btnExpand 进行约束，使其位于 btnExpand 按钮的下方。

• Kotlin 文件 (MainActivity.kt)

  • 声明四个 Button 类型的变量，分别对应布局文件中定义的按钮。
  • 在 onCreate 方法中，使用 findViewById 获取每个按钮的引用。
  • 为三个按钮分别设置点击事件，使用 setOnClickListener 方法，并在点击事件中使用 Toast 显示提示信息。
  • 为 btnExpand 按钮设置点击事件，判断三个按钮的可见性，如果都可见，则将它们隐藏，否则显示它们。

运行结果

运行程序后，您将看到一个包含一个按钮的界面。点击该按钮，会在按钮上方显示三个新的按钮，并且每个按钮都有自己的点击事件。

注意

• 本教程中使用 android:visibility="gone" 将按钮初始状态设置为隐藏，您也可以使用 android:visibility="invisible" 将按钮设置为不可见，但不可见状态仍然占用布局空间。
• 本教程演示了如何在 ConstraintLayout 中实现简单的按钮点击事件，您可以根据需要对其进行扩展和修改。

相关资源

• ConstraintLayout 官方文档
• Kotlin 官方文档