[Android Studio] 客製化ListView(點擊時秀出內項)搭配List Map應用、Single Choice ListView、改變menu圖示

2016-10-03

工作日誌 Day 1

MainActivity.java

※ Menu產生及如何控制點擊了選單中的哪個項目

public class Main2Activity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        // Toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("ListView");
        setSupportActionBar(toolbar);
    }

    // Menu選單產生
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    // Menu選單控制
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.item1:
                ListView_Customer();
                break;
            case R.id.item2:
                ListView_ChoiceSingle();
                break;
        }
        return super.onOptionsItemSelected(item);
    }

menu內容必須在res新增一個meun資料夾，res右鍵->New->Android resource file -> Resource type 選 menu，File name 取名為 menu_main -> 按OK

如此，便會在res下產生一個menu資料夾，內有menu_main.xml檔，如下圖：

在menu_main.xml檔內加入以下程式：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_item"
        android:icon="@drawable/ic_keyboard_arrow_left_black_24dp"
        android:title="menu"
        app:showAsAction="always">
        <menu>
            <item
                android:id="@+id/item1"
                android:orderInCategory="1"
                android:title="ListView Customer" />
            <item
                android:id="@+id/item2"
                android:orderInCategory="2"
                android:title="Single Choice" />
        </menu>
    </item>
</menu>

android:icon可以設定menu未點開前的圖示

<menu>內的兩個<item>即為選單點開後顯示的項目

android:title 就是設定選單顯示的字

以上為止，效果如下圖： (選單圖示被改為箭頭)

按下選單後

※ 客製化ListView配合List Map設定ListView顯示之內容

首先在res/layout資料夾下新增一個xml檔，自行設計喜歡的樣式，這裡我用簡單的兩個TextView配合一個ImageView做範例，如下圖

程式如下： ( item.xml )

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/Title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:textColor="#840"
            android:textSize="24sp" />

        <TextView
            android:id="@+id/Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:textColor="#480"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/Img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/ic_launcher" />
    </LinearLayout>
</LinearLayout>

接著，於MainActivity.java加入以下程式：

  // 客製化ListView
    private void ListView_Customer() {
        SimpleAdapter adapter = new SimpleAdapter(this, getData(), R.layout.item, new String[]{"Title", "Name", "Img"}, new int[]{R.id.Title, R.id.Name, R.id.Img});
        ListView lv = (ListView) findViewById(R.id.listView);
        lv.setAdapter(adapter);
        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) {
                TextView txv = (TextView) arg1.findViewById(R.id.Title);
                Toast.makeText(Main2Activity.this, "你點擊了:" + txv.getText(), Toast.LENGTH_SHORT).show();
            }
        });
    }

getData()內容如下(使用List Map)：

    // List Map
    private List getData() {
        List list = new ArrayList();
        Map map = new HashMap();
        map.put("Title", "G1");
        map.put("Name", "紅豆");
        map.put("Img", R.mipmap.ic_launcher);
        list.add(map);
        map = new HashMap();
        map.put("Title", "G2");
        map.put("Name", "綠豆");
        map.put("Img", R.mipmap.ic_launcher);
        list.add(map);
        map = new HashMap();
        map.put("Title", "G3");
        map.put("Name", "土豆");
        map.put("Img", R.mipmap.ic_launcher);
        list.add(map);
        map = new HashMap();
        map.put("Title", "G4");
        map.put("Name", "毛豆");
        map.put("Img", R.mipmap.ic_launcher);
        list.add(map);
        return list;
    }

其中，利用了 SimpleAdapter 做橋接器

SimpleAdapter用法即如上程式

比較特別需要注意的是

如何讀出使用者點選之項目

利用 onItemClick(AdapterView arg0, View arg1, int arg2, long arg3) 中之View

-> TextView txv = (TextView) arg1.findViewById(R.id.Title); 找到 item.xml 內 TextView 設定的 id

此時便可用 txv.getText() 取得其內容

實作成果如下圖： (點擊前)

點擊第二項：

※ Single Choice ListView

於MainActivity.java加入以下程式：

  // Single Choice ListView
    private void ListView_ChoiceSingle() {
        ListView mList = (ListView) findViewById(R.id.listView);
        String[] mNames = buildData(30, "Title:");
        ListAdapter mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, mNames);
        mList.setAdapter(mAdapter);
        mList.setChoiceMode(AbsListView.CHOICE_MODE_SINGLE);
        mList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int pos, long l) {
                Toast.makeText(Main2Activity.this, "你點擊了: Title" + pos, Toast.LENGTH_SHORT).show();
            }
        });
    }

    private String[] buildData(int length, String name) {
        String[] array = new String[length];
        for (int i = 0; i < length; i++) {
            array[i] = name + " " + i;
        }
        return array;
    }

buildData(int lengh, String name) 只是單純產生要展示的資料

以上程式最重要的兩行為

ListAdapter mAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, mNames);

和

mList.setChoiceMode(AbsListView.CHOICE_MODE_SINGLE);

加入此兩行便可得到 Single Choice ListView的效果，執行結果如下圖：

[註]

1.以上程式絕非原創，是收集各個前輩的程式湊在一起而已，如有侵犯到還請見諒

2.Shift+F6 可快速改檔案名稱

Android Studio

回首頁