Android - TabLayout 사용해서 Fragment 전환

 

 

그냥 버튼 형식으로 만들기

 

ScrollView로 버튼을 생성해서 만들어 주는 경우를 해봤다. 내가 봐도 비효율적이다.

적게 있으면 몰라도 Fragment가 많아진다면 하나하나 지정해서 넘겨줘야한다.

이렇게는 아무도 안쓸 것 같아서 기존 유명한 앱들을 찾아봤다.

Layout

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <HorizontalScrollView
        android:id="@+id/scrollView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/goHome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="홈" />

            <Button
                android:id="@+id/goMap"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="지도" />

            <Button
                android:id="@+id/goAuth"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="로그인" />

            <Button
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="1" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="3" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="4" />

        </LinearLayout>
    </HorizontalScrollView>

    <FrameLayout
        android:id="@+id/fragmentContainer"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/scrollView"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity.kt

        ...
        
        binding.goHome.setOnClickListener {
            supportFragmentManager.beginTransaction().apply {
                replace(R.id.fragmentContainer,HomeFragment())
                commit()
            }
        }
        binding.goAuth.setOnClickListener {
            supportFragmentManager.beginTransaction().apply {
                replace(R.id.fragmentContainer,AuthFragment())
                commit()
            }
        }
        binding.goMap.setOnClickListener {
            supportFragmentManager.beginTransaction().apply {
                replace(R.id.fragmentContainer,MapFragment())
                commit()
            }
        }
        
        
        ...

 

네이버 웹툰의 경우 위에 월~금을 누르거나 넘겨서 페이지를 전환하는 방식이다.

TabLayout이라는 것을 찾았다. Fragment를 옆으로 넘기면서 사용전환하는 느낌을 주고 위에 Tab을 눌러 이동도 가능하다.

 

TabLayout과 ViewPager2를 사용하여 만들어보자

 

일단 ViewPager 자체는 리사이클러뷰로 이루어져 있다. adapter을 사용해야한다.

 

ViewPagerAdapter(.kt)라는 adapter을 생성해줬다.

이 adapter는 FragementStateAdapter을 상속받는다.

빨간 줄이 뜨는데 필수로 override해야하는 것들이 있기 때문이다.

 

일단 3개의 Fragment만 사용할 것이기 때문에 count는 3개를 리턴하고 createFragment는 when문을 사용한다.

class ViewPagerAdapter(private val mainActivity: MainActivity): FragmentStateAdapter(mainActivity) {
    override fun getItemCount(): Int {
        return 3
    }

    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 -> {
                return HomeFragment()
            }
            1 -> {
                return MapFragment()
            }
            else -> {
                return AuthFragment()
            }
        }
    }

}

 

MainActivity로 넘어와서 viewPager에 adapter을 연결해야한다.

binding.viewPager2.adapter = ViewPagerAdapter(this)

 

이제 TabLayout과 viewPager를 연결해주면 끝난다.

TabLayoutMediator(binding.tabLayout, binding.viewPager2){ tab, position ->
	run{
		tab.text = "$position"
	}
}.attach() //tab과 viewpager 결합

 

 

 

 

 

 

 

 

ref

TabLayout 사용법