台灣蝸牛人生哲學

Set up the (icon+Text) dropdown list navigation in the action bar

蝸牛是Android新手,但是上網查Google大師查出來的資料都好複雜,一方面是功力低,一方面是要融入他人的思考邏輯,所以看看都做不出來,所幸由Google內建的模版中一步步地修改,終於也改出來了,程式碼也不是很長,且邏輯對新手來說還算是簡單,因此在此做個紀錄.

可以參考上一篇文章使用appcompat_V7實作actionBar icon ,因為這次是要把icon加入dwopdown導覽列.

使用的模版也是上次提到的(Action Bar Spinner),這邊就不多加敘述.

準備工作:

1.mylistview1.xml 放在res/layout 下面 (功用是dwopdown的布局參考XML)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="fill_parent"
android:orientation="horizontal">

<ImageView
android:id="@+id/imageView1"
android:layout_width="32dp"
android:layout_height="32dp"
/>

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>

2.準備三張圖片(64*64 沒有硬性規定但不要太大如:1024*1024,實際顯示的大小在上面mylistview1.xml定義)放在res/drawable資料夾

3.改寫MainActivity.java (在onCreate裡面可找到這段程式碼)

舊的

final ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

// Set up the dropdown list navigation in the action bar.
actionBar.setListNavigationCallbacks(
// Specify a SpinnerAdapter to populate the dropdown list.

new ArrayAdapter<String>(
actionBar.getThemedContext(),
android.R.layout.simple_list_item_1,
android.R.id.text1,
new String[] {
getString(R.string.title_section1),
getString(R.string.title_section2),
getString(R.string.title_section3),
}),

this);

這邊的ArrayAdapter<String>由於只配置一個android.R.id.text1 文字項目,所以想到把這改成SimpleAdapter,來加入一組(icon+Text)

改寫後:

new SimpleAdapter(actionBar.getThemedContext(), 
items, R.layout.mylistview1, new String[]{"image", "text"},
new int[]{R.id.imageView1, R.id.textView1}), this);

R.layout.mylistview1就是我們準備的第一項R.id.imageView1與 R.id.textView1則是在xml裡面的id

好了既然要用SimpleAdapter那就少不了要宣告.

/**
* The serialization (saved instance state) Bundle key representing the
* current dropdown position.
*/
private static final String STATE_SELECTED_NAVIGATION_ITEM = "selected_navigation_item";
private SimpleAdapter simpleAdapter;
private int[] image = { R.drawable.sport2_64, R.drawable.sport_64,
R.drawable.weight_64 };
private int[] imgText = {R.string.title_section1,R.string.title_section2,R.string.title_section3};

紅色的是新加上去的,並加上所用到的圖片與字串id

再來把資料(image+text)id,塞進去 items,依樣的紅色的部分才是新加入的黑色的字樣則是插入的位置

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

List<Map<String, Object>> items = new ArrayList<Map<String,Object>>();
for (int i = 0; i < image.length; i++) {
Map<String, Object> item = new HashMap<String, Object>();
item.put("image", image[i]);
item.put("text", getString(imgText[i]));
items.add(item);
}

好了改完了,按一下Shift+Ctrl+o  把要import進來

補充:這樣以後只要改這兩行圖片跟字串就可以拉,執行出來就像是最上面的圖片了~

private int[] image = { R.drawable.sport2_64, R.drawable.sport_64,
R.drawable.weight_64 };
private int[] imgText = {R.string.title_section1,R.string.title_section2,R.string.title_section3};

參考資料1

參考資料2