ListView 增加頁頭、頁尾

這個方法可以簡單地替 ListView 加入頁首與頁尾。
效果圖如下。

首先我們一樣在 layout.xml 中放入一個 ListView。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.demo.listviewdemo.HeaderFooterListView">

    <ListView
        android:id="@+id/lv_HeaderFooterListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout>

再來利用之前 ListView 的其他範例中 strings.xml 的資料重複使用。

<resources>
    <string name="app_name">ListViewDemo</string>
    <string-array name="list">
        <item>Android</item>
        <item>Java</item>
        <item>Swift</item>
        <item>C</item>
        <item>C++</item>
        <item>C#</item>
        <item>Python</item>
        <item>Delphi</item>
        <item>go</item>
        <item>JavaScript</item>
        <item>R</item>
        <item>PHP</item>
        <item>Ruby</item>
        <item>Matlab</item>
        <item>perl</item>
    </string-array>
</resources>

接下來在 Class 檔裡面把 ListView 與資料做關聯順便寫上 onItemClick 事件。

     ListView listView = (ListView) findViewById(R.id.lv_HeaderFooterListView);

        String[] listItem = getResources().getStringArray(R.array.list);
        ListAdapter adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_single_choice, listItem);
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(HeaderFooterListView.this, "position=" + position, Toast.LENGTH_SHORT).show();
            }
        });

這次我們 ListView item layout 使用的是另一種。
android.R.layout.simple_list_item_single_choice
想要知道 Google 有提供那些內建的 Layout 可以參考這裡 Google Developers:R.layout。

接下來新增一個 layout.xml 作為 Header 與 Footer 。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/rl_HeaderFooter"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/listViewHeaderBackground">

    <TextView
        android:id="@+id/tv_Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Header"
        android:textSize="24sp"/>

</RelativeLayout>

新增一個 View 來獲取新建了的 layout 畫面並且放進去 ListView作為 Header。

View header = LayoutInflater.from(this).inflate(R.layout.list_view_header, null);
        listView.addHeaderView(header);

一樣的方法我們在新增一個 View 做為 Footer 且改變一下樣子。

 View footer = LayoutInflater.from(this).inflate(R.layout.list_view_header, null);
        TextView textView = (TextView) footer.findViewById(R.id.tv_Title);
        textView.setText("Footer");
        RelativeLayout relativeLayout = (RelativeLayout) footer.findViewById(R.id.rl_HeaderFooter);
        relativeLayout.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
        listView.addFooterView(footer);

你也可以分別為 Header 與 Footer 製作不同 XML 來達到自己想要的效果。
只要使用 LayoutInflater 分別插入就可以了。

來看看效果圖。

可以看到 Header 與 Footer 在 click 事件中所得到的 Position 是多少。
這樣就可以在 click 中判斷做不同處理動作。
要記得這樣子的話要對應 Adapter 中的資料位置是不太一樣的。
原本未設定 Header 的時候資料 list 中 0 是第一筆。
加入 Header 後會變成 1 才是第一筆資料。
相對的最後一筆資料 position 也會對應不上 list 而產生 NullPointException 。
所以我們在 Click 事件中做一點判斷。

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                String itemStr = "";
                if (position != 0 && position <= listItem.length) {
                    itemStr = listItem[position-1];
                }
                Toast.makeText(HeaderFooterListView.this, "position=" + position + " item=" + itemStr, Toast
                        .LENGTH_SHORT)
                        .show();
            }
        });

然後上一張圖點擊的時候發現好像沒有選擇 item 的動作出現。
需要設定一下 ListView。

 listView.setChoiceMode(ListView.CHOICE_MODE_SINGLE);

程式碼下載: GitHub

相關連結

• ListView
• ExpandableListView
• ListView With BaseAdapter