Android XML：如何为ImageView与TextView分组并实现统一点击事件

首先要纠正一个错误：你给两个视图设置了相同的android:id，这不符合Android布局规范——同一个布局内每个视图的id必须唯一，重复id会导致系统无法正确识别视图，后续代码中只能找到其中一个，甚至找不到。

下面提供三种可行的实现方案，按推荐程度排序：

方案一：用ViewGroup包裹两个视图，给容器设置点击事件 #

最直观的方式是把ImageView和TextView放进一个可点击的容器（比如LinearLayout），点击容器内的任意区域都会触发事件，用户体验更友好。

修改后的XML代码：

<LinearLayout
    android:id="@+id/menu_drawerLogoutContainer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:clickable="true"
    android:focusable="true"
    android:paddingVertical="8dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/view6">

    <ImageView
        android:id="@+id/menu_drawerLogoutIcon"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginStart="20dp"
        android:src="@drawable/ic_menu_exit"/>

    <TextView
        android:id="@+id/menu_drawerLogoutText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginStart="16dp"
        android:text="@string/sign_out_text"/>
</LinearLayout>

然后在代码中给容器设置点击事件：

Java代码 #

findViewById(R.id.menu_drawerLogoutContainer).setOnClickListener(v -> {
    // 执行退出登录操作
});

Kotlin代码 #

menu_drawerLogoutContainer.setOnClickListener {
    // 执行退出登录操作
}

方案二：给两个视图设置唯一id，绑定同一个监听器 #

如果不想用容器包裹，可以给两个视图分别设置唯一id，然后在代码中给它们绑定同一个点击监听器实例。

修改后的XML核心部分：

<ImageView
    android:id="@+id/menu_drawerLogoutIcon"
    <!-- 其他属性不变 -->/>

<TextView
    android:id="@+id/menu_drawerLogoutText"
    <!-- 其他属性不变 -->/>

代码实现：

Java代码 #

View.OnClickListener logoutClickListener = v -> {
    // 执行退出登录操作
};

findViewById(R.id.menu_drawerLogoutIcon).setOnClickListener(logoutClickListener);
findViewById(R.id.menu_drawerLogoutText).setOnClickListener(logoutClickListener);

Kotlin代码 #

val logoutClickListener = View.OnClickListener {
    // 执行退出登录操作
}

menu_drawerLogoutIcon.setOnClickListener(logoutClickListener)
menu_drawerLogoutText.setOnClickListener(logoutClickListener)

方案三：使用Data Binding绑定统一点击方法 #

如果你的项目已经启用了Data Binding，可以直接在XML中给两个视图绑定同一个点击方法。

首先确保布局根节点启用Data Binding，然后设置点击事件：

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>
        <variable
            name="handler"
            type="com.yourpackage.YourHandler"/>
    </data>

    <!-- 其他布局代码 -->
    <ImageView
        android:id="@+id/menu_drawerLogoutIcon"
        android:onClick="@{() -> handler.onLogoutClick()}"
        <!-- 其他属性不变 -->/>

    <TextView
        android:id="@+id/menu_drawerLogoutText"
        android:onClick="@{() -> handler.onLogoutClick()}"
        <!-- 其他属性不变 -->/>
</layout>

然后在对应的Handler类或Activity/Fragment中实现方法：

Java代码 #

public class YourHandler {
    public void onLogoutClick() {
        // 执行退出登录操作
    }
}

Kotlin代码 #

class YourHandler {
    fun onLogoutClick() {
        // 执行退出登录操作
    }
}

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