今さら角丸のTransition

F958fbf402a67a1742335a4894e041e5?s=47 magiepooh
September 27, 2019

 今さら角丸のTransition

Rounded Image Transition

F958fbf402a67a1742335a4894e041e5?s=128

magiepooh

September 27, 2019
Tweet

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