Androidでスピナーをカスタマイズする方法

Question

私はSpinnerのドロップダウンにカスタムの高さ、例えば30dpを加えたいのですが、Spinnerのドロップダウンリストの仕切りを隠したいのです。

これまでのところ、私は以下のスタイルを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>

そして私のスピナーのコードは：

<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" />

しかし、何も機能していないようです。

Answer 1

スピナー用のカスタムレイアウトを使用してカスタムアダプタを作成します。

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" />

スタイルでは、要件に合わせてカスタムの寸法と高さを追加します。

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

  </style>

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

  </style>

Answer 2

あなたは完全にカスタムスピナーデザインを作成することができますように

Step1：描画可能なフォルダーに、スピナーの境界線のbackground.xmlを作成します。

<?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>

ステップ2：スピナーのレイアウト設計には、このドロップダウンアイコンまたは任意の画像を使用してください。drop.png

 <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>

最後に画像の下のように見えます、そしてそれは丸い領域でどこでもクリック可能で、imageViewのためにクリックリスターを書く必要はありません。

ステップ3：ドロップダウンデザインの場合は、ドロップダウンリストビューからその行を削除して背景色を変更します。

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);

レイアウトフォルダに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"
/>

レイアウトフォルダに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" />

スタイルでは、必要に応じてカスタムの寸法と高さを追加できます。

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

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

最後のようになります

要件に応じて、simple_spinner_dropdown.xmlの背景色またはテキスト色を変更することで、ドロップダウン色の背景色およびテキストを変更できます。

Answer 3

私がこれまでに見つけた最もエレガントで柔軟な解決策はここにあります： http://Android-er.blogspot.sg/2010/12/custom-arrayadapter-for-spinner-with.html

基本的には、次の手順に従ってください。

1. ドロップダウンアイテム用のカスタムレイアウトxmlファイルを作成します。ここでspinner_item.xmlと呼びます。

2. ドロップダウンアダプタ用のカスタムビュークラスを作成します。このカスタムクラスでは、getView（）およびgetDropdownView（）メソッドでカスタムドロップダウンアイテムのレイアウトを上書きして設定する必要があります。私のコードは以下の通りです：

   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. アクティビティまたはフラグメントで、スピナービュー用のカスタムアダプタを利用してください。このようなもの：

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

ここで、optionsはドロップダウンアイテムの文字列のリストです。

Answer 4

これを試して

私は他の解決策を試みていたとき私は多くの問題に直面していました......たくさんの研究開発の後に私は解決策を得ました

1. レイアウトフォルダーにcustom_spinner.xmlを作成し、このコードを貼り付けます

    <?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. あなたの活動に

   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. 新しいクラスのアダプタを作成する

   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;
   }
   

   }

Answer 5

これは私のために働いた：

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);

そして私のレイアウトフォルダに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" />