Android-ParallaxHeaderViewPager 코드공개

구글의 뉴스스텐드 앱을 보면 상단의 프로필을 나타내는영역과 하단에 리스트로 레이아웃이 배치되어 있다. 중요한점은 뷰페이저를 이용해 리스트뷰가 좌우로 제스쳐가 된다. 디자인도 그렇고 써보면 상당히 편리 하다는것을 느낄 수있다. 하지만 페이저의 좌우 위치가 맞지 않는 경우 제스쳐를 하게 되는 경우 화면이 튀는 경우를 볼 수 있는데 편리는 하지만 UI가 논리적이지 않다는 것을 볼 수 있다.

예를 들어보면 2개의페이지가 있는데 한쪽은 가장 상단에 반대쪽은 가장 하단으로 이동해있는 경우 좌우페이지를 이동하게 되면 프로필영역의 크기와 위치가 애매하게 된다. 현재로서는 다른 대안이 없기때문에 아직도 수정을 보류중인것 같다. 

이러한 문제점은 Airbnb에서도 어떻게 할까 많은 고민을 한것 같고, 블로그에도 잘 적혀 있다. 나도 이러한 문제점을 해결 하기위해 고민한 결과와 좀더 나은 방법을 고안해낸 코드를 공개한다.

모든것은 준비되어 있다. 연결되어 있지 않을 뿐이다. 

이미 훌륭하게 만들어진 뷰페이저의 인디케이터 역할을 하는 PagerSlidingTabStrip, 이미지를 자연스럽게 애니메이션하는 것과 스크롤시 효과에 대한 NoBoringActionBar는 익히 알려져있다. 이 두개의 조합을 통해 ParallaxHeaderViewPager를 만들어 보았다.

PagerSlidingTabStrip + NoBoringActionBar → ParallaxHeaderViewPager


구현 방법은 다음과 같다.

1. NoBoringActionBar의 ListView를 ViewPager로 교체한다. 

2. ViewPager에 아이템별로 생성된 Fragment에 ListView 또는 ScrollView를 만든다. 

3. 모든 Fragment의 ListView또는 ScrollView의 OnScroll() Listener을 Activity에서 받을 수 있는 Interface를 만든다. 

4. ListView또는 ScrollView에 특정상황에 스크롤을 하는 기능을 가진  Interface를 만든다. 

5. ViewPger에서 페이지 전환시 Interface를 통해 Fragment의 각각의 ListView에 페이지 전환전의 ListView의 높이를 스크롤 하게 함으로 페이지 전환시 높이는 고정된다. 

레이아웃 구조

https://github.com/kmshack/Android-ParallaxHeaderViewPager/blob/master/res/layout-xhdpi/activity_main.xml



구글의 뉴스스텐드와 동일하게 작동되는 것을 볼 수 있다. 

소스코드는 https://github.com/kmshack/Android-ParallaxHeaderViewPager 


“Android-ParallaxHeaderViewPager 코드공개”에 대한 6개의 생각

  1. 안녕하세요. 일단 해당 소스를 구현 해 주신것에 대해 감사말씀 드립니다.

    해당 소스를 상용화 하는 앱에 사용하려고 하는데 문제가 없는지 여쭙고 싶습니다.

  2. 안녕하세요.
    오픈소스로 공개시 Apache License, Version 2.0 으로 공개 하였기 때문에 상업용및 재배포 목적으로 사용하셔도 무관합니다. 오픈소스를 사용시 출처를 명시해두는것이 일반적이나 명시하지 않아도 무관합니다.
    감사합니다.

  3. UI가 마음에 들어서 코드를 변형시켜 쓰려고 노력중에있는 안드로이드 초보자입니다. 음.. 소스를 보면 리스트뷰에서 layout을 TextView 하나만 쓸 수 있도록 해놓으셨는데 ListView Layout에(즉 1. item -currnet page :1 )다른 TextView 또는 이미지를 넣고싶은데 코드가 자꾸 꼬입니다. 제가 초보라 코드 분석을 잘 못해서 인지 ListView 하나만 커스텀 해보려고 하는데 잘 되지 않습니다. 실례가 되지 않는다면 좀 도와 주시면 감사하겠습니다! ^^ 혹시 모르니 이메일 주소를 남겨두겠습니다 parkts7777@gmail.com 입니다.

  4. 안녕하세요.
    ListView의 아이템을 커스텀으로 만들기 위해서는 Adapter의 getView()에서 직접 뷰를 만드시면 됩니다. 리스트뷰 스크롤시 성능문제도 생길 수 있으니 이와 관련된 점들을 공부하시는게 좋을것 같습니다.
    감사합니다.

  5. 일단 친절한 답변 감사합니다.
    이미 만들어진 프로젝트에다 ListView 커스텀으로 만드는게 정말 쉽지가 않네요..^^ ListViewfragment class에서 Adapter class를 만들어 BaseAdapter extends 시켜서 그 안에 있는 getView()메소드에서 작업을 하는 방법이 맞는 방법인지 어쭈어보고싶습니다. 그리고 Page1 Page2에 다른 내용의 데이터를 넘겨주려면 어떠한 식으로 코딩을 해야하는지…상당한 고민이 필요하는 작업으로 며칠을 헤매고 있습니다. 꼭 이 View를 사용하고 싶은 맘에 이렇게 실례를 무릅쓰고 하고 질문합니다..이 프로젝트에 간단하게 예를 들어서 코딩한 소스를 받아볼 수 있는지요..?부탁드립니다..^^

  6. 대단합니다. 존경스럽네요. 저를 살려주셧습니다.
    아무리 생각해도 어떻게 한건지 알수가 없엇는데
    여기에 다 있군요.
    너무 감사합니다

댓글 남기기