[Android] ViewPager를 이용한 TabLayout

TabLayout

클릭하여 프래그먼트를 이동시킬 수 있는 TabLayout을 ViewPager로 연결하여

슬라이드로 넘기는 형태로도 프래그먼트를 이동시킬 수 있다!!

 

앨범 프래그먼트에서 먼저 TabLayout의 자리와 ViewPager2의 자리를 먼저 잡아주자.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/album_content_tb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorFullWidth="false"
    app:tabSelectedTextColor="#3f3fff"
    app:tabIndicatorColor="#3f3fff"
    app:tabRippleColor="#00ff0000"
    app:layout_constraintEnd_toEndOf="@id/album_album_iv"
    app:layout_constraintStart_toStartOf="@id/album_album_iv"
    app:layout_constraintTop_toBottomOf="@id/album_album_iv" />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/album_content_vp"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintTop_toBottomOf="@+id/album_content_tb"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

TabLayout과 ViewPager의 자리

이렇게 위와 같은 형태로 자리를 잡아 주었으면 

전 게시물 처럼 어댑터클래스를 만들어주어야한다.

앨범프래그먼트와 각각의 프래그먼트(수록곡, 상세정보, 영상)들을 연결해줄 AlbumVPAapter클래스를 생성해준다.

class AlbumVPAdapter(fragment : Fragment) : FragmentStateAdapter(fragment) {
    override fun getItemCount(): Int {
        return 3   //3개의 프래그먼트가 있기 때문에
    }

    override fun createFragment(position: Int): Fragment {
        return when(position){
            0 -> SongFragment()
            1 -> DetailFragment()
            else -> VideoFragment()
        }
    }
}

배너프래그먼트를 연결했던 것은 사진이 여러 개가 될 수도 있으니 list로 받았으나,

여기서는 프래그먼트의 갯수가 정해져있기 때문에 따로 리스트로 정하지 않고, return 3을 해주었다.

 

또한 position이 0, 1, 2일 때 각각의 프래그먼트를 반환하는 메소드까지 작성해주었다.

이제 앨범프래그먼트에서 어댑터클래스를 통해 3개의 프래그먼트와 연결해주고,

TabLayoutMediator를 통해 TabLayout과 ViewPager2하고 연결해주면 끝!!

private val information = arrayListOf("수록곡", "상세정보", "영상"  )

val albumAdapter = AlbumVPAdapter(this)
binding.albumContentVp.adapter = albumAdapter
TabLayoutMediator(binding.albumContentTb, binding.albumContentVp){
   tab, position ->
    tab.text = information[position]
}.attach() //중재자 뷰페이저하고 연결하는 중재자

 

프래그먼트들을 연결할 때 어댑터클래스를 사용하는게 아직은 좀 어렵다...........

하지만 ViewPager와 TabLayout은 앱개발하면서 유용한 위젯이니만큼 익숙해져야겠다!!