우리는 앱에서 많은 탭들을 사용하는데 오늘은 안드로이드에서 탭 레이아웃을 만드는법을 공부했다. 안드로이드 앱에서 탭을 만드려면 Tablayout을 사용해야 한다.

TabLayout과 Pager그리고 Adapter

• tablayout은 말 그래도 탭을 만들어주는 레이아웃이다.
• pager는 탭을 누르지 않고도 탭을 전환시킬수 있도록 도와주는 도구이다.
• Adapter는 tablayout과 pager를 이어주는 도구이다.

Gradle Setting

앱 수준에서 아래의 implementation을 추가한다.

implementation 'com.google.android.material:material:1.1.0'

xml 세팅

Tablayout과 ViewPager를 LinearLayout안에 넣어준다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".TablayoutActivity">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />


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

</LinearLayout>

Adapter 생성

class FragmentPagerAdapter(
    fragmentManager: FragmentManager,
    val tabCount: Int
) : FragmentStatePagerAdapter(fragmentManager) {
    override fun getItem(position: Int): Fragment {
        when (position) {
            0 -> {
                return Fragment1()
            }
            1 -> {
                return Fragment2()
            }
            2 -> {
                return Fragment3()
            }
            else -> return Fragment1()
        }

    }

    override fun getCount(): Int {
        return tabCount
    }
}

Activity 세팅

class TablayoutActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_tablayout)
		
        // 이 부분이 tablayout의 탭 수와 이름을 정할 수 있다.
        tab_layout.addTab(tab_layout.newTab().setText("ONE"))
        tab_layout.addTab(tab_layout.newTab().setText("TWO"))
        tab_layout.addTab(tab_layout.newTab().setText("THREE"))

        val pagerAdapter = FragmentPagerAdapter(supportFragmentManager, 3)
        view_pager.adapter = pagerAdapter

        tab_layout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(tab: TabLayout.Tab?) {
            }

            override fun onTabUnselected(tab: TabLayout.Tab?) {
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                view_pager.setCurrentItem(tab!!.position)
            }
        })

       // -> 페이져가 이동했을때 탭을 이동시키는 코드 view_pager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tab_layout))
        
    }
}

드래그와 탭을 눌러 탭이 전환되게 하는 간단한 레이아웃이 완성됐다!