5장 - 뷰페이저 만들기 (ViewPager2)

<뷰페이저 만들기>

뷰페이저 : 손가락으로 좌우 스크롤하여 넘겨볼 수 있는 기능

안에 프래그먼트를 넣을 수 있고, 좌우 스크롤로 프래그먼트를 전환하는 형식이다.

어댑터를 사용함.

 

구현할 것 :

1. 뷰페이저

2. '처음으로' 버튼 : 누르면 첫 화면으로 이동

3. 페이지 구분하는 상단 탭

 

※ 책에서는 ViewPager를 사용했지만, 현재 안드로이드 스튜디오에서는 ViewPager가 사라지고 ViewPager2만 남았기 때문에 ViewPager2를 사용한 코드를 작성했다. (그래서 책이랑 코드가 좀 다르다.)

 

1. activity_main

이런 식으로 배치한다. (책에서는 뷰페이저 안에 타이틀스트립을 넣는 방식으로 구현했으나, 안드로이드 스튜디오가 업데이트되면서 뷰페이저가 사라지고 뷰페이저2가 생겼다. 뷰페이저2에는 타이틀스트립을 넣을 수 없어서 그냥 상단탭을 넣는 것으로 대체했다.)

 

<activity_main.xml>

위처럼 배치해준 다음 그냥 TabLayout이랑 ViewPager2에다 id 값만 tablayout, pager로 넣어준다.

 

2. <MainActivity.java>

package com.example.chapter5_5;

public class MainActivity extends AppCompatActivity {
    ViewPager2 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(this);

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

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

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

        pager.setAdapter(adapter);

        // 버튼
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(0); // items[0] 으로 이동
            }
        });

        // 타이틀스트립 대체 (뷰페이저1에서만 되는거..라서 따로 코드 짬)
        TabLayout tabLayout = findViewById(R.id.tablayout);
        new TabLayoutMediator(tabLayout, pager, (tab, position) -> {
            tab.setText("페이지 " + position); // 각 탭 제목 설정
        }).attach();

    }

    class MyPagerAdapter extends FragmentStateAdapter {
        ArrayList<Fragment> items = new ArrayList<Fragment>();
        public MyPagerAdapter(AppCompatActivity activity){
            super(activity);
        }

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

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

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

 

2 - (1) MyPagerAdapter 클래스 만들기

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

FragmentStateAdapter를 상속받는다.

Fragment 객체가 들어가는 ArrayList 객체를 선언함. (items)

public MyPagerAdapter(AppCompatActivity activity){
    super(activity);
}

새로 만든 어댑터가 뭐.. 대충 부모의 액티비티를 상속받는다? 뭐 그런거 (아직도 잘 이해 안감)

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

addItem이라는 메서드를 새로 만든다. 입력받은 프래그먼트를 items에 넣는다.

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

createFragment 메서드를 재정의한다. 입력받은 값(위치)의 프래그먼트를 return 한다.

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

getItemCount 메서드를 재정의한다. items 배열의 크기를 return 한다.

 

2 - (2) 위에서 만든 클래스의 함수를 사용하여 뷰페이저 설정하기

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

        MyPagerAdapter adapter = new MyPagerAdapter(this);

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

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

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

        pager.setAdapter(adapter);

 

setOffscreenPageLimit(3)으로 뷰페이저의 최대 페이지 수(3)를 설정한다.

 

fragment 1,2,3을 각각 생성한 뒤 adapter.addItem으로 items에 넣어준다.

 

pager.setAdapter로 어댑터 객체가 설정되고, 이 때부터 뷰페이저는 어댑터에 있는 프래그먼트들을 화면에 보여줄 수 있게 된다.

 

2 - (3) '처음으로' 버튼 만들기

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(0); // items[0] 으로 이동
            }
        });

pager.setCurrentItem(n) 메서드를 사용하여, 버튼을 누르면 n번째 페이지로 이동한다.

 

2 - (4)  상단탭 배치

        TabLayout tabLayout = findViewById(R.id.tablayout);
        new TabLayoutMediator(tabLayout, pager, (tab, position) -> {
            tab.setText("페이지 " + position); // 각 탭 제목 설정
        }).attach();

TabLayoutMediator로 java 코드에서 탭의 상세 정보들을 변경할 수 있는 듯.

 

3. 실행 결과

아래와 같이 오른쪽으로 넘기면 다음 프래그먼트가 나타나는 것을 확인할 수 있다.

('처음으로' 버튼이랑 상단 탭은 실행화면 캡쳐 안함)