#Android ViewPager

하나의 Activity에서 여러 가지 레이아웃 페이지를 표현하고자 할 때 많이 사용 하던 것이 ViewFlipper 를 사용해 왔었습니다. 더 나아가 ViewFilpper에 TouchListener를 달아서 좌/우 터치 드래그시에 페이지 전환이 가능하도록 하였고 Animation을 적용시켜 부드럽게 전환되게도 하였죠. 여기에 페이지관리를 편하게 하려고 include도 사용하였었습니다.

오랫동안 안드로이드 개발을 접고 있다가 다시 시작하려고 이것저것 알아 보던 차에 ViewPager란 아주 편리한 컴퍼넌트가 있다는 것을 알게 되었네요. 요놈은 자체적으로 ViewFlipper 사용시에 사용했던 터치 리스너/Animation 등을 자동으로 적용시켜주어서 더 관리가 편해지게끔 만들어 주네요. 거기다 터치 리스너 동작 시에는 다음페이지나 이전페이지로 드래그하다 다시 본래의 페이지로 돌아오게 끔도 할 수 있고요(말로는 설명하기 참 애매하군요 ㅎㅎ) ViewFlipper로 이렇게 작성하기 위해서 예전에 갤러리뷰를 이용한 방법이 있다 들은 것 같은데 이제 ViewPager 하나로 그런 것 다 필요 없어졌네요.

 

ViewPagerTest 구동 영상

위의 동영상은 ViewPagerTest를 구동시킨 영상입니다. 녹화하면서 마우스 커서를 없애버려서 좌/우 버튼을 이용하는지 드래그를 이용하는지 확인이 어려워졌네요!

우선 이클립스에서 안드로이드 프로젝트를 생성하고 ViewPager를 사용하기 위해선 추가 라이브러리를 등록 하셔야 합니다.

android-support-v4.jar는 안드로이드 SDK폴더/extras/android/support/v4 안에 있습니다.

<android.support.v4.view.ViewPager

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent"

    android:layout_below="@id/bt_prev"

    android:layout_marginTop="15dip" 

    android:id="@+id/vp_main"/>

ViewPager의 xml 기본 사용방법입니다. CustomView들을 만들고 사용하던 것처럼 라이브러리에 저장된 경로 전체로 사용해 주어야 하네요.

cpa = new CustomPagerAdapter();

vp_main = (ViewPager) findViewById(R.id.vp_main);

vp_main.setAdapter(cpa);

CustomPagerAdapter를 ViewPager에 등록하여 사용하였습니다. CustomPagerAdapter는 PagerAdapter를 extends 해주고 내부에서 ViewPager의 크기와 각 페이지에 대한 정의를 해줄 수 있습니다.

//CustomPagerAdapter

//ViewPager 크기 정의

@Override

public int getCount() {

        return VIEW_PAGE_NUM;

}

/**

 * CstomPagerAdapter

 * 각 페이지 정의

 */

@Override

public Object instantiateItem(View collection, int position) {

    View view = null;

    if(position == 0){

        view = View.inflate(context, R.layout.page_one, null);

    }else if(position == 1){

        view = View.inflate(context, R.layout.page_two, null);

    }else if(position == 2){

        view = View.inflate(context, R.layout.page_three, null);

    }

    ((ViewPager) collection).addView(view,position);

    return view;

}

오러라이드 되는 instantiateItem 에서 각 페이지별로 레이아웃 view들을 정의해 주어 표현합니다. test소스에서는 각 페이지별로 layout xml을 만들어 주었습니다.

//ViewPage 페이지 변경 리스너

vp_main.setOnPageChangeListener(new OnPageChangeListener(){

    @Override

    public void onPageScrollStateChanged(int state) {}

    @Override

    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    @Override

    public void onPageSelected(int position) {

        //페이지가 변경될때 변경되는 페이지 포지션에 대한 체크(버튼을 활성화/비활성화 시켜줌)

        pageCheck(position);                

    }

});

ViewPager 페이지 변경 리스너로 변경 될 때 필요한 사항도 정의를 해줄 수 있습니다. 이번 test소스에서는 좌/우 드래그 뿐만 아니라 임의로 상단에 이전/다음 버튼을 정의하여 그 버튼들에 의해서 변경될 때를 체크하기 위해서 사용하였습니다. 맨 첫번째 페이지에 있으면 이전 버튼의 비활성화 , 마지막 페이지에 있으면 다음 버튼의 비활성화가 리스너에서 해주는 일입니다.

ViewPagerTest.zip