Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今さら角丸のTransition

magiepooh
September 27, 2019

 今さら角丸のTransition

Rounded Image Transition

magiepooh

September 27, 2019
Tweet

More Decks by magiepooh

Other Decks in Programming

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