今さら角丸のTransition

Rounded Image Transition

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

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

   View Slide

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

   View Slide

7. View Slide

8. 1. ⾓丸のImageViewを作る
   2. 遷移元、遷移先で⾓丸のImageViewを使う
   3. Transitionしながら⾓丸を調整する
   対応⽅法（特殊ですがこの⽅法でやりたいのです）
   

   View Slide

9. ⾓丸のImageViewを作る
   

   View Slide

10. 省略
    CardViewの内部で使われている
    RoundRectDrawableを使うと作りやすいよ。

    コードは以下に置いてます。

    https://github.com/magiepooh/ImageTransitionSample
    

    View Slide

11. 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"
    />
    

    View Slide

12. 遷移元、遷移先で⾓丸の
    ImageViewを使う
    

    View Slide

13. 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"
    />
    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"
    />
    ؙ֯͸͓ͳ͡ʹ͓ͯ͘͠
    

    View Slide

14. Transitionしながら
    ⾓丸を調整する
    

    View Slide

15. 
    
    
    
    
    
    IUUQTHJUIVCDPNBPTQNJSSPSQMBUGPSN@GSBNFXPSLT@CBTFCMPCMPMMJQPQSFMFBTFDPSFSFTSFTUSBOTJUJPONPWFYNM
    

    View Slide

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))
    }
    }
    

    View Slide

17. ͍͍ײ͡ʹ࠷ॳͷ஋Λอଘ͢Δ
    

    View Slide

18. ͍͍ײ͡ʹΞχϝʔγϣϯ͢Δ
    

    View Slide

19. View Slide

20. View Slide