GridView (7) - GridView 에 header, footer 달기

300x250

300x250

이번 포스팅에서는 GridView 에 header 와 footer 를 추가할 것이다.

GridView 에 header, footer 를 추가하면 하단 그림과 같이 화면 상단과 하단에 별도의 view 를 지정할 수 있다.

추가한 header, footer 는 grid item 에 상관없이 항상 고정으로 출력된다.

 

참고로, 지난 포스팅에서는 GlidView 에 text + image 목록 출력, click 처리, menu 출력, Item 삽입, 수정, 삭제 하는 방법에 대해 알아 보았다.

[Android/UI] - GridView (2) - GridView 에 image + text 출력하기

[Android/UI] - GridView (3) - GridView item 의 click 처리하기

[Android/UI] - GridView (4) - GridView item click 시 context menu 출력하기

[Android/UI] - GridView (5) - GridView item long click 시 popup menu 출력하기

[Android/UI] - GridView (6) - GridView item 추가, 수정, 삭제

Library 추가

ListView 의 경우 addHeaderView, addFooterView 를 지원하여 간단히 구현할 수 있다.

[Android/UI] - ListView (8) - ListView 에 header, footer 달기

 

아쉽게도 GridView 는 해당 API 를 지원하지 않는다.

하지만, 하단과 같은 유사한 library 가 있다.

이번 포스팅 에서는 해당 library 를 이용하여 hedaer, footer 를 추가할 것이다.

liaohuqiu/android-GridViewWithHeaderAndFooter

 

◼ Gradle dependency 추가

 

Header & footer layout resource 추가

Header, footer 에 사용될 view layout resource 를 추가하자.

 

 

GridView 에 header & footer 추가

새로 생성한 layout resource 를 inflate 하여 'addHedaerView()', 'addFooterView()' 를 통해 추가하자.

Android 에서 제공하는 GridView widget 에는 'addHedaerView()', 'addFooterView()' 가 없지만  'GridViewWithHeaderAndFooter' library 를 추가하면 ListView 처럼 똑같은 방식으로 추가할 수 있다.

 

 

Header & footer 가 추가된 GridView 의 click event 처리

Hedaer & footer 가 추가 후 ListView 에서는 header, footer 구분을 위해 getItemAtPosition 을 썼다.

'GridViewWithHeaderAndFooter' library 에서는 해당 API 가 ListView 처럼 동작하지 않아 아래와 같이 직접 header, footer view 에 click event listener 를 등록했다. 

 

Source code

https://github.com/parkho79/GridView_6