【问题标题】:How to set a ripple effect on textview or imageview on Android?如何在 Android 上的 textview 或 imageview 上设置涟漪效果?
【发布时间】:2016-02-02 07:13:55
【问题描述】:

我想在 Android Studio 中的 textview 和 imageview 上设置涟漪效果。我该怎么做?

【问题讨论】:

  • 请先详细说明您的问题。到目前为止,您实际需要什么以及您尝试过什么。简单地说,我想要涟漪效应使其成为一个非常广泛的问题。您还可以提供一些链接以供参考你想要什么。另见stackoverflow.com/help/how-to-ask
  • 实际上我想要文本视图和图像视图选择/取消选择效果。
  • 您是否尝试过搜索?

标签: android android-imageview textview material-design


【解决方案1】:

参考:http://developer.android.com/training/material/animations.html,

http://wiki.workassis.com/category/android/android-xml/

<TextView
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

<ImageView
.
.
.
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
/>

【讨论】:

  • 很好,它在棒棒糖上与我合作,但这种方式适用于哪个 android android 版本?它在棒棒糖之前有效吗?
  • @Richard 一年前我遇到了 KitKat(或 ICS)的问题,如果没有 android:clickable="true" 对于那个版本,点击监听器就无法工作
  • 在现代版本的 android 上,现在是 android:background="?android:attr/selectableItemBackground"
  • 当我想要自定义背景时如何使用它??
  • 这个有/没有Borderlessyoutube.com/watch?v=wOjA8tS5sbc的区别
【解决方案2】:

如果您希望波纹限制为 TextView/ImageView 的大小,请使用:

<TextView
android:background="?attr/selectableItemBackground"
android:clickable="true"/>

(我觉得更好看)

【讨论】:

  • selectableItemBackgroundselectableItemBackgroundBorderless有什么区别
  • 我不知道为什么它没有边界,而是通过整个布局扩展
  • @rakeshkashyap 不同之处在于 selectableItemBackground 会将波纹保持在其视图大小(宽度/高度)内。 selectableItemBackgroundBorderless 将在其他视图上扩展它的涟漪(如官方计算器应用涟漪)
  • 并且还需要设置这个>>> android:focusable="true"
【解决方案3】:

涟漪效应请参考以下答案。

Textview 或视图上的波纹:

android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackgroundBorderless"

Button 或 Imageview 上的波纹:

android:foreground="?android:attr/selectableItemBackgroundBorderless"

【讨论】:

  • 请注意selectableItemBackgroundBorderless 是 API 21+。下面你可以选择selectableItemBackground以避免兼容性问题
  • 谢谢!它对 API 23+ 有影响。您也可以使用?attr/selectableItemBackgroundBorderless?attr/selectableItemBackground。我认为,android:clickableandroid:focusable 是可选的。
【解决方案4】:

添加 android:clickable="true" android:focusable="true"

波纹效果

android:background="?attr/selectableItemBackgroundBorderless"

用于可选效果

android:background="?android:attr/selectableItemBackground"

按钮效果

android:adjustViewBounds="true" style="?android:attr/borderlessButtonStyle"

【讨论】:

    【解决方案5】:
    <TextView
        android:id="@+id/txt_banner"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:layout_below="@+id/title"
        android:background="@drawable/ripple_effect"
        android:gravity="center|left"
        android:paddingLeft="15dp"
        android:text="@string/banner"
        android:textSize="15sp" />
    

    将此添加到可绘制对象中

    <?xml version="1.0" encoding="utf-8"?>
    
    <!--this ripple animation only working for >= android version 21 -->
    
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/click_efect" />
    

    【讨论】:

      【解决方案6】:

      您可以使用android-ripple-background

      启动效果

      final RippleBackground rippleBackground=(RippleBackground)findViewById(R.id.content);
      ImageView imageView=(ImageView)findViewById(R.id.centerImage);
      imageView.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              rippleBackground.startRippleAnimation();
          }
      });
      

      停止动画:

      rippleBackground.stopRippleAnimation();
      

      对于科特林

      val rippleBackground = findViewById(R.id.content) as RippleBackground
      val imageView: ImageView = findViewById(R.id.centerImage) as ImageView
      imageView.setOnClickListener(object : OnClickListener() {
          fun onClick(view: View?) {
              rippleBackground.startRippleAnimation()
          }
      })
      

      【讨论】:

      • 不错!这个有 Kotlin 版本吗?
      • @rengineer 是的。抱歉耽搁了
      【解决方案7】:

      对于圆形波纹: android:background="?attr/selectableItemBackgroundBorderless"

      对于矩形波纹: android:background="?attr/selectableItemBackground"

      【讨论】:

        【解决方案8】:

        如果@Bikesh M Annur (here) 发布的投票结果良好的解决方案对您不起作用,请尝试使用:

        <TextView
        ...
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:clickable="true" />
        
        <ImageView
        ...
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:clickable="true" />
        

        另外,当使用android:clickable="true" 时添加android:focusable="true" 因为:

        "声明为可点击但未声明为可聚焦的小部件无法通过键盘访问。"

        【讨论】:

          【解决方案9】:

          试试这个。 这对我有用。

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

          【讨论】:

          【解决方案10】:
          android:background="?android:selectableItemBackground"
          android:focusable="true"
          android:clickable="true"
          

          【讨论】:

            【解决方案11】:

            除了上述答案之外,还添加了可聚焦以避免 UI 编辑器的警告

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

            【讨论】:

              【解决方案12】:

              如果上述解决方案不适用于您的 TextView,那么这肯定会起作用:

              1.添加此样式

              <style name="ClickableView">
                  <item name="colorControlHighlight">@android:color/white</item>
                  <item name="android:background">?selectableItemBackground</item>
              </style>
              

              2。使用它只是

              android:theme="@style/ClickableView"
              

              【讨论】:

                【解决方案13】:

                除了@Bikesh M Annur 的回答,请务必更新您的支持库。以前我使用的是 23.1.1,但什么也没发生。将它更新到 23.3.0 就可以了。

                【讨论】:

                  【解决方案14】:

                  其添加的最佳方式:

                      <ImageView
                          android:id="@+id/ivBack"
                          style="?attr/actionButtonStyle"
                          android:layout_width="wrap_content"
                          android:layout_height="wrap_content"
                          android:padding="16dp"
                          android:src="@drawable/ic_back_arrow_black"
                          android:tint="@color/white" />
                  

                  【讨论】:

                    【解决方案15】:

                    使用库。 This 就是其中之一。只需在需要涟漪效果的每个元素之前添加其依赖项并将以下代码放在 xml 中即可:

                    <com.balysv.materialripple.MaterialRippleLayout
                    android:id="@+id/ripple"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    

                    【讨论】:

                    • 哦,请不要,这不是最好的方法,因为您对它的控制较少,而且它在 Android SDK 本身中得到广泛支持。如果有人读到这篇文章,如果您想控制颜色,我建议您查看@Bikesh 或 Karthik 的评论。
                    猜你喜欢
                    • 1970-01-01
                    • 2019-07-12
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多