2012年12月19日水曜日

ActionBarSherlockのドロップダウンナビゲーション用Spinnerを使いまわす

 

ActionBarのドロップダウンナビゲーションって便利だけど、このSpinnerって他で使いまわせないかなーって調べたら簡単に使えそうだったのでやってみたメモです。

■何がしたいの?

これです。

device-2012-12-18-235525device-2012-12-18-235554

普通のSpinnerと違って表示位置の近くにリストがポップアップで表示されててなんか便利そうですね。

■ソースを探してみる

ActionBarSherlockのソースを検索してみたところcom.actionbarsherlock.internal.widget.IcsSpinnerてそれっぽいのがいました。
これを利用しているのがcom.actionbarsherlock.internal.widget.ActionBarViewの以下のあたり。

  1: 
  2:     public void setNavigationMode(int mode) {
  3: ~
  4:             switch (mode) {
  5:             case ActionBar.NAVIGATION_MODE_LIST:
  6:                 if (mSpinner == null) {
  7:                     mSpinner = new IcsSpinner(mContext, null,
  8:                             R.attr.actionDropDownStyle);
  9:                     mListNavLayout = (IcsLinearLayout) LayoutInflater.from(mContext)
 10:                             .inflate(R.layout.abs__action_bar_tab_bar_view, null);
 11:                     LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
 12:                             LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
 13:                     params.gravity = Gravity.CENTER;
 14:                     mListNavLayout.addView(mSpinner, params);
 15:                 }
 16:                 if (mSpinner.getAdapter() != mSpinnerAdapter) {
 17:                     mSpinner.setAdapter(mSpinnerAdapter);
 18:                 }
 19:                 mSpinner.setOnItemSelectedListener(mNavItemSelectedListener);
 20:                 addView(mListNavLayout);
 21:                 break;
 22: ~
 23:             }
 24:         }
 25:     }

で、まねして以下のような処理で動的にaddViewしてみたんですが、、、


  1: 		modeArray = getResources().getStringArray(R.array.action_list);
  2: 		if (mSpinner == null) {
  3: 			mSpinner = new IcsSpinner(getApplicationContext(), null, R.attr.actionDropDownStyle);
  4: 			mListNavLayout = (IcsLinearLayout) LayoutInflater.from(getApplicationContext()).inflate(R.layout.abs__action_bar_tab_bar_view, null);
  5: 			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
  6: 			params.gravity = Gravity.CENTER;
  7: 			mListNavLayout.addView(mSpinner, params);
  8: 		}
  9: 
 10: 		mSpinnerAdapter = ArrayAdapter.createFromResource(this, R.array.action_list, android.R.layout.simple_spinner_dropdown_item);
 11: 		mSpinner.setVisibility(View.VISIBLE);
 12: 		mSpinner.setAdapter(mSpinnerAdapter);
 13: 
 14: 		LinearLayout linearLayout = (LinearLayout) findViewById(R.id.LayoutContent);
 15: 		linearLayout.addView(mListNavLayout);
 16: 


こんな感じで、背景の三角マーク無いし、リスト開かないしあれれーって感じです。
正直、普通のSpinnerも使ったこと無いのでなにか抜けてるだけかもしれませんが。。。


device-2012-12-19-001730


■とりあえずGoogle先生に聞いてみた


そしたらStackOverFlow先生で見つかりました。



http://stackoverflow.com/questions/10323471/dropdown-spinner-outside-of-actionbar-icecream-sandwich-style-w-actionbarsher


http://stackoverflow.com/questions/12075742/how-to-change-text-color-of-icsspinner-on-actionbarsherlock


レイアウトで宣言したほうがいいのかなぁ。


■で、参考にしてやってみたらできた!


うひぁー。


device-2012-12-19-002453device-2012-12-19-002614device-2012-12-19-002621


こりゃいいわ。
リストのロングタップ時の操作モード指定に使いたかったんだけど、これでいけそうじゃなイカ。


■以下まねてみたソース。


githubめんどうなので、べたべたとはっときます。


  1: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2:     xmlns:tools="http://schemas.android.com/tools"
  3:     android:layout_width="match_parent"
  4:     android:layout_height="match_parent" >
  5: 
  6:     <LinearLayout
  7:         android:id="@+id/layout_header"
  8: 		android:layout_alignParentTop="true"
  9: 		android:orientation="horizontal"
 10: 		android:layout_width="fill_parent"
 11: 		android:layout_height="48dp"
 12: 		android:gravity="center_horizontal|center_vertical"
 13: 		android:background="#0099ee"
 14: 		>
 15: 	    <com.actionbarsherlock.internal.widget.IcsSpinner
 16: 	        android:id="@+id/spinner_header"
 17: 	        android:layout_width="wrap_content"
 18: 	        android:layout_height="fill_parent"/>
 19:     </LinearLayout>
 20:     
 21:     <LinearLayout
 22:         android:id="@+id/LayoutContent"
 23:         android:layout_below="@+id/layout_header"
 24:         android:layout_above="@+id/layout_footer"
 25:         android:layout_width="fill_parent"
 26:         android:layout_height="fill_parent"
 27:         android:orientation="vertical"
 28: 		>
 29: 	    <TextView
 30: 	        android:id="@+id/infotext"
 31: 	        android:layout_width="wrap_content"
 32: 	        android:layout_height="wrap_content"
 33: 	        android:layout_gravity="center"
 34: 	        android:gravity="center"
 35: 	        android:text=""
 36: 	        android:textSize="20sp"
 37: 	        tools:context=".MainActivity" />
 38: 	</LinearLayout>
 39:     
 40:     <LinearLayout
 41:         android:id="@+id/layout_footer"
 42: 		android:layout_alignParentBottom="true"
 43: 		android:orientation="horizontal"
 44: 		android:layout_width="fill_parent"
 45: 		android:layout_height="48dp"
 46: 		android:gravity="center_horizontal|center_vertical"
 47: 		android:background="#0099ee"
 48: 		>
 49: 	    <com.actionbarsherlock.internal.widget.IcsSpinner
 50: 	        android:id="@+id/spinner_footer"
 51: 	        android:layout_width="wrap_content"
 52: 	        android:layout_height="fill_parent"/>
 53:     </LinearLayout>
 54:     
 55: </RelativeLayout>
 56: 
  1: 		ArrayAdapter<String> listAdapter;
  2: 		IcsSpinner spinner;
  3: 
  4: 		modeArray = getResources().getStringArray(R.array.header_list);
  5: 
  6: 		listAdapter = new ArrayAdapter<String>(this, R.layout.sherlock_spinner_item, modeArray);
  7: 		listAdapter.setDropDownViewResource(R.layout.sherlock_spinner_dropdown_item);
  8: 		spinner = (IcsSpinner) findViewById(R.id.spinner_header);
  9: 		spinner.setAdapter(listAdapter);
 10: 
 11: 		modeArray = getResources().getStringArray(R.array.footer_list);
 12: 		listAdapter = new ArrayAdapter<String>(this, R.layout.sherlock_spinner_item, modeArray);
 13: 		listAdapter.setDropDownViewResource(R.layout.sherlock_spinner_dropdown_item);
 14: 		spinner = (IcsSpinner) findViewById(R.id.spinner_footer);
 15: 		spinner.setAdapter(listAdapter);
  1: 
  2:     <string-array name="action_list">
  3:         <item>action1</item>
  4:         <item>action2</item>
  5:     </string-array>
  6:     <string-array name="header_list">
  7:         <item>header1</item>
  8:         <item>header2</item>
  9:     </string-array>
 10:         <string-array name="footer_list">
 11:         <item>footer1</item>
 12:         <item>footer2</item>
 13:     </string-array>


でわ。

0 件のコメント:

コメントを投稿