今さら角丸のTransition

Transcript

1. 今さら⾓丸画像のTransition 2019/09/27

2. • ふじたく @magie_pooh • Androider • ⾁、酒、マジック、催眠術、T シャツ作り（とんぼやーじゅ） ⾃⼰紹介

3. 今さら⾓丸画像のTransition 2019/09/27

4. None

5. おかわりいただけただろうか？ もう⼀度ごはんいただこう

6. ⾓がピコンってなってるのを どうにかしたいッ・・・！

7. None

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. ͍͍ײ͡ʹΞχϝʔγϣϯ͢Δ

19. None
20. None