[Android/Kotlin] ImagePicker 라이브러리를 사용하여 이미지 슬라이드 만들기(2)

지난번 ImagePicker 라이브러리를 사용하여 이미지 보여주기 포스팅에 이어서,

이번에는 여러 장의 이미지를 가지고 와서 ViewPager2를 사용하여 이미지 슬라이드처럼 표현하는 방법에 대해서 정리하려고 한다.

1장만 가지고 와서 표시하고 싶거나, 라이브러리 사용 방법은 아래 글에 자세하게 정리했으니 참고하면 좋을 것 같다.

2022.02.09 - [개발 공부/[Android 개발]] - [Android/Kotlin] ImagePicker 라이브러리를 사용하여 이미지 보여주기

[Android/Kotlin] ImagePicker 라이브러리를 사용하여 이미지 보여주기

---

이미지 슬라이드

 

이미지 슬라이드가 들어갈 Activity를 생성해주고, 샘플 UI를 추가했다.

여러 장의 이미지를 추가할 버튼과 갤러리처럼 표현할 ViewPager2, 그리고 Indicator 라이브러리를 활용하여 몇 번째 사진인지 표시하기 위해 Indicator를 추가했다.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SlideActivity">

    <Button
        android:id="@+id/btnGallery"
        android:layout_width="200dp"
        android:layout_height="40dp"
        android:layout_marginTop="20dp"
        android:background="#673AB7"
        android:text="사진 업로드"
        android:textColor="@color/white"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:background="#F1F1F1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.rd.PageIndicatorView
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="4dp"
        app:layout_constraintBottom_toBottomOf="@+id/viewPager"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:piv_animationType="worm"
        app:piv_dynamicCount="true"
        app:piv_interactiveAnimation="true"
        app:piv_padding="8dp"
        app:piv_radius="4dp"
        app:piv_selectedColor="#b4b4b4"
        app:piv_unselectedColor="#3fb4b4b4"
        app:piv_viewPager="@id/viewPager" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

먼저, 이미지를 여러 장 가져오는 것은 지난번 포스팅에서 적었던 것처럼 ImagePickerLauncher 인스턴스를 생성하여 여러 장을 가져올 수 있도록 옵션 값으로 ImagePickerConfig에 세팅하고 버튼 클릭 시 Launcher를 호출하면 된다.

 

launcher = registerImagePicker { result ->
    if (result.isNotEmpty()) {
        setSlideAdapter(result)
    }
}

btnGallery.setOnClickListener {
    val config = ImagePickerConfig {
        mode = ImagePickerMode.MULTIPLE // 여러 장 선택
        isFolderMode = false
        isIncludeVideo = false
        arrowColor = Color.WHITE
        imageTitle = "이미지를 선택하세요"
        doneButtonText = "추가"
        isShowCamera = true
        returnMode = ReturnMode.NONE
    }

    launcher.launch(config)
}

 

이번 포스팅의 핵심은 ViewPager2를 활용하여 이미지 슬라이드를 만드는 것인데, 핵심은 RecyclerView의 Adapter를 상속받아

갤러리처럼 표현할 Adapter를 만들어주고 ViewPager2 Adapter에 연결하는 것이다.

 

class ImageSliderAdapter(private var context: Context, private var images: List<Image>) :
    RecyclerView.Adapter<ImageSliderAdapter.ViewHolder>() {

    inner class ViewHolder(parent: ViewGroup) : RecyclerView.ViewHolder(
        LayoutInflater.from(parent.context).inflate(R.layout.item_slide, parent, false)
    ) {
        val imageView: ImageView = itemView.findViewById(R.id.imageView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(parent)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        if (images.isEmpty()) {
            Glide.with(context)
                .load(R.drawable.noimage)
                .centerCrop()
                .diskCacheStrategy(DiskCacheStrategy.NONE)
                .into(holder.imageView)
        } else {
            images[position].let {
                with(holder) {

                    imageView.isVisible = true
                    Glide.with(context)
                        .load(it.uri)
                        .fitCenter()
                        .diskCacheStrategy(DiskCacheStrategy.AUTOMATIC)
                        .into(imageView)
                }
            }
        }
    }

    override fun getItemCount(): Int {
        return if (images.isNotEmpty()) images.size else 1
    }

}

코드를 설명하자면, 이미지가 들어가기 위해서 ImageView가 있는 ItemView를 생성하고 ViewHolder 클랙스를 만들어준다.

그리고 Adapter의 파라미터로 Image를 List 형태로 넘겨받아 onBindViewHolder에서 position에 따라 이미지 리스트에서 이미지를 하나씩 꺼내와서 Glide를 통해 ImageView에 뿌려준다.

 

private fun setSlideAdapter(images: List<Image>) {
    val pagerCallback = object : ViewPager2.OnPageChangeCallback() {
        override fun onPageSelected(position: Int) {
            indicator.setSelected(position) // ViewPager 의 position 값이 변경된 경우 Indicator Position 변경
        }
    }

    val adapter = ImageSliderAdapter(this, images)
    viewPager.adapter = adapter
    viewPager.orientation = ViewPager2.ORIENTATION_HORIZONTAL
    viewPager.registerOnPageChangeCallback(pagerCallback) // 콜백 등록

    // Indicator 설정
    indicator.setSelected(0) // 1번째 이미지가 선택된 것으로 초기화
    indicator.count = images.size // 이미지 리스트 사이즈만큼 생성
    indicator.visibility = View.VISIBLE
}

여러 장의 이미지를 선택하면 ImagePicker Callback을 통해 이미지 리스트가 넘어오고, 이미지 리스트를 통해 Adapter를 만들어 ViewPager2 Adapter에 연결한다.

그리고 ViewPager2를 좌우로 슬라이드 되도록 하기 위해 orientation은 Horizontal로 설정한 뒤, OnPageChangeCallback을 정의하여 등록한다.

OnPageChangeCallback은 좌우로 슬라이드 하면서 Viewpager2의 Position 값이 변경될 때마다 호출되는 콜백으로

Position에 따라 값을 처리하고 싶을 때 콜백 안쪽에서 정의해주면 된다.

예시로는 Indicator의 Position 값을 변경해서 이미지를 좌우로 슬라이드 시 Indicator UI가 변경되도록 만들었다.

 

 

이렇게 ImagePicker 라이브러리를 사용해서 다양한 UI와 기능 표현이 가능하고 Viewpager2 또한 이미지 슬라이드를 제외하더라도 다양하게 활용이 가능한 클래스이다.

ImagePicker의 경우 더 좋은 오픈소스 라이브러리가 있지만, 빠르고 간단하게 구현하고 싶을 때 사용해도 좋을 만큼 괜찮은 라이브러리라고 생각해서 ViewPager2와 함께 정리하게 되었다.

 

이 포스팅이 도움이 되셨다면 ❤️를 눌러주시거나, 광고 한번 클릭 부탁드립니다!👍🏻