【Android】ViewPager2でスライドショーを実装する【Kotlin】

## やりたいこと
Androidでスライドショーを実装しようと思います。

AndroidXのViewPager2 ウィジェットを使います。

![screenshot-1697356965469.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1175390/a9e6014c-a130-c357-b760-70f33cbbac6d.png)

## 1.下準備
プロジェクトの`build.gradle`ファイルに依存関係を追加しましょう。

1.1.0はベータ版で1.0.0が安定版なので、今回は1.0.0を使用します。

``` :build.gradle
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
```


## 2.レイアウトファイルにviewpagerを設置
スライドショーを表示させたいレイアウトファイルに ViewPager2 を配置しましょう。

```kotlin:main_layout.xml
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

```

## 3.スライド一枚分のレイアウトを作成
各画像を表示するためのカスタムレイアウトを作成します。今回は、ImageViewを含む単純なレイアウト `image_slide.xml`を作成します。

```kotlin:image_slide.xml
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

</LinearLayout>
```


## 4.アダプターの作成
ページャーアダプターを作成します。
`ImageSliderAdapter.kt`ファイルを作成し、以下のように実装します。

```kotlin:ImageSliderAdapter.kt
class ImageSliderAdapter(private val images: List<Int>) : RecyclerView.Adapter<ImageSliderAdapter.ImageSlideViewHolder>() {

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

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

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

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

## 5. アダプターを繋げる
作成したAdapterをActivity上で繋ぎこめば完成です。
```kotlin:MainActivity
val images = listOf(
    R.drawable.job_sample,
    R.drawable.job_sample,
    R.drawable.job_sample,
    R.drawable.job_sample,
    R.drawable.job_sample
)


val imageSliderAdapter = ImageSliderAdapter(images)

val viewPager = view.findViewById(R.id.viewPager)
viewPager.adapter = imageSliderAdapter
```



![screenshot-1697356965469.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1175390/712d000a-b9be-6511-672b-5354287c1292.png)


いかがでしょうか。ぜひ参考にしていただけると幸いです！


## おまけ 
・矢印をつける
・右上に現在のページを表示する

![screenshot-1697356965469のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1175390/76a53082-1954-621b-5e71-7354e1762a92.png)


```kotlin:main_layout.xml
<ImageView
    android:id="@+id/circle_gray_previous"
    android:src="@drawable/icon_arrow_left"
    app:layout_constraintTop_toTopOf="@+id/viewPager"
    app:layout_constraintBottom_toBottomOf="@+id/viewPager"
    app:layout_constraintStart_toStartOf="parent"
    />

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="275dp"
    android:layout_height="204dp"
    android:layout_marginTop="17dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>


<ImageView
    android:id="@+id/circle_gray_next"
    android:src="@drawable/icon_arrow_right"
    app:layout_constraintTop_toTopOf="@+id/viewPager"
    app:layout_constraintBottom_toBottomOf="@+id/viewPager"
    app:layout_constraintEnd_toEndOf="parent"
    />
```

```kotlin:MainActivity
view.findViewById(R.id.circle_gray_previous).setOnClickListener {
    // 前のスライドに移動
    val current = itemViewHolder.viewPager.currentItem
    if (current > 0) {
        viewPager.currentItem = current - 1
        val num =  current.toString() + "/" + images.size
        count.slideCount.setText(num)
    }
}

view.findViewById(R.id.circle_gray_next).setOnClickListener {
    // 次のスライドに移動
    val current = viewPager.currentItem
    if (current < images.size - 1) {
        viewPager.currentItem = current + 1
        val num =  (current + 2).toString() + "/" + images.size
        count.slideCount.setText(num)
    }
}


viewPager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        val current = itemViewHolder.viewPager.currentItem
        val num =  (current + 1) .toString() + "/" + images.size
        count.slideCount.setText(num)
    }
```