'안드로이드' 태그의 글 목록 (2 Page)

안드로이드

[Android] ViewPager2 좌우 미리 보기 + 페이지 확대/축소 애니메이션 구현 기록

2Cº 2023. 3. 15. 22:43

2023. 3. 15. 22:43

결과 미리보기

1. 가운데 페이지(currentItem)의 width 설정하기

ViewPager2로 좌우 미리보기를 구현할 때, ViewPager2의 width는 가운데 페이지가 차지하는 너비가 된다. 그럼 좌우 페이지는 어떻게 되는 걸까? 일단 계속 따라가보자.

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/view_pager_poster"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:clipChildren="false"
    app:layout_constraintWidth_percent="0.725"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.45"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@id/tv_hint" />

ConstraintLayout을 사용해서 width를 전체 레이아웃의 72.5%로 설정했다.

2. 좌우에 페이지가 보이도록 설정하기

2-1. clipChildren="false"

ViewPager2 속성 중 clipChildren="false"가 눈에 띈다. 문서에 "Defines whether a child is limited to draw inside of its bounds or not."라고 설명되어 있다. Child가 그려지는 공간을 ViewGroup의 영역 내로 제한할 것인지를 의미한다. 기본 값은 true이며, 제한한다는 뜻이다.

False로 설정하면 ViewPager2의 영역을 넘어 양쪽에 페이지가 그려질 수 있다.

(비슷한 속성으로 clipToPadding이 있는데, 자식 뷰의 영역을 ViewGroup의 padding 안쪽으로 제한할 것인지를 묻는다. 기본 값은 true이며, 자식 뷰의 그림자 같은 모서리 효과도 패딩에 의해 잘리게 된다.)

2-2. offscreenPageLimit

clipChildren="false"를 설정해고 어댑터에 데이터를 연결해도 양쪽에 페이지가 보이지 않는다. 왜냐면 ViewPager 하위 View 계층에 child가 하나씩만 유지되기 때문이다. 슬라이드를 하면 다음 View가 계층에 추가되고, 이전 View는 사라진다. (Adapter의 ViewHolder는 남아있다)

이럴 때 offscreenPageLimit 속성을 사용한다. offscreenPageLimit는 현재 페이지에서 좌우(상하) 각각 몇 개의 View를 유지할 것인지 결정한다. 화면에 보이지 않더라도 View가 생성되어 ViewPager2 하위 계층에 추가된다.

binding.viewPagerPoster.offscreenPageLimit = 2

현재 페이지를 제외하고 왼쪽에 2개, 오른쪽에 2개의 페이지가 미리 로딩된다.

여기까지 하면 이런 화면을 볼 수 있다.

3. 좌우 여백 두기

딱 붙어 있는 게 별로라서 페이지의 좌우에 여백을 두려고 한다. ViewPager의 MarginPageTransformer를 활용한다. 문서에는 아래와 같이 쓰여있다.

Adds space between pages via the ViewPager2.PageTransformer API.
Internally relies on View.setTranslationX and View.setTranslationY.
// ...
public MarginPageTransformer(@Px int marginPx) { /*..*/ }

여백을 두는 API이고, 내부적으로는 translation 속성을 사용한다고 한다. PagerTransformer는 페이지를 슬라이드 할 때마다 동작하는데, 슬라이드 할 때마다 각 View의 좌표를 원래 위치에서 Margin만큼 이동시키는 듯 하다.

binding.viewPagerPoster.setPageTransformer(
	MarginPageTransformer(
		resources.getDimensionPixelOffset(R.dimen.game_poster_margin)
    )
)

4. 확대/축소 애니메이션 적용하기

이번에도 PageTransformer를 사용한다. PageTransformer는 슬라이드 할 때마다 동작하고, 좌우 페이지가 현재 페이지로 슬라이드 되면 확대하고 좌우 페이지로 이동하면 축소해야 하기 때문이다.

MarginPageTransformer도 사용해야 해서, 여러 PageTransformer를 혼합할 수 있는 CompositePageTransformer를 사용한다.

CompositePageTransformer().also {
    it.addTransformer(
        MarginPageTransformer(resources.getDimensionPixelOffset(R.dimen.game_poster_margin))
    )
    it.addTransformer { eachPageView: View, positionFromCenter: Float ->
        val scale = 1 - abs(positionFromCenter)
        eachPageView.scaleY = 0.85f + 0.15f * scale
    }
}

2번째의 addTransformer 문장이 확대/축소 애니메이션이다.

positionFromCenter: 가운데(current) 페이지와의 상대적 위치를 뜻한다. 0이면 가운데 페이지, -1이면 왼쪽으로 페이지 하나만큼, +1이면 오른쪽으로 페이지 하나만큼 떨어져 있음을 의미한다. 따라서, 페이지의 위치가 가운데와 가까워질수록 abs(positionFromCenter) = 0에 가까워진다.
val scale = 1 - abs(positionFromCenter): 가운데 페이지에 가까워질수록 1, 멀어질수록 0, 더 멀어지면 음수가 된다
eachPageView.scaleY = 0.85f + 0.15f * scale: 가운데 페이지는 1, 좌우 페이지는 0.85의 scale을 갖게 된다. 따라서, 미리 보이는 좌우 페이지는 85%만큼 작게 보이며, 가운데로 슬라이드 될수록 1로 커진다.

5. ViewPager2 최종 코드

<androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager_poster"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:clipChildren="false"
            app:layout_constraintWidth_percent="0.725"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHeight_percent="0.45"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/tv_hint" />

binding.viewPagerPoster.run {
    removeOverScroll()
    adapter = Adapter()
    offscreenPageLimit = 2
    setPageTransformer(buildPageTransformer())
	registerOnPageChangeCallback(onPageChange)
}

private fun buildPageTransformer() = CompositePageTransformer().also {
    it.addTransformer(
        MarginPageTransformer(resources.getDimensionPixelOffset(R.dimen.game_poster_margin))
    )
    it.addTransformer { eachPageView: View, positionFromCenter: Float ->
        val scale = 1 - abs(positionFromCenter)
        eachPageView.scaleY = 0.85f + 0.15f * scale
    }
}

6. 결과

'TIL' 카테고리의 다른 글

[Kotlin] Sequence (feat. 중간 객체, 지연(lazy) 연산) (0)	2023.07.16
[Kotlin] 람다(lambda)란 무엇이고 왜 사용하는 걸까? (0)	2023.06.14
(2) SOLID 원칙 정리 (객체 지향 프로그래밍) (0)	2023.04.05
[Kotlin] 코틀린의 scope 함수 정리 (let, with, run, apply, also) (0)	2023.04.04
(1) 의존성 주입(Dependency Injection, DI)이란? - 개념과 장점 (0)	2023.04.03

[Android/Kotlin] url 문자열을 Bitmap으로 변환하기

2Cº 2022. 5. 15. 02:09

2022. 5. 15. 02:09

안녕하세요, 이륙사입니다.

최근에 프로그래머스 과제관에서 연습을 하던 중 문자열로된 url을 Bitmap으로 변환해야 하는 일이 있었습니다. 간단하지만 공유하면 좋을 것 같아서 포스팅하려고 합니다.

1. URL -> InputStream -> Bitmap 변환

URL을 InpustSream으로 바꾸는 부분이 핵심입니다.

방법1) URL.openstream() 사용

private fun convertStringToBitmap(urlString: URL): Bitmap {
    val inputStream = url.openStream()
    return BitmapFactory.decodeStream(inputStream) // Bitmap
}

방법2) HttpURLConnection 사용

private fun convertUrlToBitmap(url: URL): Bitmap {
    val connection = url.openConnection() as HttpURLConnection
    connection.doInput = true
    connection.connect()

    return BitmapFactory.decodeStream(connection.inputStream)
}

2. ImageView에 적용

fun setImageFromUrl(imageView: ImageView, urlString: String) {
    val url = URL(urlString)
    val bitmap = convertUrlToBitmap(url)
    imageView.setImageBitmap(bitmap)
}

이렇게 하면.. 짠! NetworkOnMainThreadException가 발생합니다. url의 stream을 여는 과정에서 네트워크가 사용되는데, 이것을 메인 스레드에서 동작시켰기 때문입니다. 저는 코루틴을 통해 백그라운드 스레드에서 동작시켜 이를 해결하겠습니다.

fun setImageFromUrl(imageView: ImageView, urlString: String) {
   GlobalScope.launch(Dispatchers.IO) { // 백그라운드 스레드
      val url = URL(urlString)
      val bitmap = convertUrlToBitmap(url)
      imageView.setImageBitmap(bitmap)
   }
}

그리고 동작시켜보면 또 에러가 납니다..ㅋㅋㅋ imageView를 백그라운드 스레드에서 변경하려고 했기 때문이죠. 이것만 메인 스레드에서 동작시키면 정말로 끝이 납니다.

fun setImageFromUrl(imageView: ImageView, urlString: String) {
   GlobalScope.launch(Dispatchers.IO) {
      val url = URL(urlString)
      val bitmap = convertUrlToBitmap(url) // 네트워크는 백그라운드 스레드에서,
      withContext(Dispatchers.Main){ // UI는 메인 스레드에서
         imageView.setImageBitmap(bitmap)
      }
   }
}

최종 코드

GlobalScope.launch(Dispatchers.IO) {
    try {
        val url = URL(urlString)
        val bitmap = convertUrlToBitmap(url)

        withContext(Dispatchers.Main) {
            completed(bitmap)
        }
    } catch (e: Exception) {
        // 에러 처리
    }
}

[TIL] 안드로이드 - Java와 Kotlin이 호환되는 이유

2Cº 2022. 3. 12. 05:12

2022. 3. 12. 05:12