Dev./Android

ViewPager를 사용해 보자. (PagerAdapter 이용하기)

like miller 2011. 11. 4. 16:58

ViewPagerSampe.zip


*ADT 17 버전 부터는 라이브러리 파일을 프로젝트 내 libs 폴더에 넣어야 제대로 인식한다.

 빌드패스를 따로 잡아주지 않아도 자동으로 인식한다.

 샘플 소스는 libs 폴더에 넣지 않았기 때문에 ADT 17버전에서는 실행시 Exception이 발생한다.

 libs 폴더로 jar 파일을 이동시키고 빌드패스를 수정하면 된다


1.ViewPager란?

안드로이드 어플리케이션 개발을 하다 보면 좌/우로 fling이 되는 앱을 만들어야 하는 경우가 있다. 일반적으로 Gallery, HorizontalScrollView, ViewFlipper, ViewSwitcher등을 이용하여 개발을 하려고 한다. 만약에 좌/우로 움직여야 하는 뷰가 상/하로 Scroll되는 ScrollView일 경우 어떻게 될까? 물론 위에서 언급한 뷰를 써서 할 수 있다. 터치 이벤트를 변경하면 된다. 하지만 이렇게 개발하기 힘든 개발자도 많이 있다. ViewPager 는 이런 기능을 구현하기 위한 뷰이다. ViewPager를 이용한 대표 앱은 마켓, 구글+ 이다.

VierPager는 기본 SDK에 포함되어있지 않다. Extras에 존재하는 Support Package에 있다. 그래서 ViewPager를 사용하기 위해서는 android-support-v4.jar 라이브러리를 사용해야 한다.


*출처 : http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html



2. ViewPager 예제

ViewPager예제는 간단하게 2개의 화면으로 구성하였다.



 
 layout1.xml layout2.xml


다음은 실제 사용하는 소스 이다.


     /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(new BkPagerAdapter(getApplicationContext()));
    }


여기서는 Fragment에 대해서 잘 몰라도 쓸 수 있는 PagerAdapter를 사용한다.


아답터 구현 부분 소스 이다.


        @Override public int getCount() { return 2; }    //여기서는 2개만 할 것이다.
       
        //뷰페이저에서 사용할 뷰객체 생성/등록
        @Override public Object instantiateItem(View pager, int position) {
            View v = null;
            if(position==0){
                v = mInflater.inflate(R.layout.layout1, null);
                v.findViewById(R.id.btn1).setOnClickListener(mButtonClick);
                v.findViewById(R.id.btn2).setOnClickListener(mButtonClick);
            }
            else{
                v = mInflater.inflate(R.layout.layout2, null);
                v.findViewById(R.id.btn3).setOnClickListener(mButtonClick);
                v.findViewById(R.id.btn4).setOnClickListener(mButtonClick);
            }
           
            ((ViewPager)pager).addView(v, 0);
            return v;
        }
       
        //뷰 객체 삭제.
        @Override public void destroyItem(View pager, int position, Object view) {
            ((ViewPager)pager).removeView((View)view);
        }

        // instantiateItem메소드에서 생성한 객체를 이용할 것인지
        @Override public boolean isViewFromObject(View view, Object obj) { return view == obj; }



다음은 위의 코드를 실행시킨 결과 이다.


                


                


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

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


ViewPagerSampe.zip
0.42MB