it-swarm.com.de

Wie hebt man ImageView hervor, wenn man darauf klickt oder darauf fokussiert?

Ein gutes Beispiel hierfür ist entweder der Twitter-Startbildschirm (der Bildschirm mit den großen Symbolen, die beim ersten Start der Anwendung angezeigt werden) oder auch nur die Anwendungsleiste, wenn Sie ein Anwendungssymbol fokussieren.

Grundsätzlich muss ich eine ImageView markieren, bei der die Konturen des Bildes in der ImageView hervorgehoben werden und es aussieht, als wäre es ein Rand zu diesem Bild. Ich möchte das Highlight auch so anpassen, dass es eine bestimmte Farbe hat und ausgeblendet wird.

Vielen Dank,

bräutigam

44
groomsy

Sie müssen das src -Attribut des ImageView einer Statusliste zuweisen, die gezeichnet werden kann. Mit anderen Worten, diese Statusliste hätte ein anderes Bild für ausgewählt, gedrückt, nicht ausgewählt usw. - so macht es die Twitter-App.

Wenn Sie also eine ImageView hatten:

<ImageView style="@style/TitleBarLogo"
            Android:contentDescription="@string/description_logo"
            Android:src="@drawable/title_logo" />

Das src drawable (title_logo.xml) würde so aussehen:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_focused="true" Android:state_pressed="true" Android:drawable="@drawable/title_logo_pressed"/>
    <item Android:state_focused="false" Android:state_pressed="true" Android:drawable="@drawable/title_logo_pressed"/>
    <item Android:state_focused="true" Android:drawable="@drawable/title_logo_selected"/>
    <item Android:state_focused="false" Android:state_pressed="false" Android:drawable="@drawable/title_logo_default"/>
</selector>

Die Google IO Schedule App hat ein gutes Beispiel dafür.

81
Josh Clemm

Wenn Sie für den gedrückten Zustand keine andere Zeichenfläche haben, können Sie setColorFilter verwenden, um einen einfachen Farbeffekt zu erzielen.

Es verhält sich wie bei der gedrückten Statusauswahl. Wenn das Bild gedrückt wird, ändert sich der Hintergrund in eine hellgraue Farbe.

final ImageView image = (ImageView) findViewById(R.id.my_image);
image.setOnTouchListener(new View.OnTouchListener() {
        private Rect rect;

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_DOWN){
                image.setColorFilter(Color.argb(50, 0, 0, 0));
                rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
            }
            if(event.getAction() == MotionEvent.ACTION_UP){
                image.setColorFilter(Color.argb(0, 0, 0, 0));
            }
            if(event.getAction() == MotionEvent.ACTION_MOVE){
                if(!rect.contains(v.getLeft() + (int) event.getX(), v.getTop() + (int) event.getY())){
                    image.setColorFilter(Color.argb(0, 0, 0, 0));
                } 
            }
            return false;
        }
    });

Bewegt sich der Finger außerhalb der Ansichtsgrenzen, wird der Standardhintergrund wiederhergestellt.

Es ist wichtig, false von onTouch zurückzugeben, wenn Sie onClickListner auch unterstützen möchten.

26
klimat

Dies ist eine Erweiterung von mklimek. Ich konnte es nicht richtig aus seinem Schnipsel arbeiten. Ich habe ein bisschen bearbeitet

 ImageView testImage = (ImageView)findViewById(R.id.imageView);
 testImage.setOnTouchListener(listener);

 View.OnTouchListener listener = new View.OnTouchListener() {
        private Rect rect;
        @Override
        public boolean onTouch(View v, MotionEvent event) {


            ImageView image = (ImageView) v;
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    image.getDrawable().setColorFilter(0x77000000,PorterDuff.Mode.SRC_ATOP);
                    image.invalidate();                        
                    break;

                case MotionEvent.ACTION_UP:                        
                case MotionEvent.ACTION_CANCEL: {
                    //clear the overlay
                    image.getDrawable().clearColorFilter();
                    image.invalidate();
                    break;
                }
            }

            return true;
        }
    };
2
SilleBille

Zum Anzeigen dynamischer Bilder können Sie ein LayerDrawable als Bildquelle verwenden.

LayerDrawable d = new LayerDrawable(new Drawable[]{new BitmapDrawable(myBmp), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);
2
Tom Bollwitt

Nur um Josh Clemms Antwort zu vervollständigen. Sie können dasselbe mit src definierte Bild auch beibehalten, aber nur den Hintergrund ändern oder hervorheben. Das würde ungefähr so ​​aussehen:

logo_box.xml

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/background_normal"/>
    <item Android:state_pressed="false" Android:drawable="@drawable/background_pressed"/>
</selector>

Und dann definieren Sie den Hintergrund Ihrer Schaltfläche als logo_box:

<ImageView
    Android:contentDescription="@string/description_logo"
    Android:src="@drawable/logo"
    Android:background="@drawable/logo_box" />

Wo background_normal und background_pressed so komplex sein können, wie Sie möchten, oder so einfach wie ein @color :)

2
jsidera

Meine Lösung, benutzerdefiniertes Attribut für ImageView:
https://github.com/henrychuangtw/Android-ImageView-hover

Schritt 1: Styling deklarieren

<declare-styleable name="MyImageViewAttr">
    <attr name="hover_res" format="reference" />
</declare-styleable>


Schritt 2: Benutzerdefiniertes ImageView

public class MyImageView extends ImageView {

int resID, resID_hover;

public MyImageView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}
public MyImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub

    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
    resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
    if(resID_hover != -1){
        int[] attrsArray = new int[] {
                Android.R.attr.src 
            };

        TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
        resID = ta.getResourceId(0 , View.NO_ID);           
        ta.recycle();

        setOnTouchListener(listener_onTouch);
    }

    array.recycle();

}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    // TODO Auto-generated constructor stub
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyImageViewAttr);
    resID_hover = array.getResourceId(R.styleable.MyImageViewAttr_hover_res, -1);
    if(resID_hover != -1){
        int[] attrsArray = new int[] {
                Android.R.attr.src 
            };

        TypedArray ta = context.obtainStyledAttributes(attrs, attrsArray);
        resID = ta.getResourceId(0 , View.NO_ID);           
        ta.recycle();

        setOnTouchListener(listener_onTouch);
    }

    array.recycle();
}



OnTouchListener listener_onTouch = new OnTouchListener() {

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        // TODO Auto-generated method stub

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            setImageResource(resID_hover);
            break;

        case MotionEvent.ACTION_MOVE:

            break;

        case MotionEvent.ACTION_UP:
            setImageResource(resID);
            break;

        default:
            break;
        }


        return false;
    }
};

}


Schritt 3: Deklarieren Sie myattr: xmlns: myattr = "http://schemas.Android.com/apk/res-auto" in der Layout-XML

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:myattr="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">


Schritt 4: Legen Sie myattr: hover_res für MyImageView fest

<dev.henrychuang.component.MyImageView 
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:clickable="true"
        myattr:hover_res="@drawable/icon_home_h"
        Android:src="@drawable/icon_home"/>


2
HenryChuang

Mir ist aufgefallen, dass eine XML-Datei nicht ausreicht:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/ic_filter_up" Android:state_pressed="true"/>
    <item Android:drawable="@drawable/ic_filter_up_shadow"/>
</selector>

Ein ImageView drückt nicht. Sie sollten einem ImageView auch ein OnClickListener zuweisen. Dann wird es als Knopf gedrückt.

1
CoolMind

Ich habe eine kleine Bibliothek zusammengestellt, die dabei helfen soll: https://github.com/noveogroup/Highlightify

Grundsätzlich erstellt es Selector in Runtime, und es sollte wirklich einfach zu bedienen sein. Obwohl, fokussierter Zustand noch nicht unterstützt ...

1
Roman Zhilich

Ich verwende Android:state_selected="true" Für Status von imageView.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/ic_enable" Android:state_selected="true" />

    <item Android:drawable="@drawable/ic_disable" Android:state_selected="false" />

    <!--for default-->
    <item Android:drawable="@drawable/ic_enable" />

</selector>

verwenden Sie img_view.setSelected(true) ODER img_view.setSelected(false), um den Bildstatus in Java/kotlin Code zu ändern .

0
Geet Thakur

Verwenden Sie selectableItemBackground als Hintergrund:

Android:background="?android:attr/selectableItemBackground"
0
slowcar