Teinte / dim drawable sur la touche

L'application que je suis en train de travailler sur utilise beaucoup de ImageViews comme des boutons. Les graphiques sur ces boutons pour utiliser le canal alpha de la fermeture de l'un des bords de la touche et de leur donner un aspect irrégulier. Actuellement, nous avons à générer des 2 graphiques pour chaque bouton 1 pour sélectionner/concentré/l'état activé et l'autre pour la valeur par défaut désactivée état) et l'utilisation d'un StateListDrawable définis dans un fichier XML pour chaque bouton.

Alors que cela fonctionne bien, il semble extrêmement peu rentable puisque tous les graphiques sélectionnés sont tout simplement teinté versions de la partie non sélectionnée boutons. Ces prendre le temps de produire (mais peu) et prennent de la place dans la finale APK. Il semble qu'il devrait y avoir un moyen facile de ce automatiquement.

La solution parfaite, il me semble, est d'utiliser ImageViews pour chaque bouton et de spécifier dans sa teinte d'attribut d'un ColorStateList. Cette approche a l'avantage qu'une seule XML ColorStateList est nécessaire pour tous les boutons (qui partagent la même teinte). Toutefois, il ne fonctionne pas. Comme mentionné ici, ImageView jette un NumberFormatException lorsque la valeur fournie à la teinte n'est rien d'autre que d'une seule couleur.

Ma prochaine tentative a été d'utiliser un LayerDrawable pour le drawable. À l'intérieur de la liste des calques, on aurait l'image d'origine au bas de la pile couverts par un semi-transparente rectangle. Il a travaillé sur les parties solides de la touche graphique. Cependant les bords, qui étaient censés être entièrement transparent, étaient maintenant de la même couleur que la couche supérieure.

Quelqu'un a rencontré ce problème avant et trouvé une solution raisonnable? Je voudrais tenir à XML des approches, mais sera probablement le code d'un simple ImageView sous-classe qui fera le nécessaire teinter dans le code.

OriginalL'auteur zienkikk | 2011-11-07

android android-xml

Vous pouvez combiner StateListDrawable et LayerDrawable pour cela.

public Drawable getDimmedDrawable(Drawable drawable) {
        Resources resources = getContext().getResources();
        StateListDrawable stateListDrawable = new StateListDrawable();
        LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
                drawable,
                new ColorDrawable(resources.getColor(R.color.translucent_black))
        });
        stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, layerDrawable);
        stateListDrawable.addState(new int[]{android.R.attr.state_focused}, layerDrawable);
        stateListDrawable.addState(new int[]{android.R.attr.state_selected}, layerDrawable);
        stateListDrawable.addState(new int[]{}, drawable);
        return stateListDrawable;
}

Je suppose que notre colors.xml on dirait que cette

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="translucent_black">#80000000</color>
</resources>

Comment puis-je faire cela fonctionne bien pour les 9-patch fichiers, de sorte que la totalité de la non-transparence de l'image, il n'y aurait obscurci après le toucher des événements? Actuellement, ce qu'il fait à 9-patch images est pour changer seulement la partie qui est défini comme le contenu de l'image, et non la totalité de l'image elle-même...

OriginalL'auteur sealskej

Pour ceux qui ont rencontré un besoin similaire, la résolution de ce code est assez propre. Voici un exemple:

public class TintableButton extends ImageView {

    private boolean mIsSelected;

    public TintableButton(Context context) {
        super(context);
        init();
    }   

    public TintableButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }   

    public TintableButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mIsSelected = false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN && !mIsSelected) {
            setColorFilter(0x99000000);
            mIsSelected = true;
        } else if (event.getAction() == MotionEvent.ACTION_UP && mIsSelected) {
            setColorFilter(Color.TRANSPARENT);
            mIsSelected = false;
        }

        return super.onTouchEvent(event);
    }
}

C'est pas fini, mais fonctionne bien comme une preuve de concept.

C'est, à mon humble avis, la meilleure solution, et doit être accepté de répondre, comme il fonctionne bien, et crée une ré-utilisable composant qui peut être utilisé dans n'importe quel modèle de remplacer simplement une ImageView. Belle solution!
Merci, très cool! J'ai modifié le onTouchEvent un peu comme ceci: else if ((event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL) && mIsSelected) Cela garantit que la teinte disparaît lorsque l'utilisateur maintient le bouton, le fait glisser son doigt à l'extérieur et les rejets.
init() ne doit être appelée que dans le TintableButton(Context context, AttributeSet attrs, int defStyle) constructeur

OriginalL'auteur zienkikk

Votre réponse était excellent 🙂

Cependant, au lieu de créer un objet bouton, je ne suis qu'à l'appel d'une OnTouchlistener pour modifier l'état de chaque vue.

public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        Drawable background =  v.getBackground();
        background.setColorFilter(0xBB000000, PorterDuff.Mode.SCREEN);
        v.setBackgroundDrawable(background);
    } else if (event.getAction() == MotionEvent.ACTION_UP) {
        Drawable background =  v.getBackground();
        background.setColorFilter(null);
        v.setBackgroundDrawable(background);
    }

    return true;

}

Donne les mêmes résultats si

Qui travaille trop. La raison, j'ai choisi d'étendre les classes nécessaires pour que je peut gérer tout cela dans une mise en page XML après la classe est prête. De cette façon, le code qui utilise ces teinter les widgets ne diffère pas de code qui utilise des composants standard.

OriginalL'auteur htafoya

Je pense que cette solution est simple!

Étape 1: Créer res/drawable/dim_image_view.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:drawable="@drawable/dim_image_view_normal"/> <!-- focused -->
    <item android:state_pressed="true" android:drawable="@drawable/dim_image_view_pressed"/> <!-- pressed -->
    <item android:drawable="@drawable/dim_image_view_normal"/> <!--default -->
</selector>

Étape 2: Créer res/drawable/dim_image_view_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item><bitmap android:src="@mipmap/your_icon"/></item>
</layer-list>

Étape 3: Créer res/drawable/dim_image_view_pressed.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item><bitmap android:src="@mipmap/your_icon" android:alpha="0.5"></bitmap></item>
</layer-list>

Étape 4: Essayez de définir l'image en xml mise en page:

android:src="@drawable/dim_image_view"

OriginalL'auteur Joao Ferreira

1

J'ai trop irrégulières, à la recherche de boutons et ont besoin de la teinte. En fin de compte, j'ai juste eu recours pour avoir un état colorlist que mon ImageButton arrière-plan. Donne l'impression que la couleur du bouton change sur la presse et est très simple et moins intensives en calcul. Je sais que ce n'est pas exactement une teinte, mais il ne donner qu'il n'est nécessaire de donner de la rétroaction visuelle à l'utilisateur, dans ce qui est habituellement un instant fugace.
```
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:state_pressed="true"
        android:drawable="@android:color/darker_gray" />
    <item android:drawable="@android:color/transparent" />
</selector>
```
OriginalL'auteur Code Poet
1

Vous pouvez utiliser une classe que j'ai créé https://github.com/THRESHE/TintableImageButton
Pas exactement la meilleure solution, mais il fonctionne.

OriginalL'auteur Kostia Dombrovsky

Votre réponse était également excellent 😉

Je suis modifiant peu peu, il vous donnera un résultat de ce genre:

Teinte /dim drawable sur la touche

Rect rect;
Drawable background;
boolean hasTouchEventCompleted = false;

@Override
public boolean onTouch(View v, MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_DOWN) {
        rect = new Rect(v.getLeft(), v.getTop(), v.getRight(),
                v.getBottom());
        hasTouchEventCompleted = false;
        background = v.getBackground();
        background.setColorFilter(0x99c7c7c7,
                android.graphics.PorterDuff.Mode.MULTIPLY);
        v.setBackgroundDrawable(background);
    } else if (event.getAction() == MotionEvent.ACTION_UP
            && !hasTouchEventCompleted) {
        background.setColorFilter(null);
        v.setBackgroundDrawable(background);

    } else if (event.getAction() == MotionEvent.ACTION_MOVE) {
        if (!rect.contains(v.getLeft() + (int) event.getX(), v.getTop()
                + (int) event.getY())) {
            //User moved outside bounds
            background.setColorFilter(null);
            v.setBackgroundDrawable(background);
            hasTouchEventCompleted = true;
        }
    }


    //Must return false, otherwise you need to handle Click events yourself.  
    return false;
}

OriginalL'auteur Favas Kv

Je pense que cette solution est assez simple:

    final Drawable drawable = ... ;
    final int darkenValue = 0x3C000000;
    mButton.setOnTouchListener(new OnTouchListener() {
        Rect rect;
        boolean hasColorFilter = false;

        @Override
        public boolean onTouch(final View v, final MotionEvent motionEvent) {
            switch (motionEvent.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    rect = new Rect(v.getLeft(), v.getTop(), v.getRight(), v.getBottom());
                    drawable.setColorFilter(darkenValue, Mode.DARKEN);
                    hasColorFilter = true;
                    break;
                case MotionEvent.ACTION_MOVE:
                    if (rect.contains(v.getLeft() + (int) motionEvent.getX(), v.getTop()
                            + (int) motionEvent.getY())) {
                        if (!hasColorFilter)
                            drawable.setColorFilter(darkenValue, Mode.DARKEN);
                        hasColorFilter = true;
                    } else {
                        drawable.setColorFilter(null);
                        hasColorFilter = false;
                    }
                    break;
                case MotionEvent.ACTION_UP:
                case MotionEvent.ACTION_CANCEL:
                    drawable.setColorFilter(null);
                    hasColorFilter = false;
                    break;
            }
            return false;
        }
    });

OriginalL'auteur android developer

Vous devez vous connecter pour publier un commentaire.