안드로이드(Android) 리스트뷰(ListView) Header, Footer 레이아웃 추가하는 방법

안드로이드(Android) 리스트뷰(ListView) Header, Footer 레이아웃 추가하는 방법

 

환경: Eclipse Mars, Android 4.2.2

 

안드로이드 ListView 위젯에 화면을 구성할 때 상단에 Header 부분과 하단에 Footer 부분을 xml 레이아웃으로 추가할 수 있습니다. 샘플 이미지처럼 Item 개수에 상관없이 항상 상단과 하단에 고정시킬 수 있습니다. 물론 화면에 고정하는 것은 아닙니다. Item 개수가 화면을 벗어나면 하단 Footer 도 Item 제일 하단에 위치하기 때문에 화면에 안보이겠죠. 보통 상단은 제목으로 이용하고 하단은 List Item 을 갱신하는 용도로 많이 이용합니다.

 

 

▼ 먼저 상단과 하단의 Footer 레이아웃과 Header 레이아웃을 추가하기 전에 ListView 에 데이터를 집어넣어야겠죠. ListView 위젯을 생성하고 List Item 을 위젯에 추가합니다. 

mList = (ListView) findViewById(R.id.listView);
mList.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
//mList.setBackgroundColor(Color.GREEN);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(
		this,
		R.layout.activity_list_text,
		R.id.listContent,
		data);

 

▼ 다음은 header 와 footer 레이아웃을 생성하고 ListView 에 집어넣습니다. ListView 클래스에는 상단과 하단에 레이아웃을 넣을 수 있는 함수가 있습니다. ListView 에 들어갈 레이아웃을 inflate() 함수로 생성해서 addHeaderView() 로 상단에 넣고 addFooterView() 로 하단에 추가합니다. 그리고 removeHeaderView() 와 removeFooterView() 로 레이아웃을 제거할 수도 있습니다. 보통 Header 는 제목 역활을 하고 하단에 붙는 Footer 는 List Item 을 갱신할 때 많이 이용됩니다. 앱 들을 사용하다 보면 Footer 부분을 클릭했을 때 새로운 Item 들이 나타나는 것을 본 적이 있을 겁니다.

// header 넣기 
View header = getLayoutInflater().inflate(R.layout.activity_list_header, null, false);
mList.addHeaderView(header);

// footer 넣기 
View footer = getLayoutInflater().inflate(R.layout.activity_list_footer, null, false);
mList.addFooterView(footer);

 

▼ 소스를 구성할 때 주의점이 있습니다. ListView 에 데이터를 넣는 setAdapter() 함수는 Header 와 Footer 레이아웃을 넣고 마지막에 실행해야 합니다. 주의하세요. 아래는 ListView 에 추가한 Header 와 Footer 의 Activity 전체 소스 입니다.

import android.app.Activity;
import android.os.Bundle;
import android.util.SparseBooleanArray;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.Toast;

import com.example.sampleandroidinfo.R;

public class ListActivity extends Activity implements OnClickListener {

	private ListView mList;
	private Button mBtnGet;
	private String[] data = new String[15] ; 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_list);
				
		for (int i = 0; i < 15; i++) {
			data[i] = String.valueOf(i);
		}
		
		mBtnGet = (Button) findViewById(R.id.btnGet);
		mBtnGet.setOnClickListener(this);
		
		mList = (ListView) findViewById(R.id.listView);
		mList.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
		ArrayAdapter<String> adapter = new ArrayAdapter<String>(
				this,
				R.layout.activity_list_text,
				R.id.listContent,
				data);
		
		// header 넣기 
		View header = getLayoutInflater().inflate(R.layout.activity_list_header, null, false);
		mList.addHeaderView(header);
		
		// footer 넣기 
		View footer = getLayoutInflater().inflate(R.layout.activity_list_footer, null, false);
		mList.addFooterView(footer);
		
		mList.setAdapter(adapter);
	}

	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btnGet:
			SparseBooleanArray booleans = mList.getCheckedItemPositions();
			StringBuilder sb = new StringBuilder();
			for (int i = 0; i < data.length; i++) {
				if (booleans.get(i)) {
					sb.append(data[i]);
				}
			}
			Toast.makeText(getApplicationContext(), sb.toString(),
					Toast.LENGTH_SHORT).show();
			break;

		default:
			break;
		}
	}
}

 

▼ 아래 XML 소스는 메인 Activity 를 구성하는 레이아웃 소스입니다.

 

activity_list.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="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#3F0099"
        android:gravity="center"
        android:paddingBottom="@dimen/abc_action_bar_icon_vertical_padding"
        android:paddingTop="@dimen/abc_action_bar_icon_vertical_padding"
        android:text="ListView Header, Footer 레이아웃 추가 "
        android:textColor="#FFFFFF" />
	<Button
            android:id="@+id/btnGet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="리스트 데이터 가져오기" />
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

 

▼ 아래 소스는 ListView 에 들어간 Header 레이아웃 xml 소스 입니다.

 

activity_list_header.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="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#257c71"
        android:gravity="center"
        android:paddingBottom="@dimen/abc_action_bar_icon_vertical_padding"
        android:paddingTop="@dimen/abc_action_bar_icon_vertical_padding"
        android:text="ListView Header"
        android:textColor="#FFFFFF" />
    
</LinearLayout>

 

▼ 아래 소스는 ListView 에 들어간 footer 레이아웃 xml 소스 입니다.

 

activity_list_footer.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="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#2f75b6"
        android:gravity="center"
        android:paddingBottom="@dimen/abc_action_bar_icon_vertical_padding"
        android:paddingTop="@dimen/abc_action_bar_icon_vertical_padding"
        android:text="ListView Footer"
        android:textColor="#FFFFFF" />
</LinearLayout>

 

▼ 마지막으로 ListView 에 들어간 List Item 각 항목을 표현한 레이아웃 xml 소스입니다.

 

activity_list_text.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="fill_parent"
    android:gravity="center_vertical" >

    <TextView
        android:id="@+id/listContent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dip"
        android:text=""
        android:textColor="#000000" />
    
</LinearLayout>