1
votes

Comment styliser les boîtes à spinner Android?

Toutes mes excuses si cela a déjà été répondu, mais je cherche des réponses / essaie des choses depuis quelques heures et je ne trouve rien.

Je trouve les boîtes de sélection Android trop grandes:

entrez la description de l'image ici

À mon goût, il y a beaucoup trop d'espace gris autour du «80» et du «90» au-dessus. J'aimerais les rendre moins hauts et moins larges.

Cependant, je ne veux pas seulement définir une hauteur / largeur de pixel, à cause du manque d'assurance qu'ils auront l'air parfait sur tous les appareils.

Ils sont maintenant définis sur wrap_content. Existe-t-il un moyen de le faire envelopper le contenu, mais plus étroitement? Il semble y avoir pas mal de rembourrage là-dedans ...

Merci beaucoup!

EDIT: J'ai fait un peu de progrès, j'ai trouvé comment attacher un style à une vue, alors maintenant j'essaye:

android:background="@android:drawable/btn_dropdown"

et

<style name="spinner_style">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:layout_marginLeft">0dp</item>
    <item name="android:layout_marginRight">0dp</item>
    <item name="android:layout_marginTop">0dp</item>
    <item name="android:layout_marginBottom">0dp</item>
</style>

Cependant, cela semble n'avoir pratiquement aucun effet:

entrez la description de l'image ici

contre

entrez la description de l'image ici

avant. Comment puis-je rapprocher les cases du texte?

EDIT: Un peu plus de progrès. Cette image semble être toute la boîte grise plus la liste déroulante:

 <Spinner
    style="@style/spinner_style"
    etc

Si je peux trouver un moyen de réduire cela? Encore une fois, j'ai le défi que je veux qu'il encapsule le texte correctement, afin que je puisse être sûr qu'il s'affichera bien sur tous les appareils.

EDIT: Je pense que je vais utiliser ma propre mise en page pour le spinner, mais d'une manière qui enveloppe le texte de manière fiable - probablement en utilisant une mise en page linéaire et en définissant la couleur d'arrière-plan à ce sujet. Je posterai quand j'aurai le code complet.


0 commentaires

3 Réponses :


-1
votes

J'ai vraiment travaillé dur pour vous trouver la meilleure solution à votre problème, mais cela ne semble pas être un moyen de le faire. Le seul moyen est de créer un spinner personnalisé comme décrit dans https://stackoverflow.com/a/37859442/11896005

Aussi, désolé si j'étais ennuyeux, je voulais juste vous aider!


6 commentaires

Tout cela est très intéressant, mais pas ce que j'ai demandé. Comment réduire le remplissage autour du texte dans la zone? Merci.


@Bruce Oh, désolé, je n'ai pas bien lu la question. Donne-moi une seconde, je modifierai ma réponse


Vous semblez simplement copier et coller des réponses qui sont vaguement liées à ma question. Cela ne m'aide ni moi ni vous. S'il te plaît, arrête.


@Bruce Aight donne-moi une seconde pour revérifier votre question et je republierai ma réponse dans mon propre style!


@Bruce Aussi j'essaye juste d'aider, désolé si je cause des problèmes


@Bruce a édité ma réponse, Désolé pour la troisième fois!



0
votes

Comme vous n'avez pas partagé un peu de votre spinner, je vais vous suggérer quelques options qui peuvent vous aider:

si vous utilisez android.R.layout.simple_spinner_dropdown_item comme disposition de votre élément spinner (lorsqu'il est fermé)

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

</TextView>

Puis changez-le en android.R.layout.simple_spinner_item , le dernier a peu de remplissage que le premier.

Si cela ajoute encore un peu de remplissage, vous pouvez ajouter l'attribut android:theme="@android:style/Theme.Holo.Light.NoActionBar" à votre spinner xml, bien que cela modifie la flèche du spinner

Une autre option consiste à créer un élément de spinner personnalisé, de même que de remplacer la disposition du système par votre élément lors de la création de l'adaptateur.

voici la mise en page de l'élément (juste une nouvelle mise en page avec un TextView avec wrap_content width / height)

ArrayAdapter<Integer> adapter = new ArrayAdapter<>(this, 
                                   android.R.layout.simple_spinner_dropdown_item, myList);


0 commentaires

0
votes

OK, c'est ce à quoi je suis arrivé et cela me donne cet effet:

entrez la description de l'image ici

par rapport à ce que j'obtiens avec le Spinner par défaut qui est:

entrez la description de l'image ici

Je préfère de loin ma version, mais bien sûr, ces choses sont subjectives.

Ce que j'ai fait est de définir ma propre mise en page et ma propre vue de texte dans l'adaptateur (il semble que vous puissiez définir les deux), de sorte que mon code de configuration de l'adaptateur ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dropdowntext"
    style="@style/spinner_style"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:singleLine="true" />

J'ai également été obligé de créer ma propre mise en page personnalisée pour la liste déroulante - R.layout.my_spinner_dropdown_layout ci-dessus - car le spinner réutilise la vue de texte utilisée pour la boîte non ouverte lorsqu'il dessine la liste déroulante, donc la même vue de texte doit être disponible dans les deux mises en page .

J'ai créé deux nouveaux fichiers de mise en page XML appelés my_spinner_layout.xml et my_spinner_dropdown_layout.xml

Ils ressemblent à ceci respectivement:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/linearLayoutDisplayName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:background="#DDDDDD"
        android:gravity="center"
        android:orientation="horizontal">

        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/dropdowntext"
            style="@style/spinner_style"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:singleLine="true" />

        <ImageView
            android:id="@+id/dropdownicon"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:contentDescription="TODO"
            android:src="@drawable/dropdown" />

    </LinearLayout>

et

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
        R.layout.my_spinner_layout, R.id.dropdowntext, list);
adapter.setDropDownViewResource(R.layout.my_spinner_dropdown_layout);
spinner.setAdapter(adapter);

Fondamentalement, j'ai remplacé la valeur par défaut, qui est TextView et une énorme image d'arrière-plan gris comprenant une flèche déroulante, par une disposition linéaire horizontale contenant un TextView et une IMAGE déroulante, avec un fond gris.

Maintenant, le gris enveloppe très bien le contenu (j'ai ajouté un rembourrage de 5dp).

J'espère que cela aide quelqu'un, ou s'il y a quelque chose qui ne va pas, peut-être que quelqu'un me corrigera.


0 commentaires