[안드로이드 - 코틀린] TabLayout & ViewPager & Fragment 활용하기

MainActivity

 

xml에 있는 위젯들 선언

그리고 viewPager2 어댑터를 만들어준다 

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

    val viewPager2 : ViewPager2 = findViewById(R.id.viewpager2)
    val tabLayout : TabLayout = findViewById(R.id.tabLayout)


    viewPager2.apply {
        adapter = MyPageradapter(context as FragmentActivity)
    }

 

TabLayout

텝 레이아웃 이름 설정 

tabLaout 과 viewPager2를 불러서 결합 시킨다 

TabLayoutMediator(tabLayout, viewPager2) {tab, position ->
    when (position){
        0 -> {
            tab.text = "홈"
        }
        1 -> {
            tab.text = "동행 페이지"
        }
        2 -> {
            tab.text = "방명록"
        }
        3 -> {
            tab.text = "여행일지"
        }
        4 -> {
            tab.text = "마이 페이지"
        }
    }
}.attach()

 

Activity_main_xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">


    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Monday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tuesday" />

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wednesday" />
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/tabLayout"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </androidx.viewpager2.widget.ViewPager2>

</androidx.constraintlayout.widget.ConstraintLayout>

 

이제는 Fragment들을 New -> Fragment -> Blank를 이용해 필요한 개수만큼 생성한다

 

MyPagerAdapter

이쪽 페이지에서는 프레그먼트호출과 개수를 결정한다

여기서 TabLayout 

class MyPageradapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
    private val NUM_PAGES = 5

    override fun getItemCount(): Int = NUM_PAGES

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            0 -> MainFragment()
            1 -> WithFragment()
            2 -> GuestBookFragment()
            3 -> TrapFragment()
            else -> MyPageFragment()
        }
    }
}