[안드로이드] 뷰페이저(ViewPager)_좌우 스크롤하기

뷰페이저(ViewPager)

: 좌우 스크롤을 통해 다음 화면으로 전환되는 화면 슬라이드

뷰페이지는,

프래그먼트 여러개가 리스트뷰(ListView)처럼 선택할 수 있는 형태

   = 어댑터(adapter) 패턴을 사용함

-> 뷰페이저는 뷰를 보여주는 껍데기
     실제 데이터 관리는 어댑터(adapter)가 함

---

[뷰페이저(ViewPager) 사용법]

1. activity_main.xml에 <ViewPager> 추가

<최상위 Layout>
	...
	<androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    ...
</최상위 Layout>

---

2. 뷰페이저(ViewPager)에 들어갈 프래그먼트(Fragment) 구성

: 프래그먼트(Fragment)는 xml파일과 java파일 한 쌍으로 구성되어 있다

   1) xml 파일 만들기

        : res -> layout 우클릭 -> New -> Layout resource file 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/cardview_dark_background">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="페이지1"
        android:textSize="40dp"
        android:textColor="@color/white"/>

</LinearLayout>

 

 

   2) java 파일 만들기   

      : java -> com.example.프로젝트이름 우클릭 -> New -> Java Cass

     1. Fragment 상속

     2. onCreateView 오버라이드해서 xml파일 inflate 하기

   

package com.example.myviewpager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment1,container,false);
        return rootView;
    }
}

---

3. 어댑터(Adapter) 코드 작성

   1) FragmentStatePagerAdapter를 상속받는 PagerAdapter 클래스 만들기

   2) 아이템(여기서는 프래그먼트들)을 관리할 ArrayList 정의

   3) 생성자, 필수 메소드 구현

   4) 아이템을 추가할 때 사용할 메소드(addItem) 구현

class PagerAdapter extends FragmentStatePagerAdapter{
        //아이템을 관리할 리스트
        ArrayList<Fragment> items = new ArrayList<>();

        //기본 생성자
        public PagerAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

        //아이템 추가하는 메소드
        public void addItem(Fragment item){
            items.add(item);
        }

        //인덱스 값이 position인 아이템을 리턴하는 메소드
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return items.get(position);
        }

        //items 수를 리턴하는 메소드
        @Override
        public int getCount() {
            return items.size();
        }
    }

---

4. xml에 구현한 ViewPager에 Adapter 연결

   1) Fragment1,2,3 정의

//Fragment 정의
Fragment1 fragment1 = new Fragment1();
Fragment2 fragment2 = new Fragment2();
Fragment3 fragment3 = new Fragment3();

 

   2) PagerAdapter 정의

//PagerAdapter 정의
PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());

 

 

   3) adapter에 아이템 추가 - addItem()

//adpater에 아이템 추가
adapter.addItem(fragment1);
adapter.addItem(fragment2);
adapter.addItem(fragment3);

   

 

   4) ViewPager에 adater 연결 - setAdatper()

//ViewPager에 Adapter 연결
pager.setAdapter(adapter);

---

#최종 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="부분 화면을\n 만들기 위한 텍스트"
        android:textSize="30dp" />

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

</LinearLayout>

 

 

#최종 MainActivity.java

package com.example.myviewpager;

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 android.view.View;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        //현재 페이지의 양쪽에 지속될 페이지 수 세팅
        pager.setOffscreenPageLimit(3);

        //Fragment 정의
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();

        //PagerAdapter 정의
        PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager());

        //adpater에 아이템 추가
        adapter.addItem(fragment1);
        adapter.addItem(fragment2);
        adapter.addItem(fragment3);

        //ViewPager에 Adapter 연결
        pager.setAdapter(adapter);
    }

    class PagerAdapter extends FragmentStatePagerAdapter {
        //아이템을 관리할 리스트
        ArrayList<Fragment> items = new ArrayList<>();

        //기본 생성자
        public PagerAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

        //아이템 추가하는 메소드
        public void addItem(Fragment item){
            items.add(item);
        }

        //인덱스 값이 position인 아이템을 리턴하는 메소드
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return items.get(position);
        }

        //items 수를 리턴하는 메소드
        @Override
        public int getCount() {
            return items.size();
        }
    }
}

 

 

#최종 fragment1,2,3.xml

*1,2,3에 따라 text와 background 변경해주기

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/cardview_dark_background">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="페이지1"
        android:textSize="40dp"
        android:textColor="@color/white"/>

</LinearLayout>

 

 

#최종 Fragment1,2,3.java

*1,2,3에 따라 inflate 하는 layout파일 변경해주기

package com.example.myviewpager;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment1,container,false);
        return rootView;
    }
}

 

 

#실행화면

 

 

---

[참고]

https://www.boostcourse.org/mo316/lecture/259208?isDesc=false

안드로이드 앱 프로그래밍

https://developer.android.com/reference/kotlin/androidx/viewpager/widget/ViewPager

ViewPager  |  Android Developers