Android ImageButton avec un état sélectionné?
-
25-09-2019 - |
Question
Si j'utilisais un ImageButton avec un sélecteur pour son arrière-plan, est-il un état que je peux changer ce qui en fera changer son apparence? En ce moment, je peux l'obtenir pour changer les images lorsqu'il est pressé, mais il ne semble pas « mis en évidence » ou « sélectionné » ou état semblable qui me permet de basculer son apparence à volonté.
Voici mon XML; il ne change que l'apparence lorsqu'il est pressé.
<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" />
La solution
Cela fonctionne pour moi:
<?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>
Et puis en 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
}
}
});
Pour une transition progressive, vous pouvez également mentionner le temps d'animation:
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="@android:integer/config_mediumAnimTime">
Autres conseils
ToggleImageButton
qui implémente l'interface Checkable
et prend en charge l'attribut xml OnCheckedChangeListener
et de android:checked
:
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 / valeurs / attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ToggleImageButton">
<attr name="android:checked" />
</declare-styleable>
</resources>
La meilleure façon de le faire sans plus d'images:
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;
}
});
}
Essayez ceci:
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="@drawable/map_toolbar_details_selected" />
De même pour les couleurs que j'ai eu du succès avec
<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>
Créer un fichier XML dans un dossier res/drawable
. Par exemple, "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>
Vous pouvez combiner ces fichiers que vous souhaitez, par exemple, le changement "bg_state_1" à "bg_state_deselected" et "bg_state_2" à "bg_state_selected".
Dans tous ces fichiers, vous pouvez écrire quelque chose comme:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ccdd00"/>
<corners android:radius="5dp"/>
</shape>
Créer dans une mise en page d'un fichier ou ImageView ImageButton avec les attributs suivants:
<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"/>
Plus tard dans le code:
image.setSelected(!image.isSelected());