ConstraintLayout 中的 selectableItemBackgroundBorderless 问题答案

【问题标题】：selectableItemBackgroundBorderless issue in ConstraintLayoutConstraintLayout 中的 selectableItemBackgroundBorderless 问题
【发布时间】：2018-04-28 08:46:10
【问题描述】：

如果 ImageButton 或 Button 放在带背景的 View 内，selectableItemBackgroundBorderless 将不起作用，但 selectableItemBackground 仍然有效。

XML：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    android:background="@color/colorAccent">

    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/previous_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_previous"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintEnd_toStartOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/play_ib"
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintStart_toEndOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />

</android.support.constraint.ConstraintLayout>

这就是我想要做的。但涟漪效应消失了。

【问题讨论】：

发生这种情况是因为父级即 ConstraintLayout 具有背景色。
在你的 ImageButton 中试试这个：android:background="?attr/selectableItemBackgroundBorderless"
@BhavikMakwana 它发生事件，没有父母背景。 "?attr/selectableItemBackgroundBorderless" 和 ?android:attr/selectableItemBackgroundBorderless 没有任何作用。
看这个：stackoverflow.com/questions/31948189/…
似乎我也有类似的问题：issuetracker.google.com/issues/111819099。请考虑给它加星标，并尝试使用我稍后编写的解决方法的示例项目。

标签： android android-layout android-constraintlayout

【解决方案1】：

在解决此问题之前，一种解决方案是使用 android:background="?actionBarItemBackground" 产生圆形波纹效果也适用于约束布局。

【讨论】：

【解决方案2】：

我用过这个，对我来说效果很好。

android:clickable="true"
android:focusable="true"
android:background="?android:attr/selectableItemBackground"

【讨论】：

【解决方案3】：

通常这将是一个评论，但我显然太新了。

你试过了吗
android:foreground="?selectableItemBackgroundBorderless"

而不是
android:background="?selectableItemBackgroundBorderless"
?

【讨论】：

是的，但没有运气。
为我工作。谢谢！

【解决方案4】：

对于那些正在寻找合理答案的人，恐怕这是ConstraintLayout 中的一个已知错误：selectableItemBackground shown upon clicking, while selectableItemBackgroundBorderless isn't 提到了here

请考虑给它加星标，并在那里报告，以防您发现更多问题。

【讨论】：

【解决方案5】：

这是因为View 中的android:background="@color/colorPrimary"。但是你真的需要这个没有任何子视图的视图吗？我建议用另一个ConstraintLayout 替换View。只需将所有ImageButtons 放在第二个ConstraintLayout 中，您的问题就会消失。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    android:background="@color/colorAccent">

    <android.support.constraint.ConstraintLayout
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:visibility="visible"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0" >


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/previous_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_previous"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintEnd_toStartOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/play_ib"
        android:layout_width="68dp"
        android:layout_height="68dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_play"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/view" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next"
        app:layout_constraintBottom_toBottomOf="@+id/play_ib"
        app:layout_constraintStart_toEndOf="@+id/play_ib"
        app:layout_constraintTop_toTopOf="@+id/play_ib" />
    </android.support.constraint.ConstraintLayout>

</android.support.constraint.ConstraintLayout>

【讨论】：

【解决方案6】：

如果您的父视图是ConstraintLayout，那么请将ImageButton 包装在FrameLayout 中，例如：

<FrameLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          app:layout_constraintBottom_toBottomOf="@+id/play_ib"
          app:layout_constraintStart_toEndOf="@+id/play_ib"
          app:layout_constraintTop_toTopOf="@+id/play_ib">

   <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/next_ib"
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:background="?selectableItemBackgroundBorderless"
        android:contentDescription="@string/app_name"
        android:scaleType="centerInside"
        android:src="@drawable/ic_action_next" />

</FrameLayout>

约束布局中显然存在一些导致这种行为的错误。如果您有兴趣，可以探索更多。

【讨论】：