今さら角丸のTransition

Rounded Image Transition

Transcript

1. 今さら⾓丸画像のTransition 2019/09/27
2. • ふじたく @magie_pooh • Androider • ⾁、酒、マジック、催眠術、T シャツ作り（とんぼやーじゅ） ⾃⼰紹介
3. 今さら⾓丸画像のTransition 2019/09/27
5. おかわりいただけただろうか？ もう⼀度ごはんいただこう
6. ⾓がピコンってなってるのを どうにかしたいッ・・・！
8. 1. ⾓丸のImageViewを作る 2. 遷移元、遷移先で⾓丸のImageViewを使う 3. Transitionしながら⾓丸を調整する 対応⽅法（特殊ですがこの⽅法でやりたいのです）
9. ⾓丸のImageViewを作る
10. 省略 CardViewの内部で使われている RoundRectDrawableを使うと作りやすいよ。
 コードは以下に置いてます。
 https://github.com/magiepooh/ImageTransitionSample
11. <com.github.magiepooh.imagetransitionsample.RoundedImageView android:id="@+id/image1" android:layout_width="0dp" android:layout_height="0dp" app:flo_top_left_radius="@dimen/radius_card" app:flo_top_right_radius="@dimen/radius_card" android:src="@drawable/mountain" app:layout_constraintDimensionRatio="H,400:267" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
12. 遷移元、遷移先で⾓丸の ImageViewを使う
13. <com.github.magiepooh.imagetransitionsample.RoundedImageView android:id="@+id/image1" android:layout_width="0dp" android:layout_height="0dp" app:flo_top_left_radius="@dimen/radius_card" app:flo_top_right_radius="@dimen/radius_card" android:src="@drawable/mountain" app:layout_constraintDimensionRatio="H,400:267" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> <com.github.magiepooh.imagetransitionsample.RoundedImageView android:id="@+id/header" android:layout_width="0dp" android:layout_height="0dp" android:src="@drawable/mountain" app:flo_top_left_radius="@dimen/radius_card" app:flo_top_right_radius="@dimen/radius_card" app:layout_constraintDimensionRatio="H,400:267" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> ؙ֯͸͓ͳ͡ʹ͓ͯ͘͠
    
14. Transitionしながら ⾓丸を調整する
15. <transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds/> <changeTransform/> <changeClipBounds/> <changeImageTransform/> </transitionSet> IUUQTHJUIVCDPNBPTQNJSSPSQMBUGPSN@GSBNFXPSLT@CBTFCMPCMPMMJQPQSFMFBTFDPSFSFTSFTUSBOTJUJPONPWFYNM
16. // DetailActivity.kt (ભҠઌͷActivity window.sharedElementEnterTransition = RoundedImageTransitionSet() 
 // RoundedImageTransitionSet.kt
 class RoundedImageTransitionSet : TransitionSet() { init { addTransition(ChangeBounds()) addTransition(ChangeTransform()) addTransition(ChangeImageTransform()) addTransition(ChangeClipBounds()) addTransition(RoundedImageTransition().addTarget(R.id.header)) } }
17. ͍͍ײ͡ʹ࠷ॳͷ஋Λอଘ͢Δ
18. ͍͍ײ͡ʹΞχϝʔγϣϯ͢Δ