안드로이드 뷰 페이저 만들기.

뷰 페이지 예제

---

위 화면처럼 드래그로 오른쪽, 왼쪽으로 화면을 이동시키는 

안드로이드 뷰 페이저를 만들어 보겠습니다.

 

1. 화면 구성하기 ( XML )

1-1. 메인 레이아웃 설정하기.

예제로 만들어 볼 #뷰 페이저에서는

TextView 와 ViewPager를 위와 같이 배치해보겠습니다. 레이아웃은 자신이 원하는 대로 설정하시면 되겠습니다. 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" /> </LinearLayout>

1-2. 뷰페이저의 레이아웃

뷰페이저 레이아웃에는 이미지만 배치 합니다.

이미지 리소소를 처음에는 설정하지 않고, 소스에서 설정하도록 하겠습니다.

pager.xml

http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">     android:id="@+id/imageView"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:scaleType="fitXY" />

2. 소스 작업

// MainActivity 클래스 내에서만 모든 작업을 하겠습니다. public class MainActivity extends AppCompatActivity {      // 뷰 주소값을 담을 참조변수      ViewPager viewPager;      TextView textView;     // 뷰 페이저에 사용될 이미지 리소스를 지정 해주세요.    // res- drawable 폴더에 여러분의 이미지를 넣어주시면 됩니다.    Integer[] viewpagerImageId = {              R.drawable.car , R.drawable.city , R.drawable.continued, R.drawable.drop             };     @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);     // 뷰 주소값을 가져오기.          viewPager = (ViewPager)findViewById(R.id.viewpager);          textView = (TextView)findViewById(R.id.textView);    // ViewPager 를 아답터에 연결한다.          ViewPagerAdapter pagerAdapter = new ViewPagerAdapter(this);          viewPager.setAdapter(pagerAdapter);  // ViewPager 의 이벤트를 처리하기 위해 리스너를 설정한다.         ViewPagerChangeListener viewPagerChangeListener = new ViewPagerChangeListener();          viewPager.addOnPageChangeListener(viewPagerChangeListener); }   // Oncreate 함수에서는 Viewpager 참조변수를 만들고, 어답터 및 이벤트 리스너 연결 작업만 // 하였습니다. 즉 외형만 설계를 한거죠~

 

 

//  뷰 페이저에 연결될 Adapter 클래스 를 계속 만들어 보죠. // 아댑터 및 리스너들은 Mainactivity  접근 권한이 자유로운 내부 클래스로 만들어봅니다. // PagerAdapter 에서 상속을 받습니다. 사실 이런거 다 외울필요까진 없습니다.  // 언제 deprecated 될지 모르니까요... 예제들을 활용해 이해해서 사용하는것이 개발속도 및 여러면에서 좋습니다. // 참고로 자꾸 코딩하다 보면 손가락이 자동으로 치고있습니다. 물론 안드로이드 스튜디오의 자동 완성 기능도 더 // 발전하고 있으니까 말이죠... 클래스를 많이 외운다고 해서 앱 개발를 잘하는건 아닌것 같습니다. // ^^; 그저... 개인적 의견입니다. class ViewPagerAdapter extends PagerAdapter{ Context mContext = null; LayoutInflater mInflater;   // 생성자에서 inflate 참조 변수를 세팅합니다. public ViewPagerAdapter(Context context) { mContext = context; mInflater = LayoutInflater.from(mContext); } @Override // 뷰 페이저를 통해서 보여줄 항목의 개수 입니다. // 즉 화면의 개수가 되죠. // 전 이미지 테이블의 크기를 사용했지만, 각자 맞는 사이즈를 설정하면 됩니다. public int getCount() { return viewpagerImageId.length;  } @NonNull @Override // 뷰 페이저를 통해 보여줄 객체를 반환한다. // 실제 화면에 보여지게될 화면을 구성하는 곳으로 // 뷰페이저 XML를 메모리에서 읽어와서(Inflate) 이미지 리소스를 설정하고 // 뷰페이저에 해당 xml 레이아웃을 추가합니다. // 즉, 이곳이 화면을 구성하는 가장 중요한 부분이 됩니다. public Object instantiateItem(@NonNull ViewGroup container, int position) { View view = null; // 인플레이트로 뷰 페이저 레이아웃 가져옴. 해당 레이아웃에 이미지를 연결한다. view = mInflater.inflate(R.layout.pager, null); ImageView pager_image = (ImageView)view.findViewById(R.id.imageView); // 각 페이지가 선택되었을때 레이아웃에 이미지 리소스를 설정해준다. // position 매개변수는 현재 화면의 index 입니다. pager_image.setImageResource(viewpagerImageId[position]); // 뷰페이저에  해당 view 를 추가하기. container.addView(view ); return view; } // 추가 오버라이딩 함수들은 가이드에 따라 하기처럼 작성 해주시면 됩니다. @Override // instantiateItem 메서드에서 반환한 뷰 객체를 사용할 것인가를 결정하는 메서드. public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return (view == (View)object); } //뷰가 제거될때 호출되는 메서드 @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View)object); } }

 

 

// 뷰 페이지를 전환 할때  호출되는 리스너 클래스를 만들어 준다. class ViewPagerChangeListener implements ViewPager.OnPageChangeListener{ @Override //View 의 전환이 완료되었을때 호출되는 메서드. // 뷰페이저가 전환되면 필자는 MainActivity 의 TextView 에 글자를 입력하게 하였습니다. // 이때, 뷰페이저 내부의 view 들을 설정 할수도 있겠습니다. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { textView.setText( position + " 번째 뷰 페이지 화면입니다."); } // 하기 오버라이딩 메서드는 각자 필요에 따라 사용하시면 될것 같습니다. @Override //View 새페이지가 호출될때. public void onPageSelected(int position) { // textView.setText( position + "onPageSelected"); } @Override //페이지 스크롤을 시작할때. public void onPageScrollStateChanged(int state) { // textView.setText( "onPageScrollStateChanged"); } }

---

 

뷰 페이저 영상