Android - ViewPager2 / TabLayout

# ViewPager2

- 화면 슬라이드 기능 구현 시 사용

- 다양한 페이지 전환을 제공

- Fragment, View 등 다양한 페이지 간 전환 제공

- View 사용 시 => RecyclerView.Adapter(View)

- Fragment 사용 시 => FragmentStateAdapter(Fragment)

 

# TabLayout

- 상단에 탭을 표시하고 각 탬을 누를 때 ViewPager2의 페이지를 전환할 수 있는 인터페이스 제공

 

# 사용방법

1) gradle에 추가

implementation 'androidx.viewpager2:viewpager2:x.x.x'  //x.x.x 최신 버전
implementation 'com.google.android.material:material:x.x.x'  //x.x.x 최신 버전

 

2-1) View용 Adapter 생성

class ImagePagerAdapter(
    private val images: List<Int> // 이미지 리소스 ID 리스트
) : RecyclerView.Adapter<ImagePagerAdapter.ImageViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ImageViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_image, parent, false)
        return ImageViewHolder(view)
    }

    override fun onBindViewHolder(holder: ImageViewHolder, position: Int) {
        holder.imageView.setImageResource(images[position])
    }

    override fun getItemCount(): Int = images.size
    
    inner class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageView)
    }

}

 

2-2) Fragment용 Adapter 생성

class ViewPagerAdapter(activity: AppCompatActivity) : FragmentStateAdapter(activity) {
    override fun getItemCount() = 3
    override fun createFragment(position: Int) = when (position) {
        0 -> HomeFragment()
        1 -> SearchFragment()
        2 -> SettingFragment()
        else -> throw IllegalStateException("Invalid position: $position")
    }
}

 

3) ViewPager2, TabLayout 연결

with(binding) {
    viewPager.adapter = ViewPagerAdapter(this@MainActivity)
    TabLayoutMediator(tabLayout, viewPager) { tab, position ->
        tab.text = getString(tabTitles[position])
    }.attach()
}