首页 > 解决方案 > 如何在 ShapeableImageView 上实现点击效果,min api 21 没有嵌套视图

问题描述

最近发布的 Material 组件v1.2.0有没有更好的方法来实现ShapeableImageView上的点击效果

我不想使用前台属性,因为它在 api 级别 23 之后可用,而我当前的 min sdk 级别是 21。
例如android:foreground="?selectableItemBackground"

目前我唯一的解决方案是在 ImageView 上嵌套一个视图,但这似乎是一个糟糕的解决方案,因为只是为了获得点击,我必须在它上面添加一个嵌套视图。

此外,我会考虑纯粹使用 XML 而不编码,因为我有许多带有 ImageView 网格的布局。

已经询问过关于 SO 的类似问题ImageViewAppCompatImageView但这些问题要么是遗留解决方案,要么是使用前台或第三方库的目标 api 级别 23。

下面是我的布局,将在 aRecyclerView中用作网格项

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="..."
    xmlns:app="..."
    xmlns:tools="..."
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/art"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="centerCrop"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent"
        tools:src="@tools:sample/avatars" />

    <com.google.android.material.imageview.ShapeableImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:background="@drawable/ripple_effect"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintBottom_toBottomOf="@+id/art"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toEndOf="@+id/art"
        app:layout_constraintStart_toStartOf="@+id/art"
        app:layout_constraintTop_toTopOf="@+id/art"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerSize50Percent" />

</androidx.constraintlayout.widget.ConstraintLayout>

下面是使 ImageView 成全圆的样式

<!-- CornerSize50Percent -->
<style name="ShapeAppearanceOverlay.App.CornerSize50Percent" parent="">
    <item name="cornerSize">50%</item>
</style>

下面是可绘制的涟漪效果

<!-- ripple_effect -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#DEFFFFFF">
    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

链接到github上的问题

标签: androidandroid-layoutmaterial-components-androidmaterial-components

解决方案


推荐阅读