[Kotlin] ViewPager와 TabLayout

ViewPager

사용자가 화면을 좌우로 넘겨 각 페이지를 볼 수 있게 해주는 안드로이드 레이아웃 관리자 클래스.

- android.support.v4.view.ViewPager

TabLayout과 연결하여 화면 한켠에 고정된 버튼을 통해서도 화면을 넘길 수 있게 한다.

activity_main.xml

<android.support.constraint.ConstraintLayout  ...>

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        .../>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        ... />

</android.support.constraint.ConstraintLayout>

• ViewPager: 화면
• TabLayout: 버튼

content_main.xml

각 페이지에 보여줄 화면 구성.

필자는 배경색이 다른 총 4개의 화면을 생성했다. (+ content_one.xml, content_tow.xml, content_three.xml)

<android.support.constraint.ConstraintLayout 
    ...
    android:background="@android:color/holo_blue_light">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="main"
        ... />
</android.support.constraint.ConstraintLayout>

MainFragment

각 화면과 연결된 Fragment 생성 (+ OneFragment, TowFragment, ThreeFragment)

open class MainFragment: Fragment()
{
    override fun newInstance(): MainFragment
    {
        val args = Bundle()

        val frag = MainFragment()
        frag.arguments = args

        return frag
    }

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

PagerAdapter

ViewPager가 Fragment를 사용하려면 반드시 Adapter가 필요하다.

함께 사용하는 Fragment도  support.v4 지원 라이브러리를 사용할 것을 권장한다.

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

class PagerAdapter(fm: FragmentManager): FragmentPagerAdapter(fm)
{
    val PAGE_MAX_CNT = 4

    override fun getCount(): Int {
        return PAGE_MAX_CNT
    }

    override fun getItem(position: Int): Fragment? {
        val fragment = when(position)
        {
            1 -> OneFragment().newInstance()
            2 -> TowFragment().newInstance()
            3 -> ThreeFragment().newInstance()
            else -> MainFragment().newInstance()
        }
        return fragment
    }

    override fun getPageTitle(position: Int): CharSequence? {
        val title = when(position)
        {
            1 -> "one"
            2 -> "tow"
            3 -> "three"
            else -> "main"
        }
        return title
    }
}

• getCount(int): 총 몇 개의 화면을 구성할 지 지정.
• getItem(int): 순서(position. 0~)에 따른 화면 지정.
• getPageTitle(int): Tab의 제목 지정.

MainActivity

import android.os.Bundle
import android.support.design.widget.TabLayout
import android.support.v4.view.ViewPager
import android.support.v7.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

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

        val pagerAdapter = PagerAdapter(supportFragmentManager)
        val pager = findViewById<ViewPager>(R.id.container)
        pager.adapter = pagerAdapter

        val tab = findViewById<TabLayout>(R.id.tab)
        tab.setupWithViewPager(pager)
    }
}

ViewPager에 FragmentManager를 인스턴스로 얻은 PagerAdapter를 설정한다.

TabLayout과 ViewPager를 setupWithViewPager 함수를 통해 연결한다.

ViewPager

TabLayout