안드로이드 이미지 확대, 축소 : PhotoView 사용

결과 화면

 

1. 의존성 선언
2. 나머지 코드

 

 

1.  의존성 선언

dependencies {

    // PhotoView
    implementation("io.getstream:photoview:1.0.2")
    implementation("io.getstream:photoview-dialog:1.0.2")
    // glide
    implementation("com.github.bumptech.glide:glide:4.16.0")
}

 

- 저는 사진을 서버에서 이미지 로드하기 위해서 추가로 glide까지 선언해 주었습니다.

 

---

GitHub - GetStream/photoview-android: 🌇 PhotoView is an ImageView component that enables zoom functionality through diverse t

 

 

2.  나머지 코드

 

MainActivity

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val photoView = binding.photoView
        Glide.with(this)
            .load("https://edgio.clien.net/F01/14662322/1223d7c7cb74ee.jpg?scale=width[740],options[limit]")
            .into(photoView)

        val imageUrls = listOf(
            "https://photo.coolenjoy.co.kr/data/editor/1912/thumb-Bimg_1fdc4d37e9779c1ab885d0bb3bb431d7_o8lm.jpg",
            "https://photo.coolenjoy.co.kr/data/editor/1912/thumb-Bimg_1fdc4d37e9779c1ab885d0bb3bb431d7_2dc5.jpg",
            "https://photo.coolenjoy.co.kr/data/editor/1912/thumb-Bimg_1fdc4d37e9779c1ab885d0bb3bb431d7_96b2.jpg"
        )

        // 기본 PhotoViewDialog 표시
//        val button = binding.button
//        button.setOnClickListener {
//            PhotoViewDialog.Builder(context = this, images = imageUrls) { imageView, url ->
//                Glide.with(this)
//                    .load(url)
//                    .into(imageView)
//            }.build().show()
//        }

        // 커스텀 PhotoViewDialog 표시
        val button = binding.button
        button.setOnClickListener {
            val overlayBinding = PhotoViewOverlayBinding.inflate(layoutInflater)

            val photoViewDialog = PhotoViewDialog.Builder(context = this, images = imageUrls) { imageView, url ->
                Glide.with(this)
                    .load(url)
                    .into(imageView)
            }
                .withOverlayView(overlayBinding.root) // 커스텀 오버레이 뷰 설정
                .withImageChangeListener { position ->
                    // 이미지 변경 시마다 위치 텍스트 업데이트
                    val text = "${position + 1} / ${imageUrls.size}"
                    overlayBinding.photoPositionText.text = text
                }
                .build()

            photoViewDialog.show()
        }

    }
}

 

---

 

기본 PhotoViewDialog 표시

 

 

/**
 * Sets custom overlay view to be shown over the viewer.
 * Commonly used for image description or counter displaying.
 *
 * @return This Builder object to allow calls chaining
 */
public fun withOverlayView(view: View): Builder<T> {
  data.overlayView = view
  return this
}

• 기본 PhotoViewDialog로 구현을 하면 너무 밋밋해서 PhotoViewDialog에서 제공하는 withOverlayView 을 사용해서 PhotoViewDialog를 커스텀 해보았습니다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <io.getstream.photoview.PhotoView
        android:id="@+id/photo_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="PhotoViewDialog" />

</androidx.appcompat.widget.LinearLayoutCompat>

 

 

 

photo_view_overlay.xml

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

    <TextView
        android:id="@+id/photo_position_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="16dp"
        android:textColor="@android:color/white"
        android:textSize="16sp"
        android:text="1 / 3"/>
</FrameLayout>

 

 

---

 

전체코드

 

Blog/Project/enlargeImage at develop · wjdwntjd55/Blog