2011年4月29日金曜日

Android スピナーをカスタマイズしてみる

今日はSpinnerをカスタマイズする。スピナーのカスタマイズはけっこう面倒。

まずは画像。
左の画面がデフォルトとカスタマイズのSpinnerを並べたもの。
中の画面がデフォルトのSpinnerの項目選択。
右の画面がカスタマイズのSpinnerの項目選択。

・Spinnerの見た目はbackgroundで画像を指定する。
  <Spinner android:id="@+id/spinner" android:layout_margin="5dip"
           android:layout_width="fill_parent" android:layout_height="wrap_content" />
  <Spinner android:id="@+id/myspinner" android:layout_margin="5dip"
           android:layout_width="fill_parent" android:layout_height="wrap_content"
           android:background="@drawable/myspinner" />

・Spinnerの中の文字や、項目選択するリストはadapterに設定するレイアウトを用意する。

Spinnerの中の部分のレイアウトmy_spinner_item.xmlは下記。
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1" style="?android:attr/spinnerItemStyle"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:textSize="12dip" android:gravity="center" />
idは固定。とりあえずサイズと位置だけを変更。

次に項目選択する画面のリスト項目のレイアウトmy_spinner_drop_down_item.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:checkMark="@drawable/spinner_check"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:textSize="16dip" android:padding="10dip" />
idは上と同じに。checkMarkの画像を変えてみた。

後は用意したadapterをセットする。上がデフォルト、下がカスタマイズ。
  Spinner spinner = (Spinner) findViewById(R.id.spinner);
  ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
          this, R.array.spinners, android.R.layout.simple_spinner_dropdown_item);
  adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
  spinner.setAdapter(adapter);

  Spinner myspinner = (Spinner) findViewById(R.id.myspinner);
  ArrayAdapter<CharSequence> myadapter = ArrayAdapter.createFromResource(
            this, R.array.spinners, R.layout.my_spinner_item);
  myadapter.setDropDownViewResource(R.layout.my_spinner_drop_down_item);
  myspinner.setAdapter(myadapter);

一応実機で見たのも載せておく。左がGalaxy Sで右がXperia arcのキャプチャ。エミュレータと違ってデフォルトのは真ん中が引き伸ばされて汚い。
前に使ったときこんなに汚くはなかったような。。なんかミスってるのかな。
※一応追記：汚いのはcreateFromResourceをsimple_spinner_dropdown_itemでやってるからでsimple_spinner_itemにすれば普通に見える。
ラベル: ,