web-dev-qa-db-fra.com

Comment créer Android spinner sans triangle vers le bas sur le côté droit du widget

J'ai un écran où l'utilisateur a de nombreux éléments à saisir, donc l'espace d'écran est limité.

Je veux que l'apparence du widget à l'écran (avant que l'utilisateur n'appuie dessus) soit similaire à un EditText ou à la partie gauche du widget Spinner (sans le triangle vers le bas normal) sur le côté droit du Spinner. Ensuite, lorsque l'utilisateur appuie sur le widget, il/elle obtiendra la boîte de dialogue de sélection Spinner normale.

Y a-t-il un attribut de style Spinner que je peux changer pour y parvenir?

Je n'ai pas pu voir un code comme celui-ci.

Merci

androidandroid-layoutspinnernine-patch
42
Mike

Une chose que vous pouvez faire est de prendre le code source de Spinner de Android, ainsi que les mises en page et les ressources associées, et de les utiliser pour créer votre propre widget personnalisé (vous ne le ferez probablement que besoin de supprimer la flèche de la mise en page et de modifier un peu le code en fonction de vos besoins).

EDIT: Vous avez raison, après ce post, c'était en fait très simple :) Vous devez faire deux choses. Créez d'abord un fichier styles.xml sous res/values, ouvrez-le et ajoutez ce qui suit:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style parent="@Android:style/Widget.Spinner" name="SpinnerAsEditText">
        <item name="Android:background">@Android:drawable/edit_text</item>
    </style>
</resources>

Ensuite, dans votre mise en page, ajoutez le Spinner comme ceci:

<Spinner style="@style/SpinnerAsEditText" anyOtherAttributeYouNeed="..."></Spinner>

Ça y est, maintenant le spinner ressemblera à un simple EditText, sans cette flèche vers le bas inutile et ennuyeuse.

40
lencinhaus

C'est une question assez ancienne, mais je pense qu'elle est toujours pertinente, alors voici ma réponse:

Méthode la plus simple

la réponse de lencinhaus est correcte. Cela fonctionne, mais cela peut être fait d'une manière encore plus simple: il suffit d'ajouter un autre arrière-plan. L'exemple ci-dessous utilise l'arrière-plan standard Button pour une apparence plus homogène:

<Spinner
    Android:id="@+id/my_spinner"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:Prompt="@string/my_Prompt" 
    Android:background="@Android:drawable/btn_default"
    />

Le style utilisé dans l'autre réponse ne fait pas plus qu'appliquer un arrière-plan au widget. Cela peut être fait directement sur le widget, évitant ainsi la nécessité d'un nouveau fichier xml. Bien sûr, si vous voulez quand même appliquer un style au spinner, il n'y a rien de mal à cette approche.

Pourquoi?

La clé pour comprendre comment cela fonctionne réside dans la description des fichiers PNG à 9 correctifs . Les lignes à droite et en bas sont utilisées pour le rembourrage, c'est-à-dire pour empêcher un certain espace d'être utilisé par son contenu. Dans ce cas, le texte à l'intérieur. L'arrière-plan Spinner standard utilise une image avec une flèche à droite qui est en dehors de la zone de texte utilisable. Voir la figure 1 ci-dessous pour une illustration:

Figure 1. Original Spinner bacground 9-patch PNG http://tinypic.com/images/404.gif
Figure 1. PNG d'origine à 9 patchs Spinner bacground

Il ne suffit pas de retirer la flèche car le rembourrage reste là. Vous devez utiliser une nouvelle image à 9 patchs avec un remplissage réduit (voir la figure 2 pour un exemple basé sur la figure 1) ou utiliser l'une des images à 9 patchs précompilés sans trop de remplissage, comme celles de EditText (@Android:drawable/edit_text) ou Button (@Android:drawable/btn_default).

Figure 2. Modified Spinner bacground 9-patch PNG with reduced padding
Figure 2. PNG modifié de 9 patchs Spinner bacground avec rembourrage réduit.

Comprendre cela vous permettra de créer vos propres arrière-plans pour le Spinner (et, en fait, pour tout widget).

Une meilleure explication des fichiers 9 patchs peut être trouvé ici

Il est très facile de créer les fichiers avec l'exécutable draw9patch à partir du SDK ( lisez-le ici ), mais rien ne vous empêche pour utiliser Photoshop ou Gimp à la place. N'oubliez pas que les fichiers PNG à 9 correctifs ne sont que des fichiers PNG simples! La seule mise en garde est de vous assurer que vous dessinez uniquement sur les lignes extérieures de pixels et que les autres pixels sont complètement transparents. L'anticrénelage près de la frontière peut donner des résultats inattendus.

67
Aleadam

Je viens d'arriver à cette question, parce que mon spinner ne montrait pas l'indicateur de triangle, maintenant je comprends pourquoi: je mettais l'arrière-plan sur "blanc":

Android:background="#FFFFFFFF"

Cela supprime l'indicateur de triangle (l'image d'arrière-plan du spinner et le rembourrage indiqué par Aleadam).

Pour mon problème, je le résout en ajoutant un LinearLayout parent juste pour définir l'arrière-plan sur "blanc".

15
pvalle

Donnez-lui un fond, la flèche disparaîtra.

Android:background="@drawable/bg"
8
Kai Wang

J'avais le même problème et j'ai changé le style en:

style="@style/Widget.AppCompat.Light.DropDownItem.Spinner"

et ça a marché.

Comme c'est étrange, il est situé dans DropDownItem.

Alors que celui qui a le triangle inférieur est nommé normal.

À votre santé!

3
Abdullah Umer

Sur la question connexe de l'espace pris lorsque vous cliquez réellement sur le spinner, j'ai trouvé par accident que vous pouvez supprimer ces grands indicateurs de sélection à droite. Vous obtenez une liste de base séparée par des lignes mais vous pouvez cliquer sur un élément et cela fonctionne toujours.

Configurez un spinner comme celui-ci pour obtenir les indicateurs de sélection:

    Spinner s1 = (Spinner) findViewById(R.id.spinner1);
    ArrayAdapter<CharSequence> adapter1 = ArrayAdapter.createFromResource(
            this, R.array.petals, Android.R.layout.simple_spinner_item);
    adapter1.setDropDownViewResource(Android.R.layout.simple_spinner_dropdown_item);
    s1.setAdapter(adapter1);

Pour aucun indicateur, laissez simplement la ligne setDropDownViewResource.

2
Alan Finners

pourquoi ne pas aller pour une boîte de dialogue avec liste. Selon vos besoins, créez un champ edittext, ajoutez setOnFocusChangeListener, puis affichez une boîte de dialogue avec les éléments de liste dans la méthode onFocusChange (). Pour le dialogue avec les éléments de la liste

new AlertDialog.Builder(this)
                .setTitle("<Title>")
                .setItems(R.array.<ItemsArrayName>, new DialogInterface.OnClickListener(){
     @Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub  
}}).show();
1
Venugopal

Aucune réponse ne m'a été utile, alors voici une solution monoligne vraiment simple qui a fonctionné.

  //some spinner initialisation stuff->
mySpinner.setAdapter(adapter);

  //some spinner initialisation stuff->
mySpinner.getBackground().setColorFilter(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);

Je ne peux pas dire avec certitude si cela fonctionnera avec une disposition de spinner par défaut, mais cela a bien fonctionné avec ma coutume que j'ai créée pour d'autres besoins.

0
Nor Kagramanian