今回はスピナーのレイアウトを変更したいと思います。

複数行を表示できるようにする

1,アクティビティのレイアウトにスピナーを追加します。
res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
 android:id="@+id/LinearLayout01" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 xmlns:android="http://schemas.android.com/apk/res/android" 
 android:orientation="vertical">
    
<Spinner 
 android:id="@+id/Spinner01" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
</Spinner>

</LinearLayout>

2,スピナーのレイアウトファイルを作成します。
res/layout/spinner.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@android:id/text2" 
    style="?android:attr/spinnerItemStyle" 
    android:singleLine="false" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:textSize="12sp"
    android:ellipsize="marquee" >
</TextView>

改行を表示できるようにするため「android:singleLine="false" 」を指定します。
その他いくつか注意点があります。
・android:idは3で作成するレイアウトのidと同じにすること。
・android:idは"@android:id/text1"または"@android:id/text2"にすること。
（android.R.idで定義されているのidがtext1またはtext2であるため）
・規定のスタイルを使用する場合は style="?android:attr/spinnerItemStyle"とすること。

3,スピナーのドロップダウンリストのレイアウトファイルを作成します。
res/layout/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="?android:attr/spinnerDropDownItemStyle"
    android:layout_height="?android:attr/listPreferredItemHeight" 
    android:singleLine="false" 
    android:layout_width="fill_parent"
 android:textSize="13sp"
    android:ellipsize="marquee" >
</CheckedTextView>

改行を表示できるようにするため「android:singleLine="false" 」を指定します。
注意点は
・android:idは2で作成するレイアウトのidと同じにすること。
・android:idは"@android:id/text1"または"@android:id/text2"にすること。
（android.R.idで定義されているのidがtext1またはtext2であるため）
・規定のスタイルを使用する場合はstyle="?android:attr/spinnerDropDownItemStyle"とすること。

4,アクティビティクラス
ArrayAdapterクラスを使用してスピナーの設定を行います。

ArrayAdapterクラスのコンストラクタは以下のようなものがあります。

ArrayAdapter(Context context, int textViewResourceId) 
ArrayAdapter(Context context, int textViewResourceId, T[] objects) 
ArrayAdapter(Context context, int textViewResourceId, List objects)

第1引数contextにはContextオブジェクトを指定します。

第2引数textViewResourceIdにはスピナーに使用するレイアウトファイルのIDを指定します。
既定のレイアウトを使用する場合は、アンドロイドで定義されているandroid.R.layout.simple_spinner_itemを指定します。
今回は2で作成したレイアウトファイルを指定します。

第3引数objectはドロップダウンリストに表示するアイテムを指定します。
ドロップダウンリストに表示するアイテムはObject型の配列かList インターフェイス実装クラスになっています。
それぞれの要素がCharSequence インターフェイスを実装したクラスである場合は、指定した値をそのまま表示しますが
そうでなければ要素のtoString()の結果を出力します。

またArrayAdapter#setDropDownViewResource()メソッドでドロップダウンリスト部分に使用するレイアウトファイルのIDを指定します。
既定のレイアウトを使用する場合は、アンドロイドで定義されているandroid.R.layout.simple_spinner_dropdown_itemを指定します。
今回は3で作成したレイアウトファイルを指定します。

あとは作成したAdapterオブジェクトを、Spinner#.setAdapter()メソッドでスピナーに設定します。

MainActivty.java

package my.study.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivty extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
   
        //ArrayAdapterを作成
        ArrayAdapter adapter = 
    new ArrayAdapter(this,R.layout.spinner);
        //ドロップダウンリストのレイアウトを設定      
        adapter.setDropDownViewResource(R.layout.spinner_dropdown);
        //ドロップダウンアイテムの追加
        adapter.add("item1\nDescription1");
        adapter.add("item2\nDescription2");
        adapter.add("item3\nDescription3");
        //スピナーにadapterを設定
        Spinner spinner = (Spinner)this.findViewById(R.id.Spinner01);
        spinner.setAdapter(adapter);
  
    }
}

ドロップダウンのアイコンを変更する

1,画像ファイルを配置します。
解像度に合わせてres/drawable-hdpi, res/drawable-mdpi, res/drawable-ldpiに、選択している時の画像と選択していないときの画像を配置します。
今回は選択された時の画像としてstar_big_on.png、選択していない時の画像としてstart_big_off.pngを追加しました。

star_big_on.png

star_big_off.png

2,画像のSelectorを作成します。
res/drawable-hdpi, res/drawable-mdpi, res/drawable-ldpiのそれぞれに、状態に応じて画像を選択するselectorファイルを作成します。
res/drawable-xdpi/spinner_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
 <item
  android:state_checked="true"
  android:drawable="@drawable/star_big_on" />
 <item 
  android:state_checked="false"       
  android:drawable="@drawable/star_big_off" />
</selector>

3,スタイルファイルを作成します。
先ほど作成したselectorファイルを指定するスタイルファイルを作成します。
res/values/styles.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources >
    <style name="SpinnerDropDownIcon" parent="android:Widget.DropDownItem.Spinner">
        <item name="android:checkMark">@drawable/spinner_selector</item>
    </style>
</resources>

4,スピナーのドロップダウンリストのレイアウトファイルを作成します。
res/layout/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/SpinnerDropDownIcon"
    android:layout_height="?android:attr/listPreferredItemHeight" 
    android:singleLine="false" 
    android:layout_width="fill_parent"
 android:textSize="13sp"
    android:ellipsize="marquee" >
</CheckedTextView>

styleには3で作成したスタイルファイルを指定します。

5.スピナーのレイアウトファイルを作成します。
res/layout/spinner.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:id="@android:id/text2" 
    style="?android:attr/spinnerItemStyle" 
    android:singleLine="false" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:textSize="12sp"
    android:ellipsize="marquee" >
</TextView>

6.アクティビティクラス
MainActivty.java

package my.study.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class MainActivty extends Activity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
   
        //ArrayAdapterを作成
        ArrayAdapter adapter = 
    new ArrayAdapter(this,R.layout.spinner);
        //ドロップダウンリストのレイアウトを設定      
        adapter.setDropDownViewResource(R.layout.spinner_dropdown);
        //ドロップダウンアイテムの追加
        adapter.add("item1\nDescription1");
        adapter.add("item2\nDescription2");
        adapter.add("item3\nDescription3");
        //スピナーにadapterを設定
        Spinner spinner = (Spinner)this.findViewById(R.id.Spinner01);
        spinner.setAdapter(adapter);
  
    }
}

yan note

Android Spinner（スピナー）を使用するその３（UIカスタマイズ)

複数行を表示できるようにする

ドロップダウンのアイコンを変更する

0 件のコメント:

VisualStudio(C#)から「Publish AWS Serverless Application」するとAspNetCoreFunctionRoleがCREATE_FAILEDになる。

ページ

このブログを検索

Android Spinner（スピナー）を使用する その３（UIカスタマイズ)

複数行を表示できるようにする

ドロップダウンのアイコンを変更する

0 件のコメント:

VisualStudio(C#)から「Publish AWS Serverless Application」するとAspNetCoreFunctionRoleがCREATE_FAILEDになる。

Android Spinner（スピナー）を使用するその３（UIカスタマイズ)