ViewPager2 뷰페이저 만들기 / Android Studio / 안드로이드 앱만들기 30

뷰페이저 만들기

손가락을 좌우로 스크롤해 넘겨볼 수 있는 기능
- 뷰페이저 안에 프래그먼트를 넣을 수 있음 (좌우 스크롤로 프래그먼트 전환)
- 뷰페이저 내부에서 어댑터와 상호작용을 함 (뷰페이저가 여러개의 아이템중 하나를 보여주는 방식으로 동작)

 

 

책에있는 ViewPager 내용

 

1. SamplePager 프로젝트 생성
- 패키지 이름 변경 ~~. pager
- 최상위 레이아웃 LinearLayout / orientation 속성 vertical  변경

- 버튼 추가
- 텍스트 제거 Containers 폴더안에 ViewPager / layout_width, layout_height 속성 match_parent / 뷰페이저 id pager로 설정

2. SampleTab 예제의 프래그먼트파일 fragment1, fragment2, fragment3 파일 xml와 java 파일 복사 또는 새로 만들기

- 나는 프래그먼트파일 3개 새로만듬

3. MainActivity.java 파일에 onCreate() 메서드에 어댑터 클래스 추가
- Fragment와 FragmentManager 클래스는 androidx.fragment.app 패키지를 import

 

MainActivity.java 파일에

 

 

내부클래스로 Adapter 추가

package com.togapp.pager;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

    // MyPagerAdapter 클래스는 내부클래스로 만들어졌고 FragmentStatePagerAdapter를 상속함
    // Adapter는 뷰페이저에 보여줄 프래그먼트를 관리하는 역할
    class MyPagerAdapter extends FragmentStatePagerAdapter {
        // 프래그먼트를 담아둘 ArrayList<>
        ArrayList<Fragment> items = new ArrayList<Fragment>();

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

        // 프래그먼트를 담아둘 ArrayList에 addItem() 메서드를 통해서 프래그먼트 추가
        public void addItem(Fragment item){
            items.add(item);
        }

        // 프래그먼트를 가져갈 수 있는 getItem()
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return items.get(position);
        }

        // getCount() 메서드로 프래그먼트 갯수 확인
        @Override
        public int getCount() {
            return items.size();
        }
    }
}

 

getCount() 메서드로 프래그먼트가 들어있는지 확인하고

화면의 상태에 때라 해당하는 프래그먼트를 꺼내어 보여주는 코드 추가

 

package com.togapp.pager;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ViewPager pager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // xml 에서 viewpager의 객체를 찾아서 참조
        pager = findViewById(R.id.pager);
        // 미리 로딩해둘 아이템의 개수를 3개로 늘리는 작업
        // ViewPager는 아이템 중 몇 개를 미리 로딩해서 좌우 스크롤할 때 빠르게 보여줄 수 있다
        // 처음에는 3보다 작게 설정되어 있어서 미리 늘렸다
        pager.setOffscreenPageLimit(3);
        
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();
        
        adapter.addItem(fragment1);
        adapter.addItem(fragment2);
        adapter.addItem(fragment3);
    }

    // MyPagerAdapter 클래스는 내부클래스로 만들어졌고 FragmentStatePagerAdapter를 상속함
    // Adapter는 뷰페이저에 보여줄 프래그먼트를 관리하는 역할
    class MyPagerAdapter extends FragmentStatePagerAdapter {
        // 프래그먼트를 담아둘 ArrayList<>
        ArrayList<Fragment> items = new ArrayList<Fragment>();

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

        // 프래그먼트를 담아둘 ArrayList에 addItem() 메서드를 통해서 프래그먼트 추가
        public void addItem(Fragment item){
            items.add(item);
        }

        // 프래그먼트를 가져갈 수 있는 getItem()
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return items.get(position);
        }

        // getCount() 메서드로 프래그먼트 갯수 확인
        @Override
        public int getCount() {
            return items.size();
        }
    }
}

 

 

 

---

ViewPager는 사라진거같다 ViewPager2를 써야한다

자세한 내용은 developer.android.com/training/animation/vp2-migration?hl=ko

ViewPager에서 ViewPager2로 이전  |  Android 개발자  |  Android Developers

 

책에 나와있지 않아서 많은게 변경됐지만 책에서 하고자 시키는대로 작성해봤다

 

 

1. ViewPager는 ViewPager2로 변경되었다

FragmentStatePagerAdapter는

FragmentStateAdapter 로 변경되었다고 한다

 

2. FragmentStateAdapter 추상 클래스를 확장하는 클래스를 만들고 

 

3. createFragment() 메서드를 구현하여

 

4. 페이저 어댑터는 어댑터에서 만들 페이지 수(예제에서는 5개)를 반환하는 getItemCount() 메서드도 구현해야 합니다.

 

5. FragmentStateAdapter를 ViewPager2 객체에 연결합니다.

 

---

 

1. SamplePager2 프로젝트 생성
- 패키지 이름 변경 ~~. pager
- 최상위 레이아웃 LinearLayout / orientation 속성 vertical  변경

- 버튼 추가
- 텍스트 제거 Containers 폴더안에 ViewPager2 / layout_width, layout_height 속성 match_parent / 뷰페이저 id pager로 설정

2. SampleTab 예제의 프래그먼트파일 fragment1, fragment2, fragment3 파일 xml와 java 파일 복사 또는 새로 만들기

- 나는 프래그먼트파일 3개 새로만듬

 

package com.togapp.pager2;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ViewPager2 pager;
    // pager의 로딩 개수를 3개로 늘리는작업 (이렇게 안써도됨) Adapter 안에 getItemCount()에 return 값으로 줘도됨
    private static final  int NUM_PAGER = 3;
    private FragmentStateAdapter pagerAdapter;

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

        // xml 파일의 viewpager2 객체 찾아서 참조
        pager = findViewById(R.id.pager);
        // Adapter 인스턴스 생성
        pagerAdapter = new MyPagerAdapter(this);
        // setAdapter() 호출하면 어댑터 객체가 설정되고 뷰페이저는 어댑터에 있는 프래그먼트들을 화면에 보여줄수있다 
        pager.setAdapter(pagerAdapter);

    }

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

        public MyPagerAdapter (FragmentActivity fa){
            super(fa);
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            Fragment1 fragment1 = new Fragment1();
            Fragment2 fragment2 = new Fragment2();
            Fragment3 fragment3 = new Fragment3();
            items.add(fragment1);
            items.add(fragment2);
            items.add(fragment3);
            return  items.get(position);
        }

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

}

 

 

 

2. setCurrentItem() 메서드로 뷰페이저 이동하기

손가락을 이용해 뷰페이저의 화면을 전환하는거 외에

코드에서 전환을 하게 하려면 setCurrentItem() 메서드를 사용한다

 

package com.togapp.pager2;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ViewPager2 pager;
    private static final  int NUM_PAGER = 3;
    private FragmentStateAdapter pagerAdapter;


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


        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(0);
            }
        });
        Button button2 = findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(1);
            }
        });
        Button button3 = findViewById(R.id.button3);
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(2);
            }
        });
        
        
        //////생략

 

 

3. 책에서 PagerTitleStrip을 소개해주지만 ViewPager2에서는 사용이 불가능한거 같다.

 

 

4. 코드 전문

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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="첫번째 화면보여주기" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="두번째 화면보여주기" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="세번째 화면보여주기" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


    </androidx.viewpager2.widget.ViewPager2>

</LinearLayout>

 

java

package com.togapp.pager2;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import java.util.ArrayList;

import static com.togapp.pager2.R.id.button;

public class MainActivity extends AppCompatActivity {

    ViewPager2 pager;
    // pager의 로딩 개수를 3개로 늘리는작업 (이렇게 안써도됨) Adapter 안에 getItemCount()에 return 값으로 줘도됨
    private static final  int NUM_PAGER = 3;
    private FragmentStateAdapter pagerAdapter;


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

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(0);
            }
        });
        Button button2 = findViewById(R.id.button2);
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(1);
            }
        });
        Button button3 = findViewById(R.id.button3);
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                pager.setCurrentItem(2);
            }
        });

        // xml 파일의 viewpager2 객체 찾아서 참조
        pager = findViewById(R.id.pager);
        // Adapter 인스턴스 생성
        pagerAdapter = new MyPagerAdapter(this);
        // setAdapter() 호출하면 어댑터 객체가 설정되고 뷰페이저는 어댑터에 있는 프래그먼트들을 화면에 보여줄수있다
        pager.setAdapter(pagerAdapter);

    }

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

        public MyPagerAdapter (FragmentActivity fa){
            super(fa);
        }

        @NonNull
        @Override
        public Fragment createFragment(int position) {
            Fragment1 fragment1 = new Fragment1();
            Fragment2 fragment2 = new Fragment2();
            Fragment3 fragment3 = new Fragment3();
            items.add(fragment1);
            items.add(fragment2);
            items.add(fragment3);
            return  items.get(position);
        }

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

    }

}