やりたいこと
Androidでスライドショーを実装しようと思います。
AndroidXのViewPager2 ウィジェットを使います。
1.下準備
プロジェクトのbuild.gradle
ファイルに依存関係を追加しましょう。
1.1.0はベータ版で1.0.0が安定版なので、今回は1.0.0を使用します。
build.gradle
implementation 'androidx.viewpager2:viewpager2:1.0.0'
2.レイアウトファイルにviewpagerを設置
スライドショーを表示させたいレイアウトファイルに ViewPager2 を配置しましょう。
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
を作成します。
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
ファイルを作成し、以下のように実装します。
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上で繋ぎこめば完成です。
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
いかがでしょうか。ぜひ参考にしていただけると幸いです!
おまけ
・矢印をつける
・右上に現在のページを表示する
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"
/>
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)
}