Effet d'entraînement sur le haut de l'Image - Android

J'ai fait des expériences avec de l'ondulation de l'animation dans mon dernier projet. Je vais avoir de la difficulté à trouver une "élégante" de la solution à utiliser dans certaines situations, les événements tactiles. C'est à dire avec des images, en particulier dans la liste, grille, et de recycler les points de vue. L'animation semble presque toujours pour animer derrière le point de vue, pas le sur le dessus de cela. Ce est aucun problème à Boutons et TextViews mais si vous avez un GridView d'images, l'onde s'affiche derrière ou au-dessous de l'image réelle. Évidemment, ce n'est pas ce que je veux, et bien qu'il existe des solutions que je considère être un travail autour, je l'espère, il y a quelque chose de plus simple je suis juste pas au courant de.

J'utilise le code suivant pour obtenir une coutume grille de point de vue avec des images. Je vais vous donner le code complet CLIQUEZ ICI de sorte que vous pouvez suivre si vous le souhaitez.

Maintenant juste les choses importantes. Afin d'obtenir mon image à animer sur le toucher j'ai besoin de cette

button_ripple.xml

<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/cream_background">
    <item>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <!-- Pressed -->
            <item
                android:drawable="@color/button_selected"
                android:state_pressed="true"/>
            <!-- Selected -->
            <item
                android:drawable="@color/button_selected"
                android:state_selected="true"/>
            <!-- Focus -->
            <item
                android:drawable="@color/button_selected"
                android:state_focused="true"/>
            <!-- Default -->
            <item android:drawable="@color/transparent"/>
        </selector>
    </item>
</ripple>

custom_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:gravity="center_horizontal"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/sceneGridItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_ripple"
        android:gravity="center_horizontal"/>

</LinearLayout>

activity_main.xml

<GridView
    android:id="@+id/sceneGrid"
    android:layout_marginTop="15dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:verticalSpacing="15dp"
    android:numColumns="5" />

La ligne où toute la magie et des problèmes se produisent est quand j'ai mis le fond. Tout cela ne fait que me donner une ondulation de l'animation sur mon imageview, il anime derrière l'imageview. Je veux l'animation sur le dessus de l'image. J'ai donc essayé différentes choses comme

Réglage de l'ensemble de la grille d'arrière-plan à button_ripple.

<GridView
    android:id="@+id/sceneGrid"
    android:layout_marginTop="15dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:verticalSpacing="15dp"
    android:background="@drawable/button_ripple"
    android:numColumns="5" />

C'est exactement ce que vous pensez, maintenant l'ensemble de la grille a un semi transparente en arrière-plan et n'importe quelle image j'appuie sur l'ensemble de la grille anime à partir du centre de la grille. Alors que c'est le genre de cool, ce n'est pas ce que je veux.

La configuration de la racine/parent d'arrière-plan à button_ripple.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:gravity="center_horizontal"
                  android:background="@drawable/button_ripple"
                  android:orientation="horizontal">

La zone est maintenant plus grand et remplit l'ensemble de la cellule de la grille (et pas seulement de l'image), mais il n'a pas l'amener à l'avant.

Changer custom_grid.xml pour un RelativeLayout et de mettre les deux ImageViews sur le dessus de chaque autre

custom_grid.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="horizontal">

    <ImageView
        android:id="@+id/gridItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <ImageView
        android:id="@+id/gridItemOverlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:background="@drawable/button_ripple" />

</RelativeLayout>

CustomGridAdapter.java

....
gridItemOverLay = (ImageView) findViewById(R.id.gridItemOverlay);
gridItemOverlay.bringToFront();

Cela fonctionne. Maintenant, le fond ImageView contient mon image, et le sommet de l'anime, donnant l'illusion d'une ondulation de l'animation sur le dessus de mon image. Honnêtement si c'est un travail autour de. Je sens que ce n'est pas la façon dont il a été conçu. Je vous demande donc, braves gens, est-il une meilleure façon ou d'une autre manière?

OriginalL'auteur Jawascript | 2015-01-08