본문 바로가기
안드로이드/코틀린

안드로이드 이미지 확대 축소 : PhotoView 예제

by 시작이반의반 2024. 4. 25.

안드로이드 PhotoView

 

일반적으로 사용되는 ImageView는 단순히 이미지를 표시해 주는 View입니다.

PhotoView는 ImageView를 확장해서 작성된 라이브러리로 쉽게 이미지 확대 및 축소 사용이 가능합니다.

이번 글에서는 PhotoView를 활용해서 이미지 확대 축소하는 예제를 다뤄보려고합니다.

안드로이드 이미지 확대 축소
PhotoView 이미지 확대 축소

 

 

 

 

 

PhotoView 라이브러리 사용법

 

아래와 같이 gradle 설정합니다.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()

        maven { setUrl("https://jitpack.io") } // 추가
    }
}

 

dependencies {
    ....

    implementation("com.github.chrisbanes:PhotoView:2.3.0") // 추가
}

 

그리고 사용하고자 하는 레이아웃 xml에 아래와 PhotoView를 추가합니다.

<com.github.chrisbanes.photoview.PhotoView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/image" />

 

 

 

PhotoView 이미지 확대 축소 예제-(1)

 

특정 레이아웃영역에 PhotoView를 정의해 주고 실행시켜 봅니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="40dp"
    android:background="@drawable/border"> <!--테두리-->

    <com.github.chrisbanes.photoview.PhotoView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="1dp"
        android:adjustViewBounds="true"
        android:src="@drawable/tree" />
</LinearLayout>

 

※ adjustViewBounds : true로 설정해 주면 PhotoView가 이미지 비율에 맞게 조정

 

아래 실행 화면처럼 원하는 영역에 잘 배치된 걸 확인할 수 있습니다.

PhotoView 이미지 확대 축소
PhotoView 이미지 확대 축소

 

그런데 한 가지 고민해야 할 문제가 있었습니다.

보여주려는 PhotoView 영역과 이미지 비율이 맞지 않는 경우 공백이 생길 수 있는데요,

서로 비율이 안 맞는 상태에서 이미지 전체를 보여주려면 어쩔 수 없이 공백이 생기는 건데

저 같은 경우는 이미지 비율은 유지하되 공백 없이 보이는 걸 원했습니다ㅠㅠ

 

PhotoView 이미지 확대 축소
PhotoView 공백

 

 

 

 

 

PhotoView 이미지 확대 축소 예제-(2) : 공백 없애기

 

scaleType fitXY 속성은 이미지 비율이 깨지기 때문에 사용할 수 없었고,

결과적으로 ScrollView와 함께 사용해서 공백을 없앨 수 있었습니다.

이미지 비율은 유지하고 PhotoView 영역에 꽉 차게 보이게 할 수 있습니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="40dp"
    android:background="@drawable/border"> <!--테두리-->

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.github.chrisbanes.photoview.PhotoView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="1dp"
            android:adjustViewBounds="true"
            android:src="@drawable/tree" />
    </ScrollView>
</LinearLayout>

 

PhotoView 이미지 확대 축소

 

 

 

PhotoView 활용

 

마지막으로 PhotoView를 사용하면서 활용할 수 있는 기능들을 간략하게 정리하고 마무리하려고 합니다.

 

1. 이미지 확대 및 축소 크기 설정

scale을 통해 확대 및 축소 설정이 가능합니다. 

설정할 때 minimumScale, maximumScale 크기를 벗어나지 않도록 설정해야 합니다.

val scale = 2f
if (scale >= binding.photoView.minimumScale && scale <= binding.photoView.maximumScale) {
    binding.photoView.setScale(scale, true) // 애니메이션 효과 o
    //binding.photoView.scale = scale // 애니메이션 효과 x
}

 

 

2. 확대 축소 리스너

이미지 확대 및 축소 시 리스너를 등록해서 처리할 수 있습니다.

binding.photoView.setOnScaleChangeListener { scaleFactor, focusX, focusY ->
    if (scaleFactor > 1f) {
        // 이미지가 확대되었을 때 처리
    } else if (scaleFactor < 1f) {
        // 이미지가 축소되었을 때 처리
    }
}

 

 

2. 이미지 탭 리스너

이미지 탭 했을 때 위치를 리스너로 등록해서 처리할 수 있습니다.

binding.photoView.setOnPhotoTapListener { view, x, y ->
    // 이미지를 탭했을 때 처리
}

 

 

 

참고자료

 

https://github.com/Baseflow/PhotoView

 

GitHub - Baseflow/PhotoView: Implementation of ImageView for Android that supports zooming, by various touch gestures.

Implementation of ImageView for Android that supports zooming, by various touch gestures. - Baseflow/PhotoView

github.com

댓글