뷰 페이저(ViewPager) 만들기

뷰페이저는 손가락으로 좌우 스크롤하여 넘겨볼 수 있는 기능을 제공합니다.

화면 전체를 뷰페이저로 채우면 좌우 스크롤을 이용해 화면을 넘겨볼 수 있게 되죠.

만약 화면 일부분을 차지하고 있다면 그 부분에서만 좌우 스크롤로 넘겨볼 수 있습니다.

여러 개의 아이템 중에 하나를 선택하여 보기 위해 화면을 스크롤하는 것이므로 뷰페이저도 선택 위젯으로 만듭니다.

뷰페이저를 어떻게 만드는지 알아봅시다.

뷰페이저의 구성

뷰페이저는 좌우 스크롤을 통해 여러 개의 화면을 전환할 수 있도록 만든 것입니다.

뷰페이저 안에 들어가는 각각의 화면은 프래그먼트로 만들 수 있으며 어댑터 패턴을 사용하여 프래그먼트들을 관리할 수 있습니다.

프래그먼트를 하나의 아이템으로 관리하는 어댑터는 SDK에서 미리 만들어져 제공되는 어댑터를 사용하는 것이 일반적입니다.

어댑터의 구성

레이아웃에 추가

메인 액티비티의 XML 레이아웃에 뷰페이저를 추가합니다.

뷰페이저는 support 라이브러리에 들어가 있으므로 패키지 이름까지 넣어주어야 합니다.

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

 

어댑터 정의

어댑터는 SDK에서 제공하는 FragmentStatePagerAdapter를 상속하여 만듭니다.

SDK에서 제공하는 다른 어댑터를 사용할 수도 있지만 각 아이템으로 프래그먼트를 넣는 경우에는 이 클래스를 사용하는 경우가 많습니다.

어댑터에는 프래그먼트 객체를 담을 ArrayList를 선언하고 필수 메소드를 정의합니다.

class MoviePagerAdapter extends FragmentStatePagerAdapter {
    ArrayList<Fragment> items = new ArrayList<Fragment>();

    public MoviePagerAdapter(FragmentManager fm) {
        super(fm);
    }

    public void addItem(Fragment item) {
        items.add(item);
    }

    @Override
    public Fragment getItem(int position) {
        return items.get(position);
    }

    @Override
    public int getCount() {
        return items.size();
    }

}

 

뷰페이저에 어댑터 설정

어댑터를 정의했다면 뷰페이저에 어댑터 객체를 설정해야 합니다.

어댑터에는 프래그먼트 객체를 만들어 넣을 수 있으며 이 프래그먼트가 화면에 보이게 됩니다.

public class MainActivity extends AppCompatActivity {
    ViewPager pager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        pager = (ViewPager) findViewById(R.id.pager);
        pager.setOffscreenPageLimit(3);

        MoviePagerAdapter adapter = new MoviePagerAdapter(getSupportFragmentManager());

        Fragment1 fragment1 = new Fragment1();
        adapter.addItem(fragment1);

        Fragment2 fragment2 = new Fragment2();
        adapter.addItem(fragment2);

        Fragment3 fragment3 = new Fragment3();
        adapter.addItem(fragment3);

        pager.setAdapter(adapter);

 

Q.뷰 페이저의 각 아이템에 보이는 프래그먼트가 동일한 레이아웃을 가지고 있다면 프래그먼트를 하나만 정의할 수도 있을까요?

A. 네. 동일한 레이아웃이라면 하나의 프래그먼트를 여러 번 사용하면 될 것 같습니다.

Q.뷰페이저 외에 좌우 스크롤을 이용해 화면을 넘겨볼 수 있는 다른 방법이 있을까요?

A. HorizontalScrollView라는 것이 존재하던데 그걸 사용하면 될 것 같습니다.