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

device-2014-05-23-111540    

蜗牛是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

 

 

相关文章