쏭식
Ssongcode;
쏭식
전체 방문자
오늘
어제
  • 분류 전체보기 (106)
    • JAVA (21)
      • Basic (21)
    • Kotlin (14)
      • Basic (14)
    • Android (64)
      • Basic (24)
      • JETPACK (30)
      • Compose (8)
      • 파고들기 (2)
    • Project (4)
    • etc (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • ViewModel
  • Kotlin
  • 상속
  • 코딩테스트
  • 프로젝트회고
  • 객체지향
  • AAC
  • mvvm
  • 메소드
  • workmanager
  • DataBinding
  • Room
  • 알고리즘
  • Android
  • 백준
  • 자바
  • 기초100제
  • 코드업100제
  • livedata
  • 리사이클러뷰
  • 코틀린
  • Jetpack
  • 배열
  • 변수
  • 자료구조
  • 코테
  • 컴포즈
  • compose
  • Adapter
  • 코틀린코테

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
쏭식

Ssongcode;

[Android] ViewPager를 이용한 TabLayout
Android/Basic

[Android] ViewPager를 이용한 TabLayout

2022. 4. 20. 23:59

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은 앱개발하면서 유용한 위젯이니만큼 익숙해져야겠다!!

 

저작자표시 (새창열림)

'Android > Basic' 카테고리의 다른 글

[Android] PNG vs SVG 어떤 것이 정답일까?  (0) 2022.04.22
[Android] width, height 0dp로 설정하기  (0) 2022.04.21
[Android] ViewPager 로 Banner 구현  (0) 2022.04.19
[Android] JetPack Navigation으로 Bottom Navigation 설정하기  (0) 2022.04.18
[Android] BottomNavigation  (0) 2022.04.17
    'Android/Basic' 카테고리의 다른 글
    • [Android] PNG vs SVG 어떤 것이 정답일까?
    • [Android] width, height 0dp로 설정하기
    • [Android] ViewPager 로 Banner 구현
    • [Android] JetPack Navigation으로 Bottom Navigation 설정하기
    쏭식
    쏭식

    티스토리툴바