[程式] Android Studio : ListView With Header And Footer

Android Studio : ListView With Header And Footer

(有頁首與頁尾的ListView)

有頁首與頁尾的ListView，看起來比較完整，只要使用addHeaderView與addFooterView，就可以達到這個效果，來實作吧!

相關資訊圖片：

ListView With Header And Footer View1 (activity_main.xml)畫面

ListView With Header And Footer View2 (list_item.xml)畫面

ListView With Header And Footer View3 (list_header.xml)畫面

ListView With Header And Footer View4 (list_header1.xml)畫面

ListView With Header And Footer View5 (list_footer.xml)畫面

初始畫面

點擊畫面(1個Header)

點擊畫面(2個Header)

Source Code：

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

list_item.xml

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="24dp"
        android:text="TextView" />

</LinearLayout>

list_header.xml

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

    <TextView
        android:id="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="20dp"
        android:background="#666666"
        android:text="Header" />
</LinearLayout>

list_header1.xml

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

    <TextView
        android:id="@+id/header1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="20dp"
        android:background="#999999"
        android:text="Header" />
</LinearLayout>

list_footer.xml

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

    <TextView
        android:id="@+id/footer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:textSize="20dp"
        android:background="#666666"
        android:text="Footer" />
</LinearLayout>

MainActivity.java

package tw.idv.wenyen.listviewwithheaderandfooter;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    ListView listView;

    View header, header1, footer;

    private static final String TAG = "MainActivity";

    static String[] lessons = {"星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"};

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

        listView = findViewById(R.id.listView);

        header = (View)getLayoutInflater().inflate(R.layout.list_header, null);
        header1 = (View)getLayoutInflater().inflate(R.layout.list_header1, null);
        footer = (View)getLayoutInflater().inflate(R.layout.list_footer, null);
        // Header Footer必須在setAdapter()之前加入，否則會產生異常錯誤
        listView.addHeaderView(header, null, false);
//        listView.addHeaderView(header, null, false);
//        listView.addHeaderView(header1, null, false);
        listView.addFooterView(footer, null, false);

        listView.setAdapter(new BaseAdapter() {
            @Override
            public int getCount() {
                return lessons.length;
            }

            @Override
            public Object getItem(int position) {
                return lessons[position];
            }

            @Override
            public long getItemId(int position) {
                return position;
            }

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                LayoutInflater layoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
                View view = layoutInflater.inflate(R.layout.list_item, null);
                TextView textView = view.findViewById(R.id.textView);
                textView.setText(lessons[position]);
                return view;
            }

        });

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                Log.d(TAG, "ItemPosition=" + position + " ,Header Count=" + listView.getHeaderViewsCount());
                // lessons[position] 跟 listView.getAdapter().getItem(position).toString() 的 position不同
                // 若要使用 lessons[position] 須扣掉 listView.getHeaderViewsCount()，才能得到真正的值
//                Toast.makeText(MainActivity.this, lessons[position], Toast.LENGTH_SHORT).show();
                Toast.makeText(MainActivity.this, listView.getAdapter().getItem(position).toString() 
                        + " Position=" + position, Toast.LENGTH_SHORT).show();
            }
        });


    }
}

實作心得：

比較要注意的部分有兩個，一個部份是addHeaderView與addFooterView必須在setAdapter之前加入，一個部份是setAdapter與setOnClickListener的position值不一樣，因為Header也是一個View，由圖片 點擊畫面(1個Header) 與點擊畫面(2個Header) 中的position值就可以知道。

參考資料：

• android.widget.ListView - ListView | Android Developers