Fragment View Pager 간단하게 구현하기

이번 포스트는 Android에서 커스텀 Fragment Pager Adapter를 활용하여 간단하게 Fragment View Pager를 구현해보도록 하겠습니다. RecyclerView나 ListView보다 더 간단한 코드를 통해 Fragment View Pager를 구현할 수 있습니다.

 

1. XML Layout 구성하기

 

우선 Activity에 ViewPager를 추가해줍니다. (사이즈는 Max로 해주셔도 되고 본인취향입니다.)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">
    
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager_start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    </androidx.viewpager.widget.ViewPager>
    
</RelativeLayout>

간단하게 ViewPager를 match_parent, match_parent로 하여 레이아웃을 구성해보았습니다.

 

이제 ViewPager에 추가해 볼 Fragment Layout를 짜보도록 하겠습니다. 레이아웃은 간단하게 구성합니다.

 

fragment_start_1.xml

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="STEP.01"
            android:textColor="#b38e00"
            android:textSize="18sp"
            android:textStyle="bold" />

</RelativeLayout>

 

fragment_start_2.xml

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="STEP.02"
            android:textColor="#b38e00"
            android:textSize="18sp"
            android:textStyle="bold" />

</RelativeLayout>

 

fragment_start_3.xml

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:text="STEP.03"
            android:textColor="#b38e00"
            android:textSize="18sp"
            android:textStyle="bold" />

</RelativeLayout>

 

2. Adapter 구현하기

그 다음에는 Activity에 추가해야겠죠?

그 전에 Adapter를 먼저 구현하도록 합시다.

class StartAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {
    private val context: Context? = null
    private val mFragmentList = ArrayList<Fragment>()

    val count: Int
        get() = mFragmentList.size

    fun addFragment(fragment: Fragment) {
        mFragmentList.add(fragment)
    }

    fun getItem(position: Int): Fragment {
        return mFragmentList.get(position)
    }
}

getItem메소드와 count는 FragmentPagerAdapter에 기본적으로 제공하는 기능이며 추가적으로 여러 개의 Fragment를 추가할 수 있도록 addFragment메소드를 구현하였습니다. ArrayList에 Fragment를 추가하여 여러 개의 Fragment를 ViewPager에 적용될 수 있습니다.

getItem메소드를 Fragment를 리턴하는 메소드입니다.

 

3. Activity에 추가하기

자 이제, Adapter를 구현하였으니 Activity에 Adapter를 넣어볼까요?

아래 처럼 따라해보세요.

class StartActivity : AppCompatActivity() {
    @BindView(R.id.viewpager_start)
    internal var startViewPager: ViewPager? = null

    internal var pagerAdapter = StartAdapter(getSupportFragmentManager())

    protected fun onCreate(savedInstanceState: Bundle) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_start)
        ButterKnife.bind(this)

        setupViewPager(startViewPager!!)
        startViewPager!!.addOnPageChangeListener(object : ViewPager.OnPageChangeListener() {
            fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {

            }

            fun onPageSelected(position: Int) {

            }

            fun onPageScrollStateChanged(state: Int) {}
        })
    }

    fun setupViewPager(viewPager: ViewPager) {
        pagerAdapter.addFragment(StepFirstFragment())
        pagerAdapter.addFragment(StepSecondFragment())
        pagerAdapter.addFragment(StepThirdFragment())
        viewPager.setAdapter(pagerAdapter)
    }
}

정말 간단하게 할 수 있죠? 실행해보면 ViewPager가 잘 동작하는 것을 알 수 있습니다.