ViewPager 사용법

ViewPager란?

ViewPager는 좌우 스크롤을 통해 화면을 넘겨볼 수 있는 기능을 제공해준다.

부분 화면 여러 개를 변환하여 보여주기 때문에 Fragment를 사용하여 구현하며,

여러 개 중 하나를 선택하는 형태의 위젯이므로 리스트뷰와 같이 어댑터를 사용하여 데이터를 분배해 주어야 한다.

 

사용법

<?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"
    android:background="@android:color/holo_blue_bright">
    
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Display 1"
        android:textSize="40sp"/>

</LinearLayout>

package com.juhy.myapplication;

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;
    }
}

먼저 ViewPager 안에 들어갈 fragment를 위와 같이 간단한 형태로 3개 만들어주자.

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:textSize="20sp"
        android:textColor="#000000"
        android:layout_margin="10dp"
        android:text="ViewPager Example" />

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

</RelativeLayout>

그리고 activity_main.xml에서 ViewPager를 추가해주자.

부분화면임을 보이기 위해 상단에 TextView를 하나 두었으나 없어도 상관없다.

 

package com.juhy.myapplication;

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

import java.util.ArrayList;

public class MainPagerAdapter extends FragmentStatePagerAdapter {

    ArrayList<Fragment> items = new ArrayList<Fragment>();

    public MainPagerAdapter(@NonNull FragmentManager fm, int behavior) {
        super(fm, behavior);
    }

    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();
    }

}

다음으로 FragmentStatePagerAdapter를 상속받아 어댑터를 만들어주자.

 

먼저 기본적으로 생성자와 getItem(), getCount() 함수는 꼭 설정해주어야 한다.

getItem()과 getCount()는 리스트뷰와 마찬가지로 아이템 수와 위치에 맞는 아이템을 반환하면 된다.

 

그리고 전환될 부분 화면 fragment들을 넘겨받아 arraylist에 넣어줄 addItem() 함수도 만들어주자.

 

package com.juhy.myapplication;

import androidx.fragment.app.FragmentActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

public class MainActivity extends FragmentActivity {

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

        ViewPager pager = findViewById(R.id.pager);
        pager.setOffscreenPageLimit(3); //3개까지 caching

        MainPagerAdapter adapter = new MainPagerAdapter(getSupportFragmentManager(), 1);

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

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

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

        pager.setAdapter(adapter);
    }

}

MainActivity에서는 먼저 fragment를 사용하므로 FragmentActivity를 상속받도록 바꿔준다.

그리고 ViewPager 객체를 불러온 뒤 캐싱할 페이지 수를 지정해주었다.

 

다음으로 만들어준 adapter 클래스를 불러와야 하는데 이 때 FragmentManager와 behavior 값을 넘겨주어야 한다.

behavior 값은 FragmentStatePagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT로 써도 되지만

어차피 상수 1이기 때문에 코드를 줄이기 위해 1을 넣어주었다.

behavior 값에 따른 기능 변화는 아래 공식 문서를 참고하자.

 

https://developer.android.com/reference/androidx/fragment/app/FragmentStatePagerAdapter

FragmentStatePagerAdapter  |  Android 개발자  |  Android Developers

 

마지막으로 만들었던 fragment 객체를 생성해준 뒤 adapter에 넣고 ViewPager에 adapter를 지정하면 된다.

 

실행해보면 좌우로 스크롤 시 정상적으로 fragment가 전환되는 것을 볼 수 있다.

 

 

※ 추가적으로 java 코드를 통해 선택된 fragment를 변경하고 싶다면 setCurrentItem() 메소드를 사용하면 된다.

pager.setCurrentItem(0);

 

 

Reference

[부스트코스]안드로이드 프로그래밍

https://www.edwith.org/boostcourse-android