Как я могу дать эффект просмотра изображения, как кнопка на Android? - PullRequest
77 голосов
/ 06 января 2011

В моем приложении для Android есть изображение, которое я использую как кнопку с указанным событием onClick, но, как вы можете догадаться, оно не дает эффекту просмотра изображения при нажатии.Как мне этого добиться?

Ответы [ 30 ]

74 голосов
/ 23 января 2013

Вы можете сделать это с одним изображением, используя что-то вроде этого:

     //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;
        }
    });

Возможно, я сделаю это в подклассе ImageView (или ImageButton, так как он также является подклассом ImageView) для упрощения повторного использования, но это должно позволить вам применить «выбранный» вид к представлению изображения.

52 голосов
/ 06 января 2011

Вы можете создавать различные изображения для состояний щелчка / отсутствия щелчка и устанавливать их в onTouchListener следующим образом

final ImageView v = (ImageView) findViewById(R.id.button0);
        v.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent arg1) {
                switch (arg1.getAction()) {
                case MotionEvent.ACTION_DOWN: {
                    v.setImageBitmap(res.getDrawable(R.drawable.img_down));
                    break;
                }
                case MotionEvent.ACTION_CANCEL:{
                    v.setImageBitmap(res.getDrawable(R.drawable.img_up));
                    break;
                }
                }
                return true;
            }
        });

Лучшим выбором является определение селектора следующим образом

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

и выберите изображение в случае:

v.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View arg0, MotionEvent arg1) {
                v.setSelected(arg1.getAction()==MotionEvent.ACTION_DOWN);
                return true;
            }
        });
43 голосов
/ 13 октября 2011

Можно сделать с только один файл изображения , используя метод ColorFilter. Однако ColorFilter рассчитан на работу с ImageViews, а не с кнопками, поэтому вам нужно преобразовать свои кнопки в ImageViews. Это не проблема, если вы все равно используете изображения в качестве кнопок, но это более раздражает, если у вас есть текст ... В любом случае, если вы найдете способ обойти проблему с текстом, вот код для использования:

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

Это применяет красное наложение к кнопке (цветовой код - это шестнадцатеричный код для полностью непрозрачного красного - сначала две цифры - прозрачность, затем RR GG BB.).

39 голосов
/ 06 января 2014

РЕДАКТИРОВАТЬ : хотя оригинальный ответ, приведенный ниже, работает и его легко настроить, см. этот пост в Android Developer Advocate в Google, если вы хотите / нуждаетесь в более эффективной реализации,Также обратите внимание, что атрибут android:foreground равен и доступен для всех видов , включая ImageView, по умолчанию в Android M.


Проблема с использованием селекторадля ImageView это то, что вы можете установить его только как фон представления - пока ваше изображение непрозрачно, вы не увидите эффект селектора за ним.

Хитрость заключается в том, чтобы обернуть ваш ImageView в FrameLayout сатрибут android:foreground, который позволяет нам определять оверлей для его содержимого.Если мы установим android:foreground для селектора (например, ?android:attr/selectableItemBackground для уровня API 11+) и добавим OnClickListener к FrameLayout вместо ImageView, изображение будет наложено на рисование нашего селектора -желаемый эффект щелчка!

Вот:

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

(обратите внимание, это должно быть размещено в макете вашего родителя.)

final View imageButton = findViewById(R.id.imageButton);
imageButton.setOnClickListener(new OnClickListener(){
    @Override
    public void onClick(View view) {
        // do whatever we wish!
    }
});
26 голосов
/ 15 июня 2014

Используйте style = "? Android: borderlessButtonStyle" в файле XML. Появится эффект щелчка по умолчанию для Android.

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" 
    style="?android:borderlessButtonStyle"
/>
21 голосов
/ 06 января 2011

Просто используйте ImageButton .

14 голосов
/ 17 июля 2014

Вот мой простой способ решить эту проблему:

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);
    });

В файле 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>
8 голосов
/ 10 мая 2011

Для определения выбора селектора

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

Я должен использовать android: state_pressed вместо 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>
7 голосов
/ 09 ноября 2015

Установите выбираемый фон для ImageView и добавьте немного отступов. Затем прикрепите 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"/>
5 голосов
/ 29 января 2011

Вы можете попробовать с android:background="@android:drawable/list_selector_background" чтобы получить тот же эффект, что и «Добавить будильник» в «Будильнике» по умолчанию (теперь «Настольные часы»).

...