如何在Android上的textview或imageview上设置波纹效果?


127

我想在Android Studio中对textview和imageview设置波纹效果。我该怎么做?


1
请先详细说明您的问题。实际上您需要什么,到目前为止您已经尝试了什么。简单地说,我想要波纹效应,这是一个非常广泛的问题。您还可以提供一些链接,以供参考,您还可以参考stackoverflow。 com / help / how-to-ask
Anirudh Sharma 2015年

其实我想要文本视图和图像视图选择/取消选择效果。
Vasant 2015年

您是否尝试过搜索相同的内容?
Anirudh Sharma 2015年

Answers:


276

参考: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"
/>

2
很好,它与我一起工作在棒棒糖上,但是这种方式适用于哪个android android版本?它对棒棒糖前有效吗?
Basheer AL-MOMANI 2016年

2
@Richard我一年前遇到KitKat(或ICS)问题,没有该版本的android:clickable =“ true”,点击监听器无法正常工作
DoruChidean

25
在现代版本的android上,现在是android:background="?android:attr/selectableItemBackground"
tmm1

2
当我想要自定义背景时怎么使用?
MRID

3
有/没有Borderless youtube.com/watch?v=wOjA8tS5sbc
Gibolt

81

如果要将波纹限制为TextView / ImageView的大小,请使用:

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

(我认为它看起来更好)


2
selectableItemBackgroundvs vsselectableItemBackgroundBorderless
rakesh kashyap

我不知道为什么它不受边界限制,而且会扩展到整个布局
VSB

4
@rakeshkashyap的区别是selectableItemBackground会将涟漪图保持在其视图大小(宽度/高度)之内。selectableItemBackgroundBorderless将把它的波纹扩大到其他视图上(例如官方计算器应用程序的波纹)
Tudor

1
并且还需要设置此>>> android:focusable =“ true”
Amos

25

请参考下面的答案以获得涟漪效应。

在Textview或view上产生波纹:

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

Button或Imageview上的波纹:

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

4
请注意,这selectableItemBackgroundBorderless是API 21+。您可以在下面选择selectableItemBackground避免兼容性问题
StevenTB,

10

您可以使用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();

真好!有Kotlin版本吗?
rengineer

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

将此添加到可绘制

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

试试这个。




4

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

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

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

另外,在使用android:clickable="true"添加时,android:focusable="true"原因如下:

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


3

android:clickable="true" android:focusable="true"

纹波效果

android:background="?attr/selectableItemBackgroundBorderless"

为了选择效果

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

对于按钮效果

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

2

除了@Bikesh M Annur的答案外,请确保更新您的支持库。以前我使用的是23.1.1,什么也没发生。将其更新到23.3.0可以达到目的。



1

或者,您可以尝试使用此库(android 9+):RippleEffect

积分

dependencies {
    compile 'com.github.traex.rippleeffect:library:1.3'
}

用法:

<com.andexert.library.RippleView
  android:id="@+id/more"
  android:layout_width="?android:actionBarSize"
  android:layout_height="?android:actionBarSize"
  android:layout_toLeftOf="@+id/more2"
  android:layout_margin="5dp"
  rv_centered="true">

  <ImageView
    android:layout_width="?android:actionBarSize"
    android:layout_height="?android:actionBarSize"
    android:src="@android:drawable/ic_menu_edit"
    android:layout_centerInParent="true"
    android:padding="10dp"
    android:background="@android:color/holo_blue_dark"/>

</com.andexert.library.RippleView>

8
我已经使用了很长时间,但是除非您的目标是Android 2.3,否则我不建议您再使用它。这是越野车,很慢,并且会产生样板代码。而且由于目前所有设备中有43%具有Android 5或6,因此selectableItemBackground在定位Android 4及更高版本时,您可以坚持使用。
0101100101 '16

0

最好的添加方式:

    <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" />

-4

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

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

4
哦,不,这不是最好的方法,因为您对其的控制较少,并且Android SDK本身已广泛支持该方法。如果有人读过这篇文章,如果您想控制颜色,我建议您看看@Bikesh或Karthik的评论。
Dion Segijn
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.