안드로이드/Andorid Viewpager 사용 하기

안드로이드/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를 통해 연결 합니다.

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의 포스팅을 마치겠습니다.!! 음! 위의 두사이트가 참 많이 도움이 되었습니다.! 

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

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