web-dev-qa-db-fra.com

Comment personnaliser un Spinner dans Android

Je souhaite ajouter une hauteur personnalisée au menu déroulant d'un Spinner, par exemple, 30dp, et je souhaite masquer les séparateurs de la liste déroulante de Spinner.

Jusqu'ici, j'ai essayé d'appliquer le style suivant à la Spinner:

<style name="spinner_style">
        <item name="Android:paddingLeft">0dp</item>
        <item name="Android:dropDownWidth">533dp</item>
        <item name="Android:showDividers">none</item>
        <item name="Android:dividerHeight">0dp</item>
        <item name="Android:popupBackground">@drawable/new_bg</item>
        <item name="Android:dropDownHeight">70dp</item>
        <item name="Android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="Android:dropDownSelector">@Android:color/white</item>
 </style>

et le code de mon spinner est:

<Spinner
            Android:id="@+id/pioedittxt5"
            Android:layout_width="543dp"
            Android:layout_height="63dp"
            Android:layout_toRightOf="@+id/piotxt5"
            Android:background="@drawable/spinner"
            style="@style/spinner_style"
            Android:dropDownVerticalOffset="-53dp"
            Android:spinnerMode="dropdown"
            Android:drawSelectorOnTop="true"
            Android:entries="@array/travelreasons"
            Android:Prompt="@string/Prompt" />

Mais rien ne semble fonctionner.

androidandroid-layoutandroid-spinner
132
Shruti

Créez un adaptateur personnalisé avec une mise en page personnalisée pour votre spinner.

Spinner spinner = (Spinner) findViewById(R.id.pioedittxt5);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.travelreasons, R.layout.simple_spinner_item);
adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);

R.layout.simple_spinner_item

<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android" 
    Android:id="@Android:id/text1"
    style="@style/spinnerItemStyle"
    Android:maxLines="1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:ellipsize="Marquee" />

R.layout.simple_spinner_dropdown_item

<CheckedTextView xmlns:Android="http://schemas.Android.com/apk/res/Android" 
    Android:id="@Android:id/text1"
    style="@style/spinnerDropDownItemStyle"
    Android:maxLines="1"
    Android:layout_width="match_parent"
    Android:layout_height="?android:attr/dropdownListPreferredItemHeight"
    Android:ellipsize="Marquee" />

Dans les styles, ajoutez vos dimensions et votre hauteur personnalisées selon vos besoins.

 <style name="spinnerItemStyle" parent="Android:Widget.TextView.SpinnerItem">

  </style>

  <style name="spinnerDropDownItemStyle" parent="Android:TextAppearance.Widget.TextView.SpinnerItem">

  </style>
173
Tarun

Vous pouvez créer un design de spinner entièrement personnalisé comme

Étape 1: Dans le dossier dessinable, créez background.xml pour une bordure du disque.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="@Android:color/transparent" />
<corners Android:radius="5dp" />
<stroke
Android:width="1dp"
   Android:color="@Android:color/darker_gray" />
</shape>

Étape 2: pour la présentation de spinner, utilisez cette icône déroulante ou toute image drop.png enter image description here

 <RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginRight="3dp"
    Android:layout_weight=".28"
    Android:background="@drawable/spinner_border"
    Android:orientation="horizontal">

    <Spinner
        Android:id="@+id/spinner2"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_centerVertical="true"
        Android:layout_gravity="center"
        Android:background="@Android:color/transparent"
        Android:gravity="center"
        Android:layout_marginLeft="5dp"
        Android:spinnerMode="dropdown" />

    <ImageView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_centerVertical="true"
        Android:layout_gravity="center"
        Android:src="@mipmap/drop" />

</RelativeLayout>

Enfin ressemble à l'image ci-dessous et il est partout cliquable dans la zone ronde et il n'est pas nécessaire d'écrire, cliquez sur Lister pour l'imageView.

enter image description here

Étape 3: pour la conception par liste déroulante, supprimez la ligne de la liste déroulante et définissez la couleur d'arrière-plan, créez un adaptateur personnalisé comme

Spinner spinner = (Spinner) findViewById(R.id.spinner1);
String[] years = {"1996","1997","1998","1998"};
ArrayAdapter<CharSequence> langAdapter = new ArrayAdapter<CharSequence>(getActivity(), R.layout.spinner_text, years );
langAdapter.setDropDownViewResource(R.layout.simple_spinner_dropdown);
mSpinner5.setAdapter(langAdapter);

Dans le dossier de présentation, créez R.layout.spinner_text.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layoutDirection="ltr"
Android:id="@Android:id/text1"
style="@style/spinnerItemStyle"
Android:singleLine="true"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:ellipsize="Marquee"
Android:paddingLeft="2dp"
/>

Dans le dossier de présentation, créez simple_spinner_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@Android:id/text1"
style="@style/spinnerDropDownItemStyle"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:ellipsize="Marquee"
Android:paddingBottom="5dp"
Android:paddingLeft="10dp"
Android:paddingRight="10dp"
Android:paddingTop="5dp"
Android:singleLine="true" />

Dans les styles, vous pouvez ajouter des dimensions et une hauteur personnalisées selon vos besoins.

<style name="spinnerItemStyle" parent="Android:Widget.TextView.SpinnerItem">
</style>

<style name="spinnerDropDownItemStyle" parent="Android:TextAppearance.Widget.TextView.SpinnerItem">
</style>

Enfin ressemble à

enter image description here

Selon les besoins, vous pouvez modifier la couleur d'arrière-plan et le texte de la couleur déroulante en modifiant la couleur d'arrière-plan ou la couleur du texte de simple_spinner_dropdown.xml.

82
Binesh Kumar

La solution la plus élégante et la plus flexible que j'ai trouvée jusqu'à présent est la suivante: http://Android-er.blogspot.sg/2010/12/custom-arrayadapter-for-spinner-with.html

Fondamentalement, suivez ces étapes:

  1. Créez un fichier XML de mise en page personnalisé pour votre élément déroulant, disons que je l'appellerai spinner_item.xml

  2. Créez une classe de vue personnalisée pour votre adaptateur déroulant. Dans cette classe personnalisée, vous devez écraser et définir la présentation de votre élément de liste déroulante personnalisée dans les méthodes getView () et getDropdownView (). Mon code est comme ci-dessous:

    public class CustomArrayAdapter extends ArrayAdapter<String>{

private List<String> objects;
private Context context;

public CustomArrayAdapter(Context context, int resourceId,
     List<String> objects) {
     super(context, resourceId, objects);
     this.objects = objects;
     this.context = context;
}

@Override
public View getDropDownView(int position, View convertView,
    ViewGroup parent) {
    return getCustomView(position, convertView, parent);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
  return getCustomView(position, convertView, parent);
}

public View getCustomView(int position, View convertView, ViewGroup parent) {

LayoutInflater inflater=(LayoutInflater) context.getSystemService(  Context.LAYOUT_INFLATER_SERVICE );
View row=inflater.inflate(R.layout.spinner_item, parent, false);
TextView label=(TextView)row.findViewById(R.id.spItem);
 label.setText(objects.get(position));

if (position == 0) {//Special style for dropdown header
      label.setTextColor(context.getResources().getColor(R.color.text_hint_color));
}

return row;
}

}

  3. Dans votre activité ou votre fragment, utilisez l’adaptateur personnalisé pour votre vue spinner. Quelque chose comme ça:

    Spinner sp = (Spinner)findViewById(R.id.spMySpinner);
ArrayAdapter<String> myAdapter = new CustomArrayAdapter(this, R.layout.spinner_item, options);
sp.setAdapter(myAdapter);

où options est la liste des chaînes d'éléments déroulantes.

20
Tony Vu

Essaye ça

j'étais confronté à beaucoup de problèmes lorsque j'essayais une autre solution ...... Après beaucoup de R & D maintenant, j'ai la solution

  1. créez custom_spinner.xml dans le dossier de présentation et collez ce code

     <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="vertical"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@color/colorGray">
<TextView
Android:id="@+id/tv_spinnervalue"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:textColor="@color/colorWhite"
Android:gravity="center"
Android:layout_alignParentLeft="true"
Android:textSize="@dimen/_18dp"
Android:layout_marginTop="@dimen/_3dp"/>
<ImageView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentRight="true"
Android:background="@drawable/men_icon"/>
</RelativeLayout>

  2. dans votre activité

    Spinner spinner =(Spinner)view.findViewById(R.id.sp_colorpalates);
String[] years = {"1996","1997","1998","1998"};
spinner.setAdapter(new SpinnerAdapter(this, R.layout.custom_spinner, years));

  3. créer une nouvelle classe d'adaptateur

    public class SpinnerAdapter extends ArrayAdapter<String> {
private String[] objects;

public SpinnerAdapter(Context context, int textViewResourceId, String[] objects) {
    super(context, textViewResourceId, objects);
    this.objects=objects;
}

@Override
public View getDropDownView(int position, View convertView, @NonNull ViewGroup parent) {
    return getCustomView(position, convertView, parent);
}

@NonNull
@Override
public View getView(int position, View convertView, @NonNull ViewGroup parent) {
    return getCustomView(position, convertView, parent);
}

private View getCustomView(final int position, View convertView, ViewGroup parent) {
    View row = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_spinner, parent, false);
    final TextView label=(TextView)row.findViewById(R.id.tv_spinnervalue);
    label.setText(objects[position]);
    return row;
}

    }

4
Sunil

Cela a fonctionné pour moi:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),R.layout.simple_spinner_item,areas);
            Spinner areasSpinner = (Spinner) view.findViewById(R.id.area_spinner);
            areasSpinner.setAdapter(adapter);

et dans mon dossier de présentation, j'ai créé simple_spinner_item:

<TextView xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:id="@Android:id/text1"
Android:layout_width="match_parent"
// add custom fields here 
Android:layout_height="wrap_content"
Android:textAppearance="?android:attr/textAppearanceListItemSmall"
Android:gravity="center_vertical"
Android:paddingStart="?android:attr/listPreferredItemPaddingStart"
Android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
Android:minHeight="?android:attr/listPreferredItemHeightSmall"
Android:paddingLeft="?android:attr/listPreferredItemPaddingLeft"
Android:paddingRight="?android:attr/listPreferredItemPaddingRight" />
2
zizoujab