[Do it! 안드로이드 앱 프로그래밍 #15] 뷰페이저 만들기

15 뷰페이저 만들기

뷰페이저는 손가락으로 스크롤하여 넘겨볼 수 있는 기능을 제공한다. 뷰페이저는 그 안에 프래그먼트를 넣을 수 있고 좌우 스크롤로 프래그먼트를 전환하게 된다. 뷰페이저는 내부에서 어댑터라는 것과 상호작용하게 되어 있는데 이것은 뷰페이저가 여러 개의 아이템 중에 하나를 보여주는 방식으로 동작하기 때문이다. 어댑터에 대해서는 나중에 리싸이클러뷰를 다룰 때 자세하게 설명한다.

 

[뷰페이저 만드는 순서]

① 메인 XML 레이아웃 파일에 ViewPager 위젯을 추가한다. (뷰페이저의 id 속성 값으로 pager를 입력한다.)

② 뷰페이저 안에 넣을 프래그먼트 세 개를 만든다. (프래그먼트도 마찬가지로 XML 레이아웃 파일과 소스 코드 파일이 한 쌍이 되어야 한다.)

③ MainActivity.java 파일에 어댑터 클래스를 추가하고 프래그먼트를 어댑터에 추가한다.

 

▼ 어댑터 클래스 추가하고 프래그먼트를 어댑터에 추가하기

public class MainActivity extends AppCompatActivity {
    ViewPager pager;

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

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

        MyPagerAdapter adapter = new MyPagerAdapter(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);
    }

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

        public MyPagerAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

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

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

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

[MyPagerAdapter 클래스]

 

-FragmentStatePagerAdapter: 어댑터는 뷰페이저에 보여줄 각 프래그먼트를 관리하는 역할을 하며, 뷰페이저에 설정하면 서로 상호작용하면서 화면에 표시해주게 된다.

 

-ArrayList: ArratList 객체 안에는 프래그먼트 객체를 넣는다.

 

-addItem, getItem, getCount: addItem 메서드로 프래그먼트를 추가하고, getItem 메서드로 프래그먼트를 가져가고, getCount 메서드로 몇 개의 프래그먼트가 들어있는지 확인한다.

 

이제 이 어댑터를 사용하기 위한 실제 코드가 들어있는 onCreate 메서드를 확인해보겠다.

 

 

[onCreate 메서드]

 

XML 레이아웃에 들어있는 ViewPager 객체를 findViewById 메서드로 찾아 참조한 후 setOffscreenPageLimit 메서드로 미리 로딩해 놓을 아이템의 개수를 세 개로 늘린다.

 

만들어놓은 세 개의 프래그먼트는 객체로 만든 후 어댑터에 추가한다. addItem 메서드를 호출하면서 프래그먼트 객체를 파라미터로 넘겨주면 어댑터 안에 들어 있는 ArrayList에 추가된다.

 

setAdapter 메서드를 호출하면 어댑터 객체가 설정되고 이때부터 뷰페이저는 어댑터에 있는 프래그먼트들을 화면에 보여줄 수 있게 된다.

 

뷰페이저 만들기