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


140

Spinnerたとえば30 dpのドロップダウンにカスタムの高さを追加し、のドロップダウンリストの仕切りを非表示にしたい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" />

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



どのスタイルも適用されていませんか?popupBackGroundまたは他に何か?奇妙な。
Chintan Soni

@フーシネ:私はすでにこれらの例を試しました..ドロップダウンリストの高さを調整したい
Shruti

@ shree202:スタイルは適用されません
Shruti

1
@ComeIn、それはAndroidスタイルではなく、彼が作成したカスタムスタイルです。それが彼が「style =」を持っている理由です
Cyber​​Claw

回答:


194

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

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>

3
変更<item name="android:height"> してみてください<item name="android:layout_height">
Tarun

1
返信ありがとう..試してみたが効果がなかった...過去3〜4日間、オン/オフで作業していた。今イライラしている:(
7bluephoenix

5
@ Tarun、android:id="@+android:id/text1"simple_spinner_dropdown_item.xmlファイルに必要ではありませんか?
batbrat 14

1
R.layout.simple_spinner_dropdown_itemで、android:layout_heightの値を "?attr / dropdownListPreferredItemHeight"に変更すると、次のエラーが発生します: "Error:Attribute is not public"
Loenix

9
この回答への今後の訪問者のためにTextViewとCheckedTextviewをレイアウト内にラップしないでください。直接、layout_file.xmlファイルに投稿してください。何が間違いかを見つけるまで、私は数時間ここに留まっていました。
フランシスコロメロ

95

次のような完全にカスタムのスピナーデザインを作成できます。

手順1:描画可能なフォルダーで、スピナーの境界線の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の背景色またはテキスト色を変更することにより、ドロップダウン色の背景色およびテキストを変更できます。


最初のコードが省略されているのは、6行目のandroid:height = "1dp"ですか。
Willi Mentzel 2016年

誤って2回書き込んでandroid:width = "1dp"
Binesh Kumar

2
「1 dp」で高さを指定したいのか、それとも単なる複製であるのかわからなかったので、問題ありません。自分で編集したくなかっただけです。でも良い答えです。:)
Willi Mentzel 2016年

@BineshKumarねえ、CheckedTextViewを宣言した場所を知っていい?コードを貼り付けたとき、要素を最初に宣言する必要があると言われたからです
hyperfkcb

2
男、あなたはあなたのレイアウトとドローアブルで名前を使ったかもしれません、私は30分を費やしました、そして何をすべきかまだ手がかりがありません。悪い答えのマイナス。
アントンキゼマ2018年

21

これまでに見つけた最もエレガントで柔軟なソリューションは、次のとおりです。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はドロップダウンアイテムの文字列のリストです。


私にとってのトリックは、getDropDownViewをオーバーライドすることでした。getViewをオーバーライドしましたが、そのメソッドをオーバーライドする必要があることに気付きませんでした。
エステバヌリ2017

7

これを試して

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

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

これにより、スピナーをクリックした後、すべてのアイテムにmen_icon画像が表示されましたが、これは私が探していたものではありませんでした。スピナーをクリックした後ですべての行にmen_iconイメージ(またはその他のカスタマイズ)を表示したくない場合は、「getDropDownView」オーバーライドを削除します。
Brettins 2018

2

これは私のために働きました:

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

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.