안드로이드 Andorid Viewpager PagerAdapter 페이지 넘기기 사용 하기 관련

스마트기기개발관련/안드로이드 개발

안드로이드 Andorid Viewpager PagerAdapter 페이지 넘기기 사용 하기 관련

AlrepondTech 2013. 8. 20. 17:22

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////

Horizontal View Swiping with ViewPager

[이 포스트는 Rich “geekyouup” Hyndman 에 의해 작성되었습니다. 인생을 조금 쉽게 만들기 위하여 노력하는 사람이지요. — Tim Bray]

여러분이 이제 막 안드로이드 어플리케이션 개발을 시작한 개발자이건, 능숙한 베테랑이건 상관 없이, 수평으로 스크롤 되는 View 를 만들 경우가 있습니다. 이미 많은 안드로이드 어플리케이션들이 이 기능을 활용하고 있습니다. 예를 들어 새로운 안드로이드 마켓 어플리케이션이나, 구글 닥스, 구글+ 등이 그렇지요. ViewPager 는 이런 기능을 구현하기 위한 표준 방법입니다.

ViewPager 는 'Compatibility Package Revison 3' 라이브러리에 포함되었으며, 안드로이드 1.6 이 후 버전에서 정상적으로 동작합니다. 우선 이 링크에 나온대로 라이브러리를 설치 하세요. 그 이 후에, 여러분의 안드로이드 프로젝트에서 우클릭을 하신 후, 'Android Tools' 메뉴를 선택하고, 'Add Compatibility' 항목을 선택하시기 바랍니다. 이 후에는 이제 새로운 기능을 활용하실 수 있습니다. (주> 몇 가지 주의사항이 있습니다. 우선, Add Compatibility 항목은 최신 ADT(version 12) 를 사용하지 않으면 나타나지 않는 거 같습니다. 그리고, Compatibility Package 라이브러리 설치가 완료된 후에는, 위의 링크에 나온 것처럼 개별 프로젝트에 라이브러리 추가 메뉴를 통해, 설치된 android-support-v4.jar 파일을 명시적으로 추가하셔야 합니다.)

ViewPager 는 ViewGroup 의 일종으로, Gallery 나 ListView 같은 AdapterView 와 유사한 형식으로 동작합니다. 따라서 쉽게 사용하실 수 있을 겁니다. 단, 안드로이드 라이브러리에 기본적으로 존재하는 View 는 아니기 때문에, ViewPager 를 xml 레이아웃 상에서 사용하실 때는, 클래스 풀네임을 정확히 적으셔야합니다. 아래와 같이 말이지요.

 <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        … />

ViewPagers 가 표시하는 View 는 PagerAdapter 를 통해 공급받습니다. PageAdapter 를 통해 개발자는 화면에 표시될 View 의 라이프사이클을 관리 할 수 있습니다. 일반적인 ListView 와 ListAdapter 의 관계와 동일하다고 이해하시면 됩니다. 한가지, PageAdapter 구현 클래스로 FragmentPagerAdapter 가 제공되는데, 이를 이용하면 여러분은 ViewPager 에서 Fragment 를 활용할 수 있습니다. 사용법은 getCount() 나 getItem() 을 구현하는 것 만큼이나 간단하지만 강력합니다. 이에 관한 샘플 코드가 Support Demos 항목에 이미 제공되고 있습니다. 그 중에서 관련된 부분을 조금 발쵀해 봤습니다.

    public static class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public int getCount() {
            return NUM_ITEMS;
        }

        @Override
        public Fragment getItem(int position) {
            return ArrayListFragment.newInstance(position);
        }
    }

Fragment 를 처리하는 PagerAdapter 는 기본적으로 두 종류가 제공됩니다. 기본적으로 FragmentPagerAdapter 의 경우, 사용자가 어플리케이션 화면을 스윕해서 새로운 View 가 표시되면, 이전 Fragment 를 분리한 후, 메모리 상에 저장해 둡니다. 만일 사용자가 어플리케이션 화면을 반대로 스윕하면, 메모리 상에 보전된 Fragment 를 재활용하지요. 따라서, 여러분이 많은 수의 Fragment 를 지원할 필요가 있는 경우에는 FragmentStatePagerAdapter 를 고려할 필요가 있습니다. 이 경우, 개별 Fragment 는 화면에서 사라질 때 메모리 상에서 제거되며, 사용자가 화면을 반대로 스윕했을 떄, 기존에 저장된 상태 값을 기반으로 새롭게 재생성됩니다. 따라서, 만일 수는 적지만, 복잡한 구조의 Fragment 를 사용하는 경우에는 FragmentPagerAdpater 를, 많은 수의 Fragment 를 사용하는 경우에는 FragmentStatePagerAdapter 를 선택하시는 편이 좋습니다.

또 한가지. 여러분의 이해를 돕기위하여 TextView 로 동작하는 ViewPager/PagerAdapter 예제 코드를 작성했습니다. 해당 예제를 기반으로 원하는 PagerAdapter 를 구현 하는 것은 여러분의 몫입니다. PageAdapter 의 instantiateItem() / destroyItem() 메서드를 통해 ViewPager 가 전달 됨으로, 해당 ViewPager 에 원하는 View 를 추가하거나 삭제할 수 있습니다.

    @Override
    public Object instantiateItem(View collection, int position) {
        View v = layoutInflater.inflate(...);
        ...
        ((ViewPager) collection).addView(v,0);
        return tv;
    }

    @Override
    public void destroyItem(View collection, int position, Object view) {
        ((ViewPager) collection).removeView((TextView) view);
    }

ViewPager 의 소스 코드는 <android-sdk>/extras/android/compatibility/v4/src. 에 포함되어 있습니다. 소스 코드와 Java Doc 문서를 잘 참고하시면, 여러가지 유용한 메서드들을 발견하실 수 있을 것 입니다. 예를 들어, setOnPageChangeListener() 같은 메서드는 현재 어플리케이션에서 어떤 View 가 화면 상에 표시되고 있는지 추적할 수 있게 해 줍니다.

만일 여러분이 안드로이드 마켓에 ViewPager 를 이용한 어플리케이션을 출시하신다면, 구글+나 트위터를 통해 저에게 알려주세요. 저는 이 ViewPager 가 얼마나 널리 사용될 지, 그리고 어떤 멋진 시나리오를 가져올 지 기대하고 있답니다

출처: http://arabiannight.tistory.com/53

드로이드/Andorid Viewpager 사용 하기

▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ ViewPager란?? ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒

ViewPager란 수평으로 View를 좌/우 로 스크롤 할때 사용 할때 사용하는 클래스 입니다. 안드로이드 기본으로 지원하는 클래스는 아니지만 안드로이드 제공하는 'Compatibility Package Revison 3' Support 라이브러리에 포함 되어 안드로이드 1.6 이후 버젼 이후에는 사용이 가능 합니다.

일반적으로 좌/우 로 화면을 전환할 경우 Gallery, HorizontalScrollView, ViewFlipper, ViewSwitcher등을 이용하여 개발을 많이 하는데요 전문적으로 화면전환을 위해 만들어진 Viewpager를 이용하면 좀 더 편리하고 기능적인 화면을 구성 할 수 있습니다.

아래는 Viewpager의 동작 방식 입니다.

(구글 마켓이나 구글+ 도 Viewpager방식으로 만들어 졌습니다.)

Viewpager는 위의 그림 처럼 좌/우 로 이동 시켜 주면 화면이 전환 되면서 동작 합니다.

▒ ▒ ▒ ▒ ▒ ▒ ▒ ViewPager 를 위한 설치 준비 ▒ ▒ ▒ ▒ ▒ ▒ ▒

기본적으로 Viewpager를 사용하기 위해서는 Support Libary를 사용 해야 합니다. 안드로이드 SDK에서 기본으로 제공해주는 클래스가 아니기 때문에 "android-support-v4.jar"라는 Libary를 추가 해서 사용 해야 합니다.

"android-support-v4.jar" 를 사용하기 위해서는 Viewpager를 사용할 Project의 Properties에서 Java Build Path(Alt + Enter)를 선택 합니다. Java Build Path의 Libraries탭을 선택하고 외부에서 직접 Jar파일을 추가 할 수 있는 Add External JARs... 를 선택 합니다. 그러면 두번째 그림과 같이 JAR Selection 창이 나오는데 아래와 같이 추가해 주시면 됩니다.

Add External JARs... 를 선택후,

자신의 Android 설치 폴더의 extras -> android -> support -> v4 폴더에 가면 "android-support-v4.jar" 라이브러리를 추가 할 수 있습니다.

< 만약에 폴더가 없거나 라이브러리를 추가 할 수 없다면, 최신 버젼의 SDK와 ADT 를 설치 해 보시고 다시 추가해 보시기 바랍니다. >

▒ ▒ ▒ ▒ ▒ ▒ ▒ XML에 ViewPager 적용 하기 ▒ ▒ ▒ ▒ ▒ ▒ ▒

라이브러리를 재대로 추가 한 후에 XML에 ViewPager를 사용한 코드 입니다. Viewpager를 사용하기 위해서는<android.support.v4.view.ViewPager> 클래스를 풀네임을 모두 적어 주어야 하는데요. 그 이유는 아까 말씀 드렸듯이 안드로이드가 기본적으로 지원하는 클래스가 아니기 때문 입니다.

<android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@+id/bottom"
            android:layout_below="@+id/ll_title_layout"
            >
</android.support.v4.view.ViewPager>

▒ ▒ ▒ ▒ ▒ ▒ ▒ Java 전체 코드 입니다. ▒ ▒ ▒ ▒ ▒ ▒ ▒

package arabiannight.tistory.com;
 
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;
 
public class TestViewPagerActivity extends Activity implements OnClickListener{
    private ViewPager mPager;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
         
        setLayout();
         
        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(new PagerAdapterClass(getApplicationContext()));
    }
 
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.btn_one:
            setCurrentInflateItem(0);
            break;
        case R.id.btn_two:
            setCurrentInflateItem(1);
            break;
        case R.id.btn_three:
            setCurrentInflateItem(2);
            break;
        }
    }
     
    private void setCurrentInflateItem(int type){
        if(type==0){
            mPager.setCurrentItem(0);
        }else if(type==1){
            mPager.setCurrentItem(1);
        }else{
            mPager.setCurrentItem(2);
        }
    }
     
    private Button btn_one;
    private Button btn_two;
    private Button btn_three;
     
    /**
     * Layout
     */
    private void setLayout(){
        btn_one = (Button) findViewById(R.id.btn_one);
        btn_two = (Button) findViewById(R.id.btn_two);
        btn_three = (Button) findViewById(R.id.btn_three);
         
        btn_one.setOnClickListener(this);
        btn_two.setOnClickListener(this);
        btn_three.setOnClickListener(this);
    }
     
    private View.OnClickListener mPagerListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            String text = ((Button)v).getText().toString();
            Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT).show();
        }
    };
     
    /**
     * PagerAdapter 
     */
    private class PagerAdapterClass extends PagerAdapter{
         
        private LayoutInflater mInflater;
 
        public PagerAdapterClass(Context c){
            super();
            mInflater = LayoutInflater.from(c);
        }
         
        @Override
        public int getCount() {
            return 3;
        }
 
        @Override
        public Object instantiateItem(View pager, int position) {
            View v = null;
            if(position==0){
                v = mInflater.inflate(R.layout.inflate_one, null);
                v.findViewById(R.id.iv_one);
                v.findViewById(R.id.btn_click).setOnClickListener(mPagerListener);
            }
            else if(position==1){
                v = mInflater.inflate(R.layout.inflate_two, null);
                v.findViewById(R.id.iv_two);
                v.findViewById(R.id.btn_click_2).setOnClickListener(mPagerListener);
            }else{
                v = mInflater.inflate(R.layout.inflate_three, null);
                v.findViewById(R.id.iv_three); 
                v.findViewById(R.id.btn_click_3).setOnClickListener(mPagerListener);
            }
             
            ((ViewPager)pager).addView(v, 0);
             
            return v; 
        }
 
        @Override
        public void destroyItem(View pager, int position, Object view) {    
            ((ViewPager)pager).removeView((View)view);
        }
         
        @Override
        public boolean isViewFromObject(View pager, Object obj) {
            return pager == obj; 
        }
 
        @Override public void restoreState(Parcelable arg0, ClassLoader arg1) {}
        @Override public Parcelable saveState() { return null; }
        @Override public void startUpdate(View arg0) {}
        @Override public void finishUpdate(View arg0) {}
    }
     
}

▒ ▒ ▒ ▒ ▒ ▒ ▒ 코드 설명 입니다. ▒ ▒ ▒ ▒ ▒ ▒ ▒

ViewPager 표시하는 View는 PagerAdapter를 통해 공급 받습니다. PagerAdapter를 통해 화면에 표시 될 View의 라이프 사이클을 관리 할 수 있습니다. 일반적인 ListView와 ListAdapter의 관계와 동일하다고 이해 하시면 됩니다. 즉, Adapter를 통해 ViewPager에 표시되는 Data들을 관리한다는 내용 입니다.

VieaPager와 PagerAdapter를 연결 시켜 주는 부분 입니다. setAdapter를 통해 연결 합니다.

1 2	`mPager = (ViewPager)findViewById(R.id.pager);` `mPager.setAdapter(new` `PagerAdapterClass(getApplicationContext()));`

PagerAdapter 상속 구현 클래스 부분 입니다. PagerAdapter에서 instantiateItem() 라는 오버라이드 메서드가 있는데 ViewPager의 getCount()에서 얻어온 Count의 Position별로 Pager에 등록할 item을 처리 할 수 있는 메서드 입니다. 즉, VieaPager에서 사용할 뷰객체를 생성하는 작업 입니다.

단 주의 해야 할 점이 있는데,
처음 실행시 PagerAdapter는 현재의 position의 Item의 양쪽 옆의 View들을 모두 instantiateItem() 해준다는 점인데요. 처음 시작시에는 position션이 첫번째인 item을 보여주기 때문에 아래와 같은 형태로 View를 그려 줍니다.

처음 저희가 사용할 View는 총 3개의 View입니다.(Position 첫번째, 두번째 , 세번째)

1. 첫번째 포지션으로 시작했을 경우 입니다. ( 첫번째 두번째 View가 모두 생성 됩니다. 이말은 즉 instantiateItem() 을 두번 탓다는 얘기 입니다.)

2. 두번째 포지션으로 이동했을 경우 입니다. ( 세번째 포지션이 생성 됩니다. 그리고 첫번째 포지션도 유지하고 있습니다. ) 포지션이동은 좌/우 스크롤을 이용하거나 setCurrentInflateItem(int position) 메서드로 원하는 포지션으로 이동할 수 있습니다.

2. 세번째 포지션으로 이동했을 경우 입니다. ( 첫번째 포지션을 삭제 합니다. )

이러한 형태로 PagerAdapter의 View관리가 이루어 집니다. 항상 양쪽의 View를 생성하거나 유지 시키고 나머지 포지션은 삭제 하는 형태 입니다.

▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ PagerAdapter API 설명 ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒

getCount() : 현재 PagerAdapter에서 관리할 갯수를 반환 한다.

instantiateItem() : ViewPager에서 사용할 뷰객체 생성 및 등록 한다.

destroyItem() : View 객체를 삭제 한다.

isViewFromObject() : instantiateItem메소드에서 생성한 객체를 이용할 것인지 여부를 반환 한다.

restoreState() : saveState() 상태에서 저장했던 Adapter와 page를 복구 한다.

saveState() : 현재 UI 상태를 저장하기 위해 Adapter와 Page 관련 인스턴스 상태를 저장 합니다.

startUpdate() : 페이지 변경이 시작될때 호출 됩니다.

finishUpdate() : 페이지 변경이 완료되었을때 호출 됩니다. 

▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ 첨부파일 ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒

TestViewPager.zip

▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒ 참고 사이트 ▒ ▒ ▒ ▒ ▒ ▒ ▒ ▒

출처 : http://blog.daum.net/mailss/16

출처 : http://blog.naver.com/PostView.nhn?blogId=huewu&logNo=110116958816

음 이것으로 ViewPager의 포스팅을 마치겠습니다.!! 음! 위의 두사이트가 참 많이 도움이 되었습니다.!

유용하게 사용하셨으면 좋겠네요.

문의 사항은 댓글로 남겨주세요.^^ ㅎㅎ

출처: http://blog.daum.net/haha25/5387919

http://blog.daum.net/mailss/16

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).seton_clickListener(mButton_click);
                v.findViewById(R.id.btn2).seton_clickListener(mButton_click);
            }
            else{
                v = mInflater.inflate(R.layout.layout2, null);
                v.findViewById(R.id.btn3).seton_clickListener(mButton_click);
                v.findViewById(R.id.btn4).seton_clickListener(mButton_click);
            }

            ((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; }

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

//-----------------------

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

//////////////

저작자표시

'스마트기기개발관련 > 안드로이드 개발' 카테고리의 다른 글

안드로이드로 android sound 사운드 가 디바이스에 이상하게 들리거나 짤릴때게 들릴 때 관련 (0)	2014.01.18
안드로이드 focus이동 id로 포커스이동 setNextFocusDownId setNextFocusUpId setNextFocusLeftId setNextFocusRightId (1)	2013.11.01
[안드로이드] android res/raw 에서 파일 읽기쓰기 관련 (2)	2013.08.19
안드로이드 URL(https://play.google.com 이용)로 데이터 확인 해서 업데이트 버전 체크 최신버전 관리 관련 (6)	2013.07.31
안드로이드 AlertDialog 상속하여 커스텀 팝업창을 만들때 창이외에 터치를 해도 창이 안사라지게 하는방법 또는 이벤트 (0)	2013.07.24

현재글안드로이드 Andorid Viewpager PagerAdapter 페이지 넘기기 사용 하기 관련

알레폰드의 테크 이모저모