[TIL] #40 viewPager

Yeon·2023년 9월 15일

Android Studio android kotlin

내일배움캠프 - Kotlin

목록 보기

53/58

1. viewPager?

안드로이드 앱의 화면을 여러 개의 페이지로 나누고, 사용자가 이 페이지들을 좌우로 스와이프하면서 볼 수 있게 해주는 위젯
주로 이미지 갤러리, 화면 슬라이드쇼, 워크스룸, 탭 레이아웃, 메뉴 및 탭 간의 전환 등 다양한 용도로 사용
기존에 있던 viewPager는 사용 방법이 복잡하고 까다로웠다고 들었는데, 2019년 구글이 viewPager2를 발표하면서 조금 쉬워졌다고 한다!

2. Features

1) 화면 슬라이딩

ViewPager는 여러 페이지 사이를 스와이프하여 전환할 수 있도록 제공!

2) 탭 표시

ViewPager는 각 페이지에 대한 탭을 표시하고, 사용자가 탭을 터치하면 해당 페이지로 이동함

3) 다양한 어댑터 사용

ViewPager를 사용하면 어댑터를 통해 페이지의 데이터 및 뷰를 동적으로 로드하고 표시할 수 있음

3. Advantages

1) 사용자 경험 향상

ViewPager는 사용자에게 편리한 슬라이드 기능을 제공하여 앱의 사용자 경험을 향상시킴

2) 콘텐츠 관리 용이성

다양한 종류의 콘텐츠를 페이지로 표시할 수 있으므로 앱에서 다양한 정보를 구조적으로 관리하기 용이함

3) 탭과의 통합

ViewPager와 함께 TabLayout을 사용하면 탭 간의 전환을 더욱 편리하게 관리할 수 있음

4. Example

간단하게 이미지 슬라이드를 만들어보려고 함!

1) build.gradle.kts

ViewPager를 사용하기 위해서는 dependencies에 아래 코드를 추가해줘야 함

implementation ("androidx.viewpager2:viewpager2:1.0.0")

2) activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

3) item_image.xml

이미지 표시를 위한 레이아웃

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

4) MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var viewPager: ViewPager2
    private val images = listOf(
        R.drawable.image1,
        R.drawable.image2,
        R.drawable.image3
    )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPager = findViewById(R.id.viewPager)
        val adapter = ImageAdapter(images)
        viewPager.adapter = adapter
    }
}

5) ImageAdapter.kt

ViewPager에서 이미지를 표시하는 데 사용할 어댑터

class ImageAdapter(private val images: List<Int>) : RecyclerView.Adapter<ImageAdapter.ImageViewHolder>() {

    inner class ImageViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageView)
    }

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

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

    override fun getItemCount(): Int {
        return images.size
    }
}