【问题标题】:Apply Material Design Touch Ripple to ImageButton?将 Material Design Touch Ripple 应用于 ImageButton?
【发布时间】:2015-09-06 16:53:39
【问题描述】:

我有一个图像按钮,当它被点击时,它不会响应触摸动画,因为它是一个静态图像,不像棒棒糖上的常规按钮,它带有内置的波纹效果。我想为图像添加材料设计波纹触摸效果,但似乎找不到实现它的方法。我可以在图像上设置一个滤色器,但这不是涟漪效应。我正在尝试做的一个示例是,当您在 Google Play 音乐中拿着专辑封面图片时,阴影波纹在图片上移动。

【问题讨论】:

    标签: android xml android-5.0-lollipop imagebutton material-design


    【解决方案1】:

    您可以像这样为 ImageButton 添加背景:

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/btn_dialog"
        android:background="?android:attr/selectableItemBackground" />
    

    【讨论】:

    • 使用 android:foreground="?attr/selectableItemBackgroundBorderless"
    • @MFQ 与 ?android:attr/selectableItemBackground 有何不同
    • @killer selectableItemBackgroundBorderless = 给出一个没有边界的圆形波纹,就像您单击工具栏中的图标一样,但是 selectableItemBackground 给出矩形波纹,如果您长时间单击实现的图标,您会看到差异这个画带
    【解决方案2】:

    为了更好的结果:

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_button"
        android:background="?attr/selectableItemBackgroundBorderless"
    />
    

    【讨论】:

    • 这是更好的答案 - 提供圆形感觉以及涟漪效应,谢谢。
    • 这也适用于彩色绘图吗?对我来说,尽管应用了背景,但没有可见的触摸效果。我的主题是从 Theme.AppCompat.Light.DarkActionBar 扩展而来的,这可能是个问题吗?
    • 而不是背景使用它的前景,它工作正常的所有视图。
    • 有没有人找到办法做到这一点并改变背景颜色?更改 BackgroundTint 不起作用并将 Foreground 设置为“?attr/selectableItemBackgroundBorderless”会在按钮上产生令人讨厌的填充。
    • 一定很喜欢我翻阅了大量 Google 文档但从未见过的方式...风格信息令人难以置信地难以发现。
    【解决方案3】:

    我从 i.shadrin (here) 和 Nicolars (here) 得到了很好的答案。

    他们的答案之间的区别在于?attr/selectableItemBackgroundBorderless 可以给你一个android.view.InflateException,所以?android:attr/selectableItemBackground 是解决方案。

    FWIW,我不知道为什么会发生异常,因为第一个答案在我所有的旧项目中都运行良好,但在我最近的项目中却不行(可能是因为应用程序主题 = android:Theme.Material?)。

    发生的奇怪事情是,虽然显示了涟漪效果,但它超出了 ImageButton 的范围,因此解决方案是:

    • 使用android:foreground="?android:attr/selectableItemBackgroundBorderless" 代替android:background="?android:attr/selectableItemBackgroundBorderless"

    如果您面临同样的问题,希望对您有所帮助。

    【讨论】:

      【解决方案4】:

      如果你已经有背景并且不想改变它,使用前景;

      <ImageButton
          android:layout_width="60dp"
          android:layout_height="match_parent"
          android:background="@drawable/preview_in_4k_background"
          android:src="@drawable/ic_full_screen_24px"
          android:layout_marginLeft="5dp"
          android:foreground="?attr/selectableItemBackgroundBorderless"
          android:layout_column="2"/>
      

      【讨论】:

      • 不错的解决方案,但如果你有圆角背景,那么波纹会超出它。
      【解决方案5】:

      您可以使用具有此属性的 MaterialButton (com.google.android.material.button.MaterialButton) 代替 ImageButton。 如果您使用材料组件。

       <style name="IconOnlyButton">
          <item name="iconPadding">0dp</item>
          <item name="iconGravity">textStart</item>
       </style>
      
      <com.google.android.material.button.MaterialButton
          style="@style/IconOnlyButton"
          app:icon="@drawable/ic_refresh"/>
      

      【讨论】:

        猜你喜欢
        • 2015-01-17
        • 2015-04-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-09-27
        • 1970-01-01
        • 2017-05-05
        • 1970-01-01
        相关资源
        最近更新 更多