[Kotlin] TabLayout, ViewPager in Fragment inside Fragment

# 배경

프레그먼트 안에 ChildFragment로 구성된 TabLayout을 구성

 

프레그먼트 안에 프레그먼트를 생성하여 TabLayout을 만들되 ViewPager를 통해서 화면을 전환

 

 

 

# 문제상황

ViewPager, TabLayout 초기화 부분에서 코틀린 문법 상 실수가 많았음 차후 같은 문제가 발생했을 때 하단의 방법을 통해서 해결하도록 정리

 

 

 

# 방법

1. Parent Fragment Layout 수정

# parent_fragment_layout.xml

<LinearLayout...>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            android:paddingBottom="8dp"
            app:tabMode="fixed"
            app:tabPaddingTop="15dp" />

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

 

 

2. Adapter 추가

class DetailPagerAdapter(manager: FragmentManager): FragmentPagerAdapter(manager){

    var fragmentList: MutableList<Fragment> = arrayListOf()
    var titleList: MutableList<String> = arrayListOf()

    override fun getItem(position: Int): Fragment {
         return fragmentList[position]
    }

    override fun getCount(): Int {
         return fragmentList.size
    }

    override fun getPageTitle(position: Int): CharSequence? {
        return titleList[position]
    }


    fun addFragment(fragment: Fragment, title: String){
        fragmentList.add(fragment)
        titleList.add(title)
    }
}

 

 

3. 자식 Fragment 생성

 

  ▶ TapLayout의 화면으로 쓸 Fragment들을 생성함

 

 

 

4. 부모 Fragment.kt 수정

import ...

class ParentFragment : Fragment() {

    lateinit var myFragment: View
    lateinit var viewPagers: ViewPager
    lateinit var tabLayouts: TabLayout

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
        }
    }

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

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

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

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

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


    private fun setUpViewPager() {
        viewPagers = viewPager
        tabLayouts = tabLayout

        var adapter = DetailPagerAdapter(fragmentManager!!)
        adapter.addFragment(DetailsFragment(), "detail")
        adapter.addFragment(ReviewsFragment(), "review")

        viewPagers!!.adapter = adapter
        tabLayouts!!.setupWithViewPager(viewPagers)
    }

    companion object {
        ...
    }
}

 

 

 

[참고] https://www.youtube.com/watch?v=Wh7zu6_nsfI

[참고] http://www.kotlincodes.com/kotlin/viewpager-in-kotlin-android/

ViewPager In Kotlin Android - Kotlin Codes

 

[참고] https://kumgo1d.tistory.com/19

[참고] http://blog.naver.com/PostView.nhn?blogId=cosmosjs&logNo=221284849382&categoryNo=0&parentCategoryNo=56