Jak mogę nadać efekt kliknięcia imageview jak przycisk na Androidzie?

Możesz to zrobić za pomocą jednego obrazu, używając czegoś takiego:

     //get the image view
    ImageView imageView = (ImageView)findViewById(R.id.ImageView);

    //set the ontouch listener
    imageView.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: {
                    ImageView view = (ImageView) v;
                    //overlay is black with transparency of 0x77 (119)
                    view.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
                    view.invalidate();
                    break;
                }
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL: {
                    ImageView view = (ImageView) v;
                    //clear the overlay
                    view.getDrawable().clearColorFilter();
                    view.invalidate();
                    break;
                }
            }

            return false;
        }
    });

Prawdopodobnie zrobię z tego podklasę ImageView (lub ImageButton, ponieważ jest to również podklasa ImageView) dla łatwiejszego ponownego użycia, ale powinno to pozwolić na zastosowanie "wybranego" wyglądu do imageview.

Możliwe jest użycie tylko jednego pliku obrazu przy użyciu metody ColorFilter. Jednak ColorFilter oczekuje pracy z obrazami, a nie przyciskami, więc musisz przekształcić je w Obrazy. Nie jest to problem, jeśli używasz obrazów jako przycisków, ale jest to bardziej denerwujące, jeśli masz tekst... W każdym razie, zakładając, że znajdziesz sposób na obejście problemu z tekstem, oto kod do użycia:

ImageView button = (ImageView) findViewById(R.id.button);
button.setColorFilter(0xFFFF0000, PorterDuff.Mode.MULTIPLY);

, który nakłada czerwoną nakładkę na przycisk (kod koloru To hex kod w pełni nieprzezroczysty czerwony-pierwsze dwie cyfry to przezroczystość, potem RR GG BB.).

EDIT : chociaż oryginalna odpowiedź poniżej działa i jest łatwa do skonfigurowania, zapoznaj się z Ten post autorstwa Rzecznika programistów Androida w Google, jeśli chcesz / potrzebujesz bardziej wydajnej implementacji. Należy również pamiętać, że android:foreground atrybutem jest wchodzący do wszystkich widoków, w tym ImageView, domyślnie w Androidzie M.

Problem z używaniem selektora dla widoku ImageView polega na tym, że można go ustawić tylko jako tło widoku - tak długo, jak jest to obraz nieprzezroczyste, nie zobaczysz efektu selektora za nim.

Sztuką jest zawijanie ImageView w FrameLayout z atrybutem android:foreground co pozwala nam zdefiniować nakładkę dla jej treści. Jeśli ustawimy android:foregrounddo selektora (np. ?android:attr/selectableItemBackground dla poziomu API 11+) i dołączyć OnClickListener do FrameLayout zamiast ImageView, obraz zostanie nałożony na nasz selektor drawable-efekt kliknięcia, którego pragniemy!

Oto:

<FrameLayout
    android:id="@+id/imageButton"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="?android:attr/selectableItemBackground" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/yourImageFile" />

</FrameLayout>

(zwróć uwagę na to powinien być umieszczony w układzie rodzica.)

final View imageButton = findViewById(R.id.imageButton);
imageButton.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View view) {
        // do whatever we wish!
    }
});

Use style="?android: borderlessButtonStyle" w pliku XML. Pokaże domyślny efekt kliknięcia Androida.

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" 
    style="?android:borderlessButtonStyle"
/>

Wystarczy użyć ImageButton .

Oto mój prosty sposób na rozwiązanie tego:

ImageView iv = (ImageView) findViewById(R.id.imageView);

iv.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
        //Agrega porcentajes de cada fraccion de grafica pastel

        Animation animFadein = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade_in);

        iv.startAnimation(animFadein);
    });

W pliku res/anim/fade_in.xml:

<?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:fillAfter="true" >

<alpha
    android:duration="100"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />
 </set>

Ustaw wybrane tło w widoku ImageView i dodaj trochę wypełnienia. Następnie dołącz OnClickListener.

<ImageView
    android:id="@+id/your_image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/your_image"
    android:padding="10dp"
    android:background="?android:attr/selectableItemBackground"/>

Do definiowania selektora drawable choice

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_selected="false"   
        android:drawable="@drawable/img_up" />
</selector>

Muszę użyć android: state_pressed zamiast android: state_selected

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed ="true"   
        android:drawable="@drawable/img_down" />
    <item android:state_pressed ="false"   
        android:drawable="@drawable/img_up" />
</selector>

Robię podobne rzeczy Zobacz odpowiednie dla Ciebie czy nie

Widok Naciśnij Efekt Helper:

• Użycie: wykonaj prosty efekt naciśnij jak iOS

  Prosty Sposób Użycia:

• ImageView img = (ImageView) findViewById(R. id. img);

• ViewPressEffectHelper.attach (img)

Https://gist.github.com/extralam/7489370

W połączeniu ze wszystkimi powyższymi odpowiedziami chciałem, aby ImageView był wciśnięty i zmieniony stan, ale jeśli użytkownik przeniósł się, to "anuluj" i nie wykonuj onClickListener.

W końcu zrobiłem obiekt punktowy w klasie i ustawiłem jego współrzędne zgodnie z tym, kiedy użytkownik nacisnął ImageView. Na MotionEvent.ACTION_UP nagrałem nowy punkt i porównałem punkty.

// set the ontouch listener
weatherView.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // Determine what action with a switch statement
        switch (event.getAction()) {

        // User presses down on the ImageView, record the original point
        // and set the color filter
        case MotionEvent.ACTION_DOWN: {
            ImageView view = (ImageView) v;

            // overlay is black with transparency of 0x77 (119)
            view.getDrawable().setColorFilter(0x77000000,
                    PorterDuff.Mode.SRC_ATOP);
            view.invalidate();

            p = new Point((int) event.getX(), (int) event.getY());
            break;
        }

        // Once the user releases, record new point then compare the
        // difference, if within a certain range perform onCLick
        // and or otherwise clear the color filter
        case MotionEvent.ACTION_UP: {
            ImageView view = (ImageView) v;
            Point f = new Point((int) event.getX(), (int) event.getY());
            if ((Math.abs(f.x - p.x) < 15)
                    && ((Math.abs(f.x - p.x) < 15))) {
                view.performClick();
            }
            // clear the overlay
            view.getDrawable().clearColorFilter();
            view.invalidate();
            break;
        }
        }
        return true;
    }
});

Mam onclicklistener ustawiony na imageView, ale może to być metoda.

Możesz nadpisać setPressed w ImageView i filtrować tam kolory, zamiast tworzyć słuchacze onTouchEvent:

@Override
public void setPressed(boolean pressed) {
    super.setPressed(pressed);

    if(getDrawable() == null)
        return;

    if(pressed) {
        getDrawable().setColorFilter(0x44000000, PorterDuff.Mode.SRC_ATOP);
        invalidate();
    }
    else {
        getDrawable().clearColorFilter();
        invalidate();
    }
}

Możesz spróbować z android:background="@android:drawable/list_selector_background" aby uzyskać taki sam efekt jak "Dodaj alarm" w domyślnym "Budziku" (teraz Zegar Biurkowy).

Bazując na odpowiedzi pana Zorna , używam statycznej metody w mojej abstrakcyjnej klasie użyteczności:

public abstract class Utility {
...

    public static View.OnTouchListener imgPress(){
        return imgPress(0x77eeddff); //DEFAULT color
    }

    public static View.OnTouchListener imgPress(final int color){
        return new View.OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch(event.getAction()) {

                    case MotionEvent.ACTION_DOWN: {
                        ImageView view = (ImageView) v;
                        view.getDrawable().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
                        view.invalidate();
                        break;
                    }

                    case MotionEvent.ACTION_UP:
                        v.performClick();

                    case MotionEvent.ACTION_CANCEL: {
                        ImageView view = (ImageView) v;

                        //Clear the overlay
                        view.getDrawable().clearColorFilter();
                        view.invalidate();
                        break;
                    }
                }

                return true;
            }
        };
    }

    ...
}

Potem używam go z onTouchListener:

ImageView img=(ImageView) view.findViewById(R.id.image);
img.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) { /* Your click action */ }
});
img_zc.setOnTouchListener(Utility.imgPress()); //Or Utility.imgPress(int_color_with_alpha)

Jest to bardzo proste, jeśli masz dużo obrazów i chcesz uzyskać prosty efekt onTouch, bez rysowania XML i tylko jeden obraz.

Użyj android.widget.Button i ustaw jego właściwość background na android.graphics.drawable.StateListDrawable. To wszystko może być wykonane w XML, lub programowo. Zobacz sekcję niestandardowych przycisków w samouczku Form Stuff .

To mi pomogło:

img.setOnTouchListener(new OnTouchListener(){

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction())
                {
                    case MotionEvent.ACTION_DOWN:
                    {
                        ((ImageView)v).setImageAlpha(200);
                        break;
                    }
                    case MotionEvent.ACTION_MOVE:
                    {
                        // if inside bounds
                        if(event.getX() > 0 && event.getX() < v.getWidth() && event.getY() > 0 && event.getY() < v.getHeight())
                        {
                            ((ImageView)v).setImageAlpha(200);
                        }
                        else
                        {
                            ((ImageView)v).setImageAlpha(255);
                        }

                        break;
                    }
                    case MotionEvent.ACTION_UP:
                    {
                        ((ImageView)v).setImageAlpha(255);
                    }
                }
                return true;
            }

        });

@Edit: jak powiedział Gunhan, będzie problem z kompatybilnością wsteczną z metodą setImageAlpha. Użyłem tej metody:

public static void setImageAlpha(ImageView img, int alpha)
    {
        if(Build.VERSION.SDK_INT > 15)
        {
            img.setImageAlpha(alpha);
        }
        else
        {
            img.setAlpha(alpha);
        }
    }

Tworzę sample tutaj , po prostu zmień ImageView na ClickableImageView z twojego układu. Mam nadzieję, że to pomoże.

Mam bardziej piękne rozwiązanie, jeśli używasz obrazów tła:)

public static void blackButton(View button){
    button.setOnTouchListener(new OnTouchListener() {

        public boolean onTouch(View v, MotionEvent event) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: {
                    v.getBackground().setColorFilter(0xf0f47521,PorterDuff.Mode.SRC_ATOP);
                    v.invalidate();
                    break;
                }
                case MotionEvent.ACTION_UP: {
                    v.getBackground().clearColorFilter();
                    v.invalidate();
                    break;
                }
            }
            return false;
        }
    });
}

Lub:

Możesz użyć tego formularza, Z Przyciskiem Obraz.

Utwórz plik res/drawable/btn_video.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/image"
        android:state_pressed="true" />
    <item android:drawable="@drawable/ico2"
        android:state_focused="true" />
    <item android:drawable="@drawable/ico2" />
</selector>

I res/layout/activity_main.xml:

<ImageButton
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/imageButton"
    android:layout_gravity="center_horizontal"
    android:onClick="eventImageBtn"
    android:background="@drawable/btn_video"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
/>

Twój obraz zmienia się za pomocą kliknięcia i można go dostosować za pomocą układu liniowego:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/menu_item_background">

        <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"
                      android:paddingLeft="@dimen/main_screen_side_padding" android:paddingRight="@dimen/main_screen_side_padding" android:paddingTop="@dimen/main_screen_side_padding" android:paddingBottom="@dimen/main_screen_side_padding"
                      android:background="#ffb3ff13" android:weightSum="10.00">


            <LinearLayout android:layout_weight="2.50" android:background="#ff56cfcd" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" >

                <ImageButton
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:id="@+id/imageButton"
                    android:layout_gravity="center_horizontal"
                    android:onClick="eventImageBtn"
                    android:background="@drawable/btn_video"
                    android:adjustViewBounds="true"
                    android:scaleType="fitXY"
                />
            </LinearLayout>

            <LinearLayout android:layout_weight="0.50" android:layout_height="0dp" android:background="#ffffffff" android:orientation="vertical" android:layout_width="fill_parent" >
            </LinearLayout>

            <LinearLayout android:layout_weight="4.50" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" android:background="#ff8aa5ff">
            </LinearLayout>

            <LinearLayout android:layout_weight="0.50" android:layout_height="0dp" android:background="#ffffffff" android:orientation="vertical" android:layout_width="fill_parent" >
            </LinearLayout>

            <LinearLayout android:layout_weight="2.00" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="0dp" android:background="#ffff7d1a" >
            </LinearLayout>

        </LinearLayout>
    </LinearLayout>
</ScrollView>

Dzięki za pomoc w tym wątku. Jednak pominąłeś jedną rzecz...musisz również obsługiwać ACTION_CANCEL. Jeśli tego nie zrobisz, możesz nie przywrócić poprawnie wartości alfa ImageView w przypadku, gdy Widok nadrzędny w hierarchii widoków przechwytuje Zdarzenie dotykowe (pomyśl, że widok przewijania zawija Obraz ImageView).

Tutaj jest kompletna klasa, która jest oparta na powyższej klasie, ale zajmuje się również ACTION_CANCEL. Używa klasy pomocniczej ImageViewCompat do abstrakcji różnice w API Pre-post JellyBean.

public class ChangeAlphaOnPressedTouchListener implements OnTouchListener {

    private final float pressedAlpha;

    public ChangeAlphaOnPressedTouchListener(float pressedAlpha) {
        this.pressedAlpha = pressedAlpha;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView iv = (ImageView) v;
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            ImageViewCompat.setAlpha(iv, pressedAlpha);
            break;

        case MotionEvent.ACTION_MOVE:
            if (isInsideViewBounds(v, event)) {
                ImageViewCompat.setAlpha(iv, pressedAlpha);
            } else {
                ImageViewCompat.setAlpha(iv, 1f);
            }
            break;
        case MotionEvent.ACTION_UP:
            ImageViewCompat.setAlpha(iv, 1f);
            break;
        case MotionEvent.ACTION_CANCEL:
            ImageViewCompat.setAlpha(iv, 1f);
        }
        return false;
    }

    private static boolean isInsideViewBounds(View v, MotionEvent event) {
        return event.getX() > 0 && event.getX() < v.getWidth() && event.getY() > 0
                && event.getY() < v.getHeight();
    }
}

Oto Mój kod. Chodzi o to, że ImageView pobiera filtr kolorów, gdy użytkownik dotknie go, a filtr kolorów jest usuwany, gdy użytkownik przestaje go dotykać.

Martin booka Weser, András, Ah Lam, altosh, rozwiązanie nie działa, gdy ImageView ma również onClickEvent. worawee.rozwiązanie S I kcoppock (z ImageButton) wymaga tła, które nie ma sensu, gdy ImageView nie jest przezroczysta.

Ten jest rozszerzeniem AZ_ idei o kolorze filtr.

class PressedEffectStateListDrawable extends StateListDrawable {

    private int selectionColor;

    public PressedEffectStateListDrawable(Drawable drawable, int selectionColor) {
        super();
        this.selectionColor = selectionColor;
        addState(new int[] { android.R.attr.state_pressed }, drawable);
        addState(new int[] {}, drawable);
    }

    @Override
    protected boolean onStateChange(int[] states) {
        boolean isStatePressedInArray = false;
        for (int state : states) {
            if (state == android.R.attr.state_pressed) {
                isStatePressedInArray = true;
            }
        }
        if (isStatePressedInArray) {
            super.setColorFilter(selectionColor, PorterDuff.Mode.MULTIPLY);
        } else {
            super.clearColorFilter();
        }
        return super.onStateChange(states);
    }

    @Override
    public boolean isStateful() {
        return true;
    }
}

Użycie:

Drawable drawable = new FastBitmapDrawable(bm);
imageView.setImageDrawable(new PressedEffectStateListDrawable(drawable, 0xFF33b5e5));

Próbowałem z:

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/get_started"
        android:src="@drawable/home_started"
        style="?android:borderlessButtonStyle"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:elevation="5dp"
        android:longClickable="true" />

Myślę, że najprostszym sposobem jest utworzenie nowego pliku XML. W tym przypadku nazwijmy to " przykładem.xml " w folderze drawable i umieść następujący kod:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/blue"
          android:state_pressed="true" />

</selector>

Ale wcześniej musisz ustawić kolory w kolorach.plik xml, w folderze values, Tak:

<resources>
    <color name="blue">#0000FF</color>
</resources>

Że wykonane, po prostu ustawić przycisk / ImageButton używać nowego układu, jak to:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/example"
/>

Następnie po kliknięciu tego obrazu, zmieni się na kolor ustawiony w

<item android:drawable="@color/blue"
      android:state_pressed="true" />

Udzielanie informacji zwrotnej tego chcesz...

.To najlepsze rozwiązanie, jakie widziałem. Jego bardziej ogólne

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:fillAfter="true" >

<alpha
    android:duration="100"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />
 </set>

Oto moje rozwiązanie, które, używając "nineOldAndroids" biblioteka, obsługuje również stare API:

rootView.setOnTouchListener(new OnTouchListener() {

    @Override
    public boolean onTouch(final View v, final MotionEvent event) {

        switch (event.getAction()) {

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                v.setBackgroundResource(R.drawable.listview_normal);
                ViewHelper.setAlpha(imageView, 1);
                break;

            case MotionEvent.ACTION_DOWN:
                v.setBackgroundResource(0);
                v.setBackgroundColor(getResources().getColor(R.color.listview_pressed));
                ViewHelper.setAlpha(imageView, 0.75f);
                break;
        }
        return false;
    }
});

Zakłada, że rootView jest samą komórką( układem) i że ma pojedynczy widok imageView, na który chcesz mieć wpływ kolor, który chcesz zastosować do całej komórki.

EDIT: jeśli chcesz, możesz również rozszerzyć ImageView, aby obsłużyć pierwszy plan i ustawić go na "?android: attr / selectableItemBackground". Jest biblioteka do tego Proszę. i tutorial Jak to zrobić dla każdego widoku chcesz, Proszę..

Jeśli chcesz ripple po naciśnięciu, może być podany przez ten kod:

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

Podobnie można zaimplementować efekt kliknięcia dla TextView

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

Zrobiłem w XML-z 0 padding wokół obrazu i marszczyć na szczycie Obrazu:

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@drawable/my_image"
    android:clickable="true"
    android:focusable="true"
    android:src="?android:attr/selectableItemBackground" />

Wystarczy dodać atrybut XML, android: clickable= "true"...

Jak na razie, powinniśmy rozwijać Material Design praktykę. W takim przypadku możesz dodać efekt falowania na widoku ImageView.