ListView Header에 Viewpager 추가

---

 출처: http://postbook.tistory.com/entry/ListView-Header%EC%97%90-Viewpager-%EC%B6%94%EA%B0%80

---

먼저 리스트뷰 헤더는 아래 그림처럼 전체 화면이 리스트뷰이지만 리스트뷰 최상단, 즉 리스트뷰 헤더는 다른 내용을 넣고 싶을 때 활용하는 기능입니다.

리스트뷰 헤더는 다양하게 활용 가능하지만 오늘은 리스트뷰 헤더에 뷰페이저를 달아서 헤더 부분만 슬라이드처럼 넘길 수 있는 기능을 소개해 드리고자 합니다.

* 소스코드

ViewPager.zip

1. 구성

 - 메인 : activity_main.xml / MainActivity.java

 - 리스트뷰 : listview.xml / CustomAdapter.java, Data.java

 - 리스트뷰헤더 : header.xml

 - 뷰페이저 : detail0.xml ~ detail4.xml

 - 다이얼로그 : custom_dialog.xml

소스코드의 전체 기능은 리스트뷰헤더를 뷰페이저로 달아서 슬라이드가 가능하고 터치하면 토스트 메세지가 표시됩니다. 헤더 하단의 리스트를 클릭하면 커스텀 다이얼로그가 뜨는게 전체 기능입니다. 

---

2. 리스트뷰 헤더

리스트뷰에 헤더를 추가하기 위해서는 먼저 리스트뷰 헤더를 위한 레이아웃이 따로 필요합니다. 이 예제에서는 header.xml 입니다. 

- MainActivity.java

mLvData = (ListView)findViewById(R.id.ListView1);

View header = getLayoutInflater().inflate(R.layout.header, null, false);

mLvData.addHeaderView(header, null, false);

먼저 위와 같이 헤더의 레이아웃인 header를 View에 할당해주고 그것을 addGeaderView를 이용하여 MainActivity에 리스트뷰 객체에 연결해줍니다. 이렇게 연결된 리스트뷰 객체는 상단은 헤더가 달려있고 하단은 커스텀리스트뷰가 쭉 달리게 됩니다. (커스텀 리스트뷰는 얼마전에 소개해드렸던 내용으로 이전글을 참고하시면 좋을 것 같습니다.)

뷰페이저를 클릭하면 토스트메세지가 뜨는것과 커스텀리스트뷰를 클릭하면 다이얼로그가 뜨는 것도 이전 글을 참고하시면 될 것 같습니다.

---

3. 리스트뷰에 뷰페이저를 헤더로 물면 발생하는 문제

리스트뷰에 뷰페이저를 헤더로 물게되면 어떤 문제가 생길지 예상이 되시나용?? 바로 리스트뷰와 뷰페이저의 모션이 서로 반대인 문제가 발생합니다.

위 그림과 같이 뷰페이저와 커스텀리스트뷰가 하나의 리스트뷰에 할당되어 있지만 뷰페이저는 좌우 모션으로 슬라이딩되고 커스텀리스트뷰는 상하 모션으로 슬라이등 되기 때문에 터치 이벤트가 잘 발생되지 않는 문제가 발생합니다. 

이를 해결하려면 

vp.setOnTouchListener(this);

뷰페이저에 TouchListener를 달아서 별도의 처리가 필요합니다.

@Override

public boolean onTouch(View v, MotionEvent event) {

if (event.getAction() == MotionEvent.ACTION_UP){

mLvData.requestDisallowInterceptTouchEvent(false);

}

        else {

         mLvData.requestDisallowInterceptTouchEvent(true);

        }

return false;

}

터치 이벤트가 발생하게 되면 위 코드로 이동하게 되는데요. 위 코드의 기능은 ACTION_UP 모션 이벤트가 발생했을 때 즉, 리스트뷰의 상하 스크롤 이벤트가 발생했을 때는 requestDisallowInterceptTouchEvent를 false로 하여 리스트뷰가 정상적으로 상하 스크롤되게 합니다. 반대의 경우 즉, 뷰페이저를 좌우로 터치했을 경우에는 requestDisallowInterceptTouchEvent를 true로 하여 리스트뷰의 상하 스크롤이 되지 않도록 하고 뷰페이저의 좌우 스크롤 동작만 일어나게 합니다.

이부분만 조심하시면 하나의 리스트뷰에서도 좌우 / 상하 터치 이벤트를 잘 처리하실 수 있습니다. 

ViewPager.zip

8.39MB