在imageview上产生连锁反应

时间:2016-12-28 14:15:48

标签: android rippledrawable

为了描述我的问题,我创建了一个小例子。

我有imageview和textview的linearlayout。对于linearlayout,我将波纹绘制为背景。但是当我点击或长按在imageview下的linearlayout波纹动画节目时。如何在imageview上显示动画?

main.xml中

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@drawable/ripple"
        android:clickable="true"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:src="@mipmap/index" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is ripple test"
            android:textColor="#FF00FF00" />
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

绘制-V21 / ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#FFFF0000">   
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF000000"/>
        </shape>
    </item>    
</ripple>

抽拉/ ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">    
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FFFF0000" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="3dp" />
            <solid android:color="#FF000000" />
        </shape>
    </item>    
</selector>

截图现在的样子: enter image description here

5 个答案:

答案 0 :(得分:15)

像这样添加纹波

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

基于此答案https://stackoverflow.com/a/35753159/2736039

答案 1 :(得分:2)

android:background="@null"

添加ImageView

答案 2 :(得分:2)

如果您的应用需要在API <23上运行,则将无法在foreground以外的视图上使用FrameLayout属性,这意味着在视图中添加了另一个[无用]级别树层次结构。

另一种解决方案是用<ripple>包装图像,将其设置为ImageView的{​​{1}},并使用background和{{1} } 以“隐藏” tint图像,以便可以看到上面有波纹的背景图像。

tintMode
src

不仅可在API 21+上使用,而且如果您的图像具有圆角-或者是另一种非矩形形状(例如星形或心形图标),则保持其边界,而不是填充视图的矩形边界,这在某些情况下可以提供更好的外观。

有关动画GIF的信息,请参见this Medium article,以了解该技术与使用<!-- In your layout file --> <ImageView android:adjustViewBounds="true" android:background="@drawable/image_with_ripple" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/image" android:tint="@android:color/transparent" android:tintMode="src_in" /> <!-- drawable/image_with_ripple.xml --> <?xml version="1.0" encoding="utf-8"?> <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?colorControlHighlight"> <item android:drawable="@drawable/image" /> </ripple> 属性的比较。

答案 3 :(得分:0)

简单地将这两行用作该ImageView中的属性。

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

答案 4 :(得分:0)

解析API <21

 <ImageView
            android:id="@+id/favorite_season"
            style="?android:attr/borderlessButtonStyle"
            android:background="?android:attr/selectableItemBackground"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_margin="22dp"
            android:clickable="true"
            android:focusable="true"
            android:src="@drawable/ic_star"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />