Seçili bir duruma sahip Android ImageButton?


87

Arka planı için bir seçiciye sahip bir ImageButton kullanıyorsam, görünümünü değiştirecek değiştirebileceğim bir durum var mı? Şu anda basıldığında görüntüleri değiştirmesini sağlayabiliyorum, ancak "vurgulanmış" veya "seçili" veya benzeri bir durum görünmüyor, bu da görünüşünü istediğim gibi değiştirmeme izin veriyor.

İşte XML'im; yalnızca basıldığında görünümü değiştirir.

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


1
ImageButton kullanmak ve seçilen durumu izlemek biraz hile gibi görünüyor. İşlevselliği değiştirmek istiyorsanız, bir geçiş düğmesi kullanmalısınız.
Andras Balázs Lajtha

Yanıtlar:


215

Bu benim için çalışıyor:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- NOTE: order is important (the first matching state(s) is what is rendered) -->
    <item 
        android:state_selected="true" 
        android:drawable="@drawable/info_icon_solid_with_shadow" />
    <item 
        android:drawable="@drawable/info_icon_outline_with_shadow" />
 </selector>

Ve sonra java'da:

//assign the image in code (or you can do this in your layout xml with the src attribute)
imageButton.setImageDrawable(getBaseContext().getResources().getDrawable(R.drawable....));

//set the click listener
imageButton.setOnClickListener(new OnClickListener() {

    public void onClick(View button) {
        //Set the button's appearance
        button.setSelected(!button.isSelected());

        if (button.isSelected()) {
            //Handle selected state change
        } else {
            //Handle de-select state change
        }

    }

});

Sorunsuz geçiş için animasyon süresinden de bahsedebilirsiniz:

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">

3
Bu benim için çalıştı, ancak şunu eklemek istiyorum, bu xml'yi çekilebilir klasörünüzde oluşturmalı ve ImageButton'un basıldığında vurgulamasını istiyorsanız, state_selected yerine android: state_pressed kullanmalısınız. Ayrıca, bu durum, daha az genel olduğundan, durumsuz bir öğenin üzerinde olmalıdır.
Denis Kutlubaev

3
NOTE: order is important (the first matching state(s) is what is renderedbu işe yaradı ama garip NEDEN anlamadım?
Muhammad Babar

2
Herhangi bir durum özniteliğinin yokluğunda, öğe herhangi bir durumla eşleşecektir. Bu nedenle, seçicideki ikinci öğeyi "tümünü yakala" durumu olarak düşünün.
joshrl

2
Sipariş önemli değildir, yalnızca android:state_selected="false" varsayılan olanı sağladığınızdan emin olmanız gerekir !
Muhammad Babar

Aynısını bir widget'ta nasıl yapabilirim? Bir düğmem var ama nasıl yapılacağını çözemiyorum.
Si8

19

ToggleImageButtonCheckablearabirimi ve destekleri OnCheckedChangeListenerve android:checkedxml niteliğini uygulayan :

public class ToggleImageButton extends ImageButton implements Checkable {
    private OnCheckedChangeListener onCheckedChangeListener;

    public ToggleImageButton(Context context) {
        super(context);
    }

    public ToggleImageButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        setChecked(attrs);
    }

    public ToggleImageButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        setChecked(attrs);
    }

    private void setChecked(AttributeSet attrs) {
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ToggleImageButton);
        setChecked(a.getBoolean(R.styleable.ToggleImageButton_android_checked, false));
        a.recycle();
    }

    @Override
    public boolean isChecked() {
        return isSelected();
    }

    @Override
    public void setChecked(boolean checked) {
        setSelected(checked);

        if (onCheckedChangeListener != null) {
            onCheckedChangeListener.onCheckedChanged(this, checked);
        }
    }

    @Override
    public void toggle() {
        setChecked(!isChecked());
    }

    @Override
    public boolean performClick() {
        toggle();
        return super.performClick();
    }

    public OnCheckedChangeListener getOnCheckedChangeListener() {
        return onCheckedChangeListener;
    }

    public void setOnCheckedChangeListener(OnCheckedChangeListener onCheckedChangeListener) {
        this.onCheckedChangeListener = onCheckedChangeListener;
    }

    public static interface OnCheckedChangeListener {
        public void onCheckedChanged(ToggleImageButton buttonView, boolean isChecked);
    }
}

res / values ​​/ attrs.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ToggleImageButton">
        <attr name="android:checked" />
    </declare-styleable>
</resources>

2
Nasıl kullanabilirim? Developer.android.com/training/custom-views/create-view.html'deki talimatı uyguladım ama çalışmasını sağlayamadım.
atisman

2
Teşekkürler! İle bir seçicinin state_checkedbununla çalışmadığını unutmayın, kullanmanız gerekir state_selected.
Florian von Stosch

11

Bunu daha fazla görüntü olmadan yapmanın en iyi yolu:

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

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

1
xml'nizden renklendirmek için getResources (). getColor (R.color.lightblue) kullanabilirsiniz.
Beto Caldas

@ András'ın düğmeyi biraz daha basılı tutması gerekiyor. Bunun neden olduğunu biliyor musun?
lionelmessi

3

XML dosyası oluştur res/drawable klasörde . Örneğin, "btn_image.xml":

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_state_1"
          android:state_pressed="true"
          android:state_selected="true"/>
    <item android:drawable="@drawable/bg_state_2"
          android:state_pressed="true"
          android:state_selected="false"/>
    <item android:drawable="@drawable/bg_state_selected"
          android:state_selected="true"/>
    <item android:drawable="@drawable/bg_state_deselected"/>
</selector>

Beğendiğiniz dosyaları birleştirebilirsiniz, örneğin, "bg_state_1" i "bg_state_deselected" ve "bg_state_2" yi "bg_state_selected" olarak değiştirebilirsiniz.

Bu dosyaların herhangi birinde şöyle bir şey yazabilirsiniz:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#ccdd00"/>
    <corners android:radius="5dp"/>
</shape>

Bir düzen dosyasında, aşağıdaki niteliklere sahip bir ImageView veya ImageButton oluşturun:

<ImageView
    android:id="@+id/image"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:adjustViewBounds="true"
    android:background="@drawable/btn_image"
    android:padding="10dp"
    android:scaleType="fitCenter"
    android:src="@drawable/star"/>

Daha sonra kodda:

image.setSelected(!image.isSelected());

2

Bunu dene:

 <item
   android:state_focused="true"
   android:state_enabled="true"
   android:drawable="@drawable/map_toolbar_details_selected" />

Ayrıca başarılı olduğum renkler için

<selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:state_selected="true"

            android:color="@color/primary_color" />
        <item
            android:color="@color/secondary_color" />
</selector>

Hmm. Yardımcı olmuyor. CompoundButton kullanıyorum. Açma / kapama için bu tür düğmeye özgü bir durum var mı?
Joren

Evet, işaretli olarak adlandırılır, bkz. İsChecked () developer.android.com/reference/android/widget/…
Bostwickenator

0
if (iv_new_pwd.isSelected()) {
                iv_new_pwd.setSelected(false);
                Log.d("mytag", "in case 1");
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
            } else {
                Log.d("mytag", "in case 1");
                iv_new_pwd.setSelected(true);
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            }
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.