如何在Constraint Layout中实现两个View共享点击反馈效果

嘿，这个需求完全不用嵌套额外的ViewGroup就能搞定，ConstraintLayout本身就支持这种联动的点击反馈，给你两个靠谱的方案：

方案一：利用状态选择器（Selector）+ 父布局可点击 #

这是最推荐的方式，符合Android原生的状态管理逻辑，代码也最简洁：

1. 创建文字颜色状态选择器
   在res/color/text_color_selector.xml中定义TextView的颜色切换规则：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 点击状态下的文字颜色 -->
    <item android:color="@color/your_clicked_text_color" android:state_pressed="true"/>
    <!-- 默认状态下的文字颜色 -->
    <item android:color="@color/your_default_text_color"/>
</selector>

2. 创建ImageView的Tint状态选择器
   在res/color/image_tint_selector.xml中定义Drawable的颜色滤镜规则：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 点击状态下的tint颜色 -->
    <item android:color="@color/your_clicked_tint_color" android:state_pressed="true"/>
    <!-- 默认状态下的tint颜色 -->
    <item android:color="@color/your_default_tint_color"/>
</selector>

3. 配置ConstraintLayout布局
   给父布局ConstraintLayout设置可点击、可聚焦，同时给内部的ImageView和TextView绑定刚才的选择器：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/clickable_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:focusable="true"
    android:background="?attr/selectableItemBackground"> <!-- 可选：添加系统默认点击波纹效果 -->

    <ImageView
        android:id="@+id/icon_view"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/your_icon_drawable"
        android:tint="@color/image_tint_selector"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你的文本内容"
        android:textColor="@color/text_color_selector"
        app:layout_constraintStart_toEndOf="@id/icon_view"
        app:layout_constraintTop_toTopOf="@id/icon_view"
        app:layout_constraintBottom_toBottomOf="@id/icon_view"
        android:layout_marginStart="8dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

原理说明 #

当你点击ConstraintLayout的任意区域（包括内部的ImageView和TextView），父布局会进入pressed状态，而内部的子View会继承父布局的状态，因此它们绑定的状态选择器会自动切换对应的颜色，实现联动反馈。

⚠️ 注意：确保内部的ImageView和TextView没有设置android:clickable="true"，否则它们会拦截点击事件，导致父布局无法触发状态变化。

方案二：手动通过点击监听器控制（适合复杂逻辑） #

如果需要在点击时执行额外的业务逻辑，可以给ConstraintLayout设置点击监听器，手动控制两个View的UI变化：

val container = findViewById<ConstraintLayout>(R.id.clickable_container)
val icon = findViewById<ImageView>(R.id.icon_view)
val text = findViewById<TextView>(R.id.text_view)

val defaultTextColor = ContextCompat.getColor(this, R.color.your_default_text_color)
val clickedTextColor = ContextCompat.getColor(this, R.color.your_clicked_text_color)
val defaultTintColor = ContextCompat.getColor(this, R.color.your_default_tint_color)
val clickedTintColor = ContextCompat.getColor(this, R.color.your_clicked_tint_color)

container.setOnClickListener {
    // 切换状态并更新UI
    val isActive = !container.isPressed
    text.setTextColor(if (isActive) clickedTextColor else defaultTextColor)
    icon.setColorFilter(if (isActive) clickedTintColor else defaultTintColor)
}

这种方式适合需要自定义动画或额外逻辑的场景，但不如方案一优雅，推荐优先使用方案一。

内容的提问来源于stack exchange，提问作者Archie G. Quiñones