2010-04-09 80 views
73

如果我使用一個帶選擇器的ImageButton作爲背景,是否有一個狀態可以改變,這會改變它的外觀?現在我可以在按下時更改圖像,但似乎沒有「突出顯示」或「選定」或類似的狀態,可讓我隨意切換其外觀。具有選定狀態的Android ImageButton?

這是我的XML;它只在按下時改變外觀。

<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,並跟蹤選定的狀態似乎有點破解。如果您想切換功能,您應該使用切換按鈕。 – 2012-03-04 08:40:41

回答

180

這個工作對我來說:

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

然後在Java中:

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

    } 

}); 

爲了平穩過渡,你也可以提動畫時間:

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

這對我有效,但我想補充一點,你應該在你的drawable文件夾中創建這個xml,並且如果你想讓ImageButton按下時突出顯示,你應該使用android:state_pressed而不是state_selected。此外,這個狀態應該高於沒有狀態的項目,因爲它不那麼一般。 – wzbozon 2013-12-16 17:46:57

+2

'注意:順序是重要的(第一個匹配的狀態是呈現的這個確實有效,但奇怪的是我沒有得到WHY? – 2015-01-03 09:22:58

+2

在沒有任何狀態屬性的情況下,這個項目會匹配任何狀態。在選擇器中的第二項作爲「全部捕捉」狀態 – joshrl 2015-01-22 18:47:06

2

試試這個:

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

也爲色彩我有成功與

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

嗯。似乎沒有幫助。我正在使用一個CompoundButton。是否有特定於該類型按鈕的狀態用於打開\關閉? – Joren 2010-04-10 00:18:13

+0

是的,它被稱爲檢查看_isChecked()_ http://developer.android.com/reference/android/widget/CompoundButton。html – Bostwickenator 2013-01-10 22:39:49

9

這樣做沒有更多的圖像,最好的辦法:

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

你可以使用getResources()。getColor(R.color.lightblue)來從你的xml中着色 – 2015-02-06 12:11:41

+0

@András需要保持b utton按了一會兒。你知道那是爲什麼嗎? – lionelmessi 2015-12-31 03:35:58

+0

你可以使用睡眠,但我不推薦它... – 2016-01-04 12:10:53

15

ToggleImageButton這實現Checkable接口並支持OnCheckedChangeListenerandroid:checked xml屬性:

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 /價值/ attrs.xml:

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

這對我來說是完美的答案。 – Damir 2013-08-14 08:37:43

+1

我該如何使用它?我按照http://developer.android.com/training/custom-views/create-view.html中的說明操作,但無法使其工作。 – atisman 2013-09-18 00:31:20

+2

謝謝!請注意,具有'state_checked'的選擇器不適用於此,但您必須使用'state_selected'。 – 2013-12-05 14:11:40

1

創建一個res/drawable文件夾中的XML文件。例如, 「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> 

您可以將那些你喜歡的文件,例如,變 「bg_state_1」 到 「bg_state_deselected」 和 「bg_state_2」 到 「bg_state_selected」。

在任何這些,你可以寫類似的文件:

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

佈局中的文件創建的ImageView或ImageButton的具有以下屬性:

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

在後面的代碼:

image.setSelected(!image.isSelected()); 
相關問題