Android 원형 CardView를 부드럽게 페이지 변환

Goodpatch Advent Calendar의 2018년 보도입니다.
구글 I/O 2018에는 머티리얼즈 템핑이 출시됐고, 최근에는 구글만의 머티리얼즈 디자인 앱을 구글에서 사용하는 것이 늘었다.
또 이 영향으로 iOS 측 트렌드도 바뀌면서 최근 각종 아이콘과 뷰의 모양이 둥글게 변했다.
이번에는 안드로이드 개발자로서 원각 카드뷰를 설치할 때 겪는 어려움과 대처법을 소개한다.

카드Corner Radius = 16dp CardView

최근 유행하는 원형 카드뷰를 먼저 제작한다.
이해하기 쉽도록 카드 코너 레이디스는 16dp를 원합니다.

<androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="16dp"
            app:cardElevation="1dp">

네, 다 됐어요.간단하네.

Transition Animation이 원활하지 않습니다.

이 카드뷰에 Shared Elements를 사용한 Transition Animation을 더해 다른 Activity로 옮겨 보십시오.

Window Animation Scale은 이해하기 쉽도록 x10입니다.
애니메이션이 시작되는 순간 카드뷰에서 클립의 사각형 이미지가 바깥에 나타나는 것을 아십니까?
Shared Element을 사용할 때 마이그레이션에 표시된 View는 마이그레이션된 Activity View입니다.따라서 클립이 없는 마이그레이션된 뷰는 클릭 즉시 표시됩니다.
이렇게 되면 모처럼의 카드뷰는 좀 아쉽다.

Transition의 View 크기에 따라 Clip의radius 변경

이번에는 path clip으로 카드뷰에서 사용하는 뷰를 매끄러운 애니메이션으로 만들었습니다.
Transition Animation에서는 뷰의 크기가 바뀔 때마다 onDraw라고 부르기 때문에 당시 뷰의 폭에 맞춰 라디우스가 조금씩 달라진다.

private val rootWidth = resources.displayMetrics.widthPixels
private val cornerRadius: Float = resources.getDimension(R.dimen.card_corner_radius)
private val cardSideMargin: Float = resources.getDimension(R.dimen.card_side_margin) * 2

override fun onDraw(canvas: Canvas) {
        // viewの幅に合わせてcornerRadiusを変化させる
        val radius = Math.min(cornerRadius, cornerRadius * ((rootWidth - this.width) / cardSideMargin))
        clipPath.reset()
        clipRectF.set(canvas.clipBounds)
        clipPath.addRoundRect(clipRectF, radius, radius, Path.Direction.CW)
        canvas.clipPath(clipPath)
        super.onDraw(canvas)
}

느낌이 좋다.(개인적인 소감.
이번 샘플은 모두 여기에 있다.
ymegane/CardAnimationSample | GitHub
이렇게 하면 주말에 마음 놓고 영화관에 갈 수 있다.
메리 크리스마스.