안드로이드 리스트뷰에 Header와 Footer 사용하기. (Using Header and Footer in Android ListView)
1. Header와 Footer.
보통 UI 구성에서의 Header와 Footer는 화면에 표시하고자 하는 내용(contents)에 대한 제목을 표시하거나 내용에 한정된 추가기능(새로고침과 같은)을 제공할 때 사용합니다. (물론 "일반적"일 뿐이고 개발자의 취향에 따라 마음대로 사용할 수 있습니다.)
ListView에서의 Header와 Footer 또한 크게 다르지 않습니다. ListView의 아이템이 나타내는 특징을 표현할 수 있는 제목을 Header에 표시하고 ListView의 아이템을 다루는 기능을 수행하는 버튼 등을 Footer에 표시하는거죠.
ListView의 Header와 Footer에는 각각 별도의 View를 지정할 수 있습니다. 그 말은 Header와 Footer에 각각의 Layout 리소스를 만들어 사용할 수 있다는 뜻이고, 아이템으로 사용된 Layout 리소스와 별개의 View를 만들어 사용할 수 있다는 말이죠.
2. Header와 Footer 추가하기.
Header와 Footer는 화면 표시를 위한 기능이므로 Adapter가 아닌 ListView 클래스에서 제공하는 함수를 통해 사용할 수 있습니다.
Header를 추가하는 함수는 addHeaderView()입니다.
public void addHeaderView (View v)
Footer를 추가하는 함수는 addFooterView()입니다.
public void addFooterView (View v)
예제를 통해 Header와 Footer를 사용하는 방법에 대해 알아보겠습니다.
2.1 Header와 Footer 예제 구성도.
먼저 Header에는 ListView의 제목과 아이템의 개수를 표시하도록 두 개의 TextView를 표시합니다. 그리고 Footer에는 새로운 아이템을 추가할 수 있는 기능을 가진 Button을 추가합니다.
2.2 ListView 추가.
MainActivity에 ListView를 생성합니다. "activity_main.xml" 파일(또는 "content_main.xml")에 아래의 내용을 작성합니다.
[STEP-1] "activity_main.xml" - MainActivity에 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.madwin.listviewheaderfooterexample.MainActivity"
tools:showIn="@layout/activity_main">
<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>2.3 Header Layout 리소스 추가
Header에 사용될 View의 Layout 리소스를 "/res/layout/listview_header.xml" 파일에 작성합니다.
[STEP-2] "/res/layout/listview_header.xml" - ListView Header Layout 작성.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#666666">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ListView 예제"
android:textSize="30dp"
android:textColor="#FFFFFF"
android:layout_weight="4"
android:paddingLeft="16dp" />
<TextView
android:id="@+id/count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="16dp"
android:textColor="#FFFFFF"
android:layout_weight="1" />
</LinearLayout>2.4 Footer Layout 리소스 추가
Footer에 사용될 View의 Layout 리소스를 "/res/layout/listview_footer.xml" 파일에 작성합니다.
[STEP-3] "/res/layout/listview_footer.xml" - ListView Footer Layout 작성.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/add"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="아이템 추가" />
</LinearLayout>2.5 ListView에 Header와 Footer 추가.
Header와 Footer로 사용하기 위한 View의 Layout 리소스를 작성하였으므로 ListView에 추가하는 코드를 작성합니다. 위에서 간단히 설명한대로 ListView의 addHeaderView(), addFooterView() 함수를 호출하면 됩니다.
[STEP-4] "MainActivity.java" - onCreate() 함수에서 Header와 Footer 추가.
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// ... 코드 계속.
// listview, header, footer 참조 획득.
ListView listview = (ListView)findViewById(R.id.listview1) ;
final View header = getLayoutInflater().inflate(R.layout.listview_header, null, false) ;
View footer = getLayoutInflater().inflate(R.layout.listview_footer, null, false) ;
// listView에 header, footer 추가.
listview.addHeaderView(header) ;
listview.addFooterView(footer) ;
// 데이터를 지정하지 않은 adapter 생성하여 listview에 지정.
final ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1) ;
listview.setAdapter(adapter) ;
// 코드 계속...
}
}코드 작성 시 주의할 점이 있습니다. 킷캣(KITKAT, API level 19)이상에서는 addHeaderView()와 addFooterView() 함수의 호출 위치가 크게 중요하지 않지만, 킷캣 이전 버전에서는 반드시 setAdapter()함수 이전에 호출되어야 한다는 것입니다.
2.6 Footer의 Button 이벤트 처리
예제 동작에 따라 Footer의 Button을 클릭하면 ListView에 새로운 아이템을 추가하는 코드를 추가하겠습니다.
[STEP-5] "MainActivity.java" - [STEP-4] 아래에 이벤트 처리 코드 추가.
Button addButton = (Button) footer.findViewById(R.id.add);
addButton.setOnClickListener(new Button.OnClickListener() {
public void onClick(View v) {
int count ;
// Adapter에서 현재 아이템 개수 얻어온 다음 아이템 추가.
count = adapter.getCount() + 1 ;
adapter.add("LIST" + Integer.toString(count)) ;
// Header View의 "count" TextView에 아이템 개수 업데이트.
TextView textView = (TextView) header.findViewById(R.id.count) ;
textView.setText(Integer.toString(count)) ;
}
});3. Header와 Footer에 대한 예제 실행 화면
위의 예제 소스를 순서대로 작성한 뒤 실행하면 다음과 같은 화면이 출력됩니다.
안드로이드 기본 생성 코드에 Material Design이 적용되었는지 여부에 따라 화면이 조금 다르게 나올 수 있으며 기기는 넥서스7 2세대를 사용하였습니다.
4. Header와 Footer 관련 속성
4.1 Header와 Footer의 구분선 설정.
[안드로이드 ListView 속성 활용하기]에서 살펴본 ListView의 속성 중에 Header와 Footer에 관련된 속성이 있습니다. 바로 Header와 Footer에 대한 구분선을 표시할지 여부를 나타내는 headerDividersEnabled와 footerDividersEnabled 속성입니다.
* android:headerDividersEnabled - header 아래에 divider를 그릴지 여부 지정.
> true로 설정 시 header 아래에 divider를 표시.
> 기본 값은 true.
* android:footerDividersEnabled - footer 뷰 위에 divider를 그릴지 여부 지정.
> true로 설정 시 footer 위에 divider를 표시.
> 기본 값은 true.
속성 사용 효과를 확실히 표현하기 위해 divider 및 dividerHeight 속성을 같이 사용하여 차이점을 비교하겠습니다.
5. 참고.
- addHeaderView() 함수와 addFooterView()에 대한 도움말.
- [안드로이드 개발 참조문서 ListView 항목]에서 "addHeaderView"와 "addFooterView" 부분을 참조하세요.
.END.