무한 스크롤 되는 ViewPager

몇 몇 분들이 뷰페이저에서 무한 스크롤? 이 가능하게 하려면 어떻게 해야 하냐고 질문을 하셔서  이번에는 그 기능을 추가한 샘플을 올려본다.

1. 무한 스크롤? 개념 파악

갤러리, 뷰페이저를 사용하여 5개의 아이템을 보여준다고 가정하자. 1번째 아이템에서 5번째 아이템으로 역으로 이동하고 5번째 아이템에서 다시 1번째 아이템으로 돌아오는 기능이다. 자료구조의 원형 리스트라고 생각하면 될 것 같다.

2. 무한 스크롤? 동작의 이론

여기 샘플에서 사용하는 방법은 http://blog.naver.com/PostView.nhn?blogId=kkamci25&logNo=10094828693 를 참조하였음을 알려드립니다. 해당 포스트는 갤러리에서 아이템을 무한 스크롤 하는 방법으로 뷰페이저에서도 동일합니다.

 * 뷰페이저는 원래의 아이템 보다 3배 많은 아이템을 가지고 있어야 한다.

   원래 사과, 배, 수박, 메론 4개의 아이템만 보여줄려고 했다면 무한 스크롤을 하기 위해서는 3배인

  사과, 배, 수박, 메론, 사과, 배, 수박, 메론, 사과, 배, 수박, 메론 12개이 아이템을 가지고 있어야 한다.

   하지만 실제로는 맨앞에 있는 사과, 배, 수박 과 맨 마지막에 있는 배, 수박, 메론은 사용하지 않는다.

   즉 원래 아이템 4개에 앞뒤로 1개씩 붙인 메론, 사과, 배, 수박, 메론, 사과 만 사용한다.

   3배를 한 이유는 계산과 코딩이 간단해 지기 때문이다.

 * 뷰페이저는 3배가 된 아이템 중 가운데 범위의 아이템만 보여줄 것이다.

    4개 아이템의 3배인 12개의 아이템 중 실제 사용에게 보여줄 아이템의 범위(0~11 중)는  4~7 이다.

 * 가운데 범위를 넘어가면 강제로 가운데 범위에 있는 해당 아이템으로 이동한다

3. 소스 적용

* 뷰페이저는 원래의 아이템 보다 3배 많은 아이템을 가지고 있어야 한다.

아답터 소스에서 전체 아이템 갯수를 원래의 3배로 한다

그리고 실제 뷰를 생성할때는 포지션을 3으로 나눈 나머지를 가지고 원래 보여져야할 뷰를 생성한다

private class BkPagerAdapter extends PagerAdapter{
        private Context mContext;
        public BkPagerAdapter( Context con) { super(); mContext = con; }

        @Override public int getCount() { return COUNT * 3; }   //아이템 3배 해줌.

       

        //뷰페이저에서 사용할 뷰객체 생성/등록
        @Override public Object instantiateItem(View pager, int position)
        {
            position %= COUNT;       //생성할 아이템은 포지션을 3으로 나눈 나머지로 계산
            TextView tv = new TextView(mContext);                    //텍스트뷰
            tv.setBackgroundColor(mColorArray[position]);            //배경색 지정
            tv.setText("ViewPager Item"+(position+1));                //글자지정
            tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 24);        //글자 크기 24sp
            tv.setTextColor(mColorArray[mColorArray.length - (position+1)]);   //글자 색상
            ((ViewPager)pager).addView(tv, 0);        //뷰 페이저에 추가

            return tv;
        }

}

* 뷰페이저는 3배가 된 아이템 중 가운데 범위의 아이템만 보여줄 것이다.

뷰페이저에서 아답터를 설정하고 나면 바로 가운데 범위에 있는 아이템을 선택한다

mPager = (ViewPager)findViewById(R.id.pager);                        //뷰 페이저        mPager.setAdapter(new BkPagerAdapter(getApplicationContext()));//PagerAdapter로 설정
mPager.setCurrentItem(COUNT);        //무한 스크롤 하기 위해서는 가운데 범위의 아이템만 보이게 한다

* 가운데 범위를 넘어가면 강제로 가운데 범위에 있는 해당 아이템으로 이동한다

뷰페이저에서 가운데 범위를 넘가면 즉, 1번째 아이템에서 마지막 아템으로 역으로 가거나 마지막 아이템에서 1번째 아이템으로 이동할 경우

mPager.setOnPageChangeListener(new onPageChangeListener() {    //아이템이 변경되면
            @Override public void onPageSelected(int position) {
                if(position < COUNT)        //1번째 아이템에서 마지막 아이템으로 이동하면
                    mPager.setCurrentItem(position+COUNT, false); //이동 애니메이션을 제거 해야 한다
                else if(position >= COUNT*2)     //마지막 아이템에서 1번째 아이템으로 이동하면
                    mPager.setCurrentItem(position - COUNT, false);

            }

}

이렇게 하면 무한 스크롤? 되는 뷰페이저가 된다.

샘플코드를 실행하시면 이전 샘플도 같이 있습니다. CircularViewPager를 보시면 됩니다.

전체 샘플 코드 첨부하였습니다.

*글과 자료는 출처만 밝히시면 얼마든지 가져다 쓰셔도 됩니다.

ViewPagerSampe.zip

ViewPagerSampe.zip

0.47MB