일반적으로 사용되는 ImageView는 단순히 이미지를 표시해 주는 View입니다.
PhotoView는 ImageView를 확장해서 작성된 라이브러리로 쉽게 이미지 확대 및 축소 사용이 가능합니다.
이번 글에서는 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 이미지 확대 축소 예제-(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를 사용하면서 활용할 수 있는 기능들을 간략하게 정리하고 마무리하려고 합니다.
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
'안드로이드 > 코틀린' 카테고리의 다른 글
안드로이드 캡처 효과 예제 : CaptureEffectView (0) | 2024.05.02 |
---|---|
코틀린 화면 캡처 Canvas, PixelCopy 비교 (0) | 2024.04.30 |
Android 14 MediaProjection 권한 허용 : ADB Shell (0) | 2024.04.29 |
안드로이드 Room 쿼리(Query) 정리 (0) | 2023.02.21 |
안드로이드 Room in jetpack 이해와 사용방법 (0) | 2023.02.17 |
댓글