[Android, ViewPager] 프래그먼트 뷰페이저 만들기

안녕하세요. 블랙진입니다.

뷰페이저는 아래 보이는 이미지와 같이 좌우 드래그를 통해 화면이 변하는 뷰입니다. 

다양한 방법으로 뷰페이저를 만들 수 있지만 이번에는 Fragment 를 사용한 뷰페이저를 만들어 보겠습니다.

1. MainAcitivty 에서 viewPager 에 adapter 를 설정합니다.

class MainActivity : AppCompatActivity() {

    private val adapter by lazy { MainAdapter(supportFragmentManager) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        vpMainActivity.adapter = MainActivity@adapter

    }
    
}

저는 코틀린 익스텐션을 사용하기 때문에 별다른 변수 선언 없이 xml 에서 viewPager 변수를 바로 가져와 사용할 수 있습니다.

(vpMainActivity 는 viewpager 의 id 값입니다.)

- activity main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/vpMainActivity"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

2. ViewPager 에 띄울 Fragment 를 선언합니다. (저는 5개의 A ~ D Fragment 를 만들었습니다.)

여기서 Fragment 는 아래를 상속할 수 있도록 합니다.

import android.support.v4.app.Fragment

class AFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment_main, container, false)
    }

    override fun onActivityCreated(savedInstanceState: Bundle?) {
        super.onActivityCreated(savedInstanceState)

        //뷰 설정
        tvFragmentMain.text = "A Fragment"

    }

}

참고) A ~ D Fragment 모두 동일한 Xml 을 사용하고 textView 통해 구분 합니다. (각 각 따로 xml 을 만드셔도 됩니다.)

- fragment_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tvFragmentMain"
        android:textSize="20dp"
        android:textStyle="bold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

3. 마지막으로 MainAdapter 을 만들면 5개의 화면으로 구성된 ViewPager 가 완성됩니다.

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager

class MainAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

    override fun getItem(position: Int): Fragment? {

        return when(position) {

            0       ->  AFragment()

            1       ->  BFragment()

            2       ->  CFragment()

            3       ->  DFragment()

            4       ->  EFragment()

            else    ->  null
        }

    }

    // 생성 할 Fragment 의 개수
    override fun getCount() = 5

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        super.destroyItem(container, position, `object`)
        //Log.e("FragmentPagerAdapter", "destroyItem position : $position")
    }

}

이번 예제에서는 MainAdapter 에서 FragmentStatePagerAdapter 을 상속해서 만들었습니다.

MyViewPager 완성코드

하지만! FragmentPagerAdapter 를 상속하여 뷰페이저를 만들 수 있습니다. 이 둘의 차이에 대해 궁금하실 수도 있을 것 같아 따로 포스팅을 준비했으니 본인의 프로젝트에 맞는 뷰페이저를 만들어 멋지게 코딩하시기 바랍니다.~!~!

FragmentStatePagerAdapter 와 FragmentPagerAdapter 의 차이

연관 포스팅)

뷰페이저에 인디케이터 달기

탭 레이아웃을 사용해보자!

번외) setOffScreenPageLimit 에 대한 탐구

setOffScreenPageLimit 를 변경한 MainAcitivty 의 모습

class MainActivity : AppCompatActivity() {

    private val adapter by lazy { MainAdapter(supportFragmentManager) }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        vpMainActivity.adapter = MainActivity@adapter
        vpMainActivity.offscreenPageLimit = 2

    }
    

위에서 설명 했을 때 뷰페이저는 좌우 1개의 화면 미리 생성하고 그 이외의 화면은 제거합니다.

따라서 setOffScreenPageLimit의 default 값은 1이 되는데요. 이 값을 2로 설정하면 좌우 2개의 화면을 미리 생성하게 됩니다.

색칠한 화면이 현재 보고 있는 화면 입니다.

A - B - C            /  초기 우측 B, C 화면 생성

A - B - C - D       /  B 로 스와이프하면 D가 생성

B - C - D - E       /  D 로 스와이프하면 A는 제거 됨(위 예제는 화면이 5개 까지 이므로 생성 x, 만약 화면이 더 많으면 6번 화면이 생성됨)

C -D -E              /  마지막으로 E로 스와이프하면 B는 제거된다. 우측에는 생성할 뷰가 없고 좌측으로는 2개의 뷰가 남게된다.