안드로이드/Android ListView Header, Footer 설정 하기 ~!

< 개발 환경 >    ●  작성일 : 2013.01.10  ●  OS 설치 버전 : Windows7 32bit    ●  SDK 설치 버전 : 안드로이드 SDK 4.2 (젤리빈) / API LEVEL : 17    ●  ADT 설치 버전 : 21     ●  Java 설치 버전 : JDK 1.6.0_20 / JRE6   ●  이클립스 설치 버전 : Indigo  ●  테스트단말 : 삼성 갤럭시 S2 4.0.4 (아이스크램 샌드위치)     < 프로젝트 적용 >   ●  API LEVEL : 8    ●  minSdkVersion : 8   ●  targetSdkVersion : 8    ●  Java Compiler Level : 1.6    ●  Text file encoding : UTF-8

안드로이드/Android ListView Header, Footer 설정 하기 ~!

이번 포스팅에서는 Android ListView의 Header와 Footer를 설정 하는 방법에 대해 알아 보겠습니다. 헤더와 풋터는 말 그대로 ListView의 위와 아래에 View를 가리키는 말인데요, 다음과 같은 상황에  유효하게 사용 할 수 있습니다.

자 그럼 어떤 상황에서 Header와 Footer를 사용 할 수 있을까요?

<리니어 레이아웃>

       <리스트뷰>

<버튼>

다음과 같은 레이아웃 배치에서는 리스트뷰만 스크롤이 들어가게 되있습니다. 하지만  <리니어 레이아웃> 과 <버튼> 에도 스크롤을 적용 하여 하나의 ListView 처럼 사용하기 위해서 어떻게 해야 할까요? 그렇습니다. 바로 ListView에 Header와 Footer를 추가해 주면 됩니다. 자세한 내용은 아래의 그림과 함께 설명해 보겠습니다.

1) 아래와 같이 XML 구성이 되어 있는 ListView의 모습 입니다. 그림 처럼 ListView만 스크롤을 사용 할 수 있는 모습을 확인 할 수 있습니다.

<리니어 레이아웃>

       <리스트뷰>

<버튼>

2) ListView의 Header와 Footer를 설정해준 모습 입니다. (xml은 동일 합니다.) 이와 같이 ListView에 Header와 Footer를 설정해 주면 하나의 ListView 처럼 스크롤을 사용 할 수 있습니다.

<리스트뷰 헤더>

      <리스트뷰>

<리스트뷰 풋터>

자 그럼 Header와 Footer를 설정 하는 방법에 대해 알아 보겠습니다.

package com.example.testlistviewheaderfooter.activity;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ListView;
import android.widget.Toast;

import com.example.testlistviewheaderfooter.R;
import com.example.testlistviewheaderfooter.adapter.CustomArrayAdapter;

public class MainActivity extends Activity {
	
	private ArrayList mArrays = null;
	private CustomArrayAdapter mCustomArrayAdapter = null;
	
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
		setLayout();
		
		mArrays = new ArrayList();
		
		mArrays.add("hi");
		mArrays.add("hello");
		mArrays.add("nice");
		mArrays.add("to");
		mArrays.add("meet");
		mArrays.add("you");
		mArrays.add("what");
		mArrays.add("are");
		mArrays.add("you");
		mArrays.add("doing");
		mArrays.add("here");
		
		/**
		 * ListView Header와 Footer는 ListView에 setAdapter를 해주기 전에 적용 시켜야 합니다.
		 * 아니면 아래의 에러가 발생하네요^^;
		 * 
		 * Caused by: java.lang.IllegalStateException: Cannot add header view to list -- 
		 * setAdapter has already been called.
		 */
		
		// Header, Footer 생성 및 등록
		View header = getLayoutInflater().inflate(R.layout.header, null, false);
		View footer = getLayoutInflater().inflate(R.layout.footer, null, false);
		
		lt_List.addHeaderView(header);
		lt_List.addFooterView(footer);
		
		// Header, Footer Event 설정
		header.findViewById(R.id.btn_header).setOnClickListener(mClickListener);
		footer.findViewById(R.id.btn_footer).setOnClickListener(mClickListener);
		
		mCustomArrayAdapter = new CustomArrayAdapter(MainActivity.this, R.layout.list_row, mArrays);
		
		// Adapter 연결
		lt_List.setAdapter(mCustomArrayAdapter);
		
	}
	
	private View.OnClickListener mClickListener = new View.OnClickListener() {
		
		@Override
		public void onClick(View v) {
			if(v.getId() == 0x7f070002)
				Toast.makeText(MainActivity.this, "hi~~ Header Button~!!", Toast.LENGTH_SHORT).show();
			Toast.makeText(MainActivity.this, "hi~~ Footer Button~!!", Toast.LENGTH_SHORT).show();
		}
	};
	
	
	/*
	 * Layout
	 */
	private ListView lt_List = null;
	
	private void setLayout() {
		lt_List = (ListView) findViewById(R.id.lv_list);
	}
	
}
//

주의하실 점은 ListView에 Adapter를 셋팅해 주기 전에 Header와 Footer를 붙여 주셔야 한다는 점 입니다. 이 점 꼭 명심하시고 즐거운 코딩 하시길 바랍니다.^^

그리고 아래는 Header와 Footer를 제거 하실 경우의 API 입니다. 

Header 제거 : ListView.removeHeaderView(View v)

Footer 제거 : ListView.removeFooterView(View v)

파일첨부 : 

TestListViewHeaderFooter.zip

스크린샷 : 

            [실행화면]                              [Header, Footer 사용 X]                         [Header, Footer 사용 O] 

감사합니다.