Develop/Android

Android ViewPager 사용하기

dlsdnd345 2016. 2. 14. 16:25

Android ViewPager 사용하기

 

 

안녕하세요 .  최근 좋은일과 , 나쁜일이 같이 찾아와 포스트에 소홀했네요 ㅜ 

오늘은 최근 많이 사용하는 ViewPager 를 사용해보려 합니다 . 

아래 이미지가 눈에 많이 익으시죠 .. ?? 

Play Store 도 View Pager 를 이용했습니다 .

최근 많이 쓰는 UI 하나 인것 같습니다 .




사용 방법


ViewPager 를 사용하기 위해서는 준비되어야 할것이 있습니다 .

바로 android-support-v4.jar 파일이 있어야 합니다 .

하지만 최근에는 프로젝트 생성시 들어가 있어 크게 생각은 안하셔도 될것 같습니다 .





이렇게 준비가 되어 있으면 .. view pager를 이용할수 있습니다 .


1
2
3
4
5
6
7
8
9
10
11
12
13
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    >
    
          <android.support.v4.view.ViewPager
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />
 
</RelativeLayout>

 

 

화면 구성 입니다 .

xml 에서 눈여겨 보실 부분은 android.support.v4.view.ViewPager 부분입니다 .


1
2
3
4
5
6
7
8
9
10
11
12
13
public class MainActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
 
    ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
    ImageAdapter adapter = new ImageAdapter(this);
    viewPager.setAdapter(adapter);
  }
 
  
}

 

 

액티비티 코드 입니다.

ListView 나 GridView 사용법과 비슷 한것 같습니다 .

ViewPager에 Adapter 를 이용합니다 .


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
package com.manishkpr.viewpagerimagegallery;
 
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
 
public class ImageAdapter extends PagerAdapter {
    
    Context context;
    Bitmap galImage;
    BitmapFactory.Options options;
    private final int[] galImages = new int[] {
            R.drawable.image_01,
            R.drawable.image_02,
            R.drawable.image_03,
            R.drawable.image_03,
            R.drawable.image_04,
            R.drawable.image_05,
            R.drawable.image_06,
            R.drawable.image_07,
            R.drawable.image_08,
            R.drawable.image_09,
            R.drawable.image_10,
            R.drawable.image_11,
            R.drawable.image_12,
            R.drawable.image_13,
            R.drawable.image_14,
            R.drawable.image_15,
            R.drawable.image_16,
            R.drawable.image_17,
            R.drawable.image_18,
            R.drawable.image_19,
            R.drawable.image_20
    };
 
    ImageAdapter(Context context) {
        this.context = context;
        options = new BitmapFactory.Options();
    }
 
    @Override
    public int getCount() {
        return galImages.length;
    }
 
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == ((ImageView) object);
    }
 
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
 
        options.inSampleSize = 4;
        galImage = BitmapFactory.decodeResource(context.getResources(), galImages[position], options);
 
        imageView.setImageBitmap(galImage);
        ((ViewPager) container).addView(imageView, 0);
        return imageView;
    }
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((ImageView) object);
    }
}
 

 

 

PagerAdapter 를 이용한 Adapter 입니다 .

ViewPager의 핵심 코드 입니다 .


1
2
3
4
5
6
@Override
    public boolean isViewFromObject(View view, Object object)
@Override
    public void destroyItem(ViewGroup container, int position, Object object)
 @Override
    public Object instantiateItem(ViewGroup container, int position)

 

 

ViewPager 를 상속받으면 이와같이 3개의 메서드가 Override 됩니다 .


isViewFromObject : instantiateItem 에서 생성한 객체를 사용할지 여부를 판단 합니다 .

destroyItem : 화면에서 사라진 View 를 삭제 합니다.

instantiateItem : ViewPager에 사용할 View 를 생성하고 등록 합니다 .


Adapter의 코드는 간단하게 이미지 파일을 불러서 ViewPager에 보여주는 코드 입니다 .


instantiateItem 메서드 에서는 ImageView 를 생성하고 ImageView 사이즈를 리사이즈 후 넘겨주고 있습니다 .


이와같이 작성을 하면 




이와 같은 화면을 보실수 있습니다 .

기본 ViewPager 코드입니다 . 리스트뷰와 같이 조금 응용하면 

Custom ViewPager도 가능할것 같습니다 .


저작자표시 (새창열림)