Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
今さら角丸のTransition
magiepooh
September 27, 2019
Programming
0
440
今さら角丸のTransition
Rounded Image Transition
magiepooh
September 27, 2019
Tweet
Share
More Decks by magiepooh
See All by magiepooh
magiepooh
2
1.3k
magiepooh
2
720
magiepooh
39
16k
magiepooh
0
460
magiepooh
0
420
magiepooh
2
1.2k
magiepooh
2
350
magiepooh
1
1.2k
magiepooh
0
950
Other Decks in Programming
See All in Programming
osyo
1
370
zsmb
1
130
horie1024
1
430
standfm
1
280
fkubota
1
400
akatsukinewgrad
0
210
line_developers_tw
0
1.4k
ajstarks
2
550
zsmb
2
110
koher
7
520
aratayokoyama
0
230
akkeylab
0
370
Featured
See All Featured
skipperchong
7
670
searls
204
35k
andyhume
62
3.5k
vanstee
116
4.8k
marcelosomers
220
15k
mongodb
23
3.8k
garrettdimon
287
110k
sachag
446
36k
chriscoyier
145
19k
shpigford
368
42k
bermonpainter
342
26k
62gerente
587
200k
Transcript
今さら⾓丸画像のTransition 2019/09/27
• ふじたく @magie_pooh • Androider • ⾁、酒、マジック、催眠術、T シャツ作り(とんぼやーじゅ) ⾃⼰紹介
今さら⾓丸画像のTransition 2019/09/27
None
おかわりいただけただろうか? もう⼀度ごはんいただこう
⾓がピコンってなってるのを どうにかしたいッ・・・!
None
1. ⾓丸のImageViewを作る 2. 遷移元、遷移先で⾓丸のImageViewを使う 3. Transitionしながら⾓丸を調整する 対応⽅法(特殊ですがこの⽅法でやりたいのです)
⾓丸のImageViewを作る
省略 CardViewの内部で使われている RoundRectDrawableを使うと作りやすいよ。 コードは以下に置いてます。 https://github.com/magiepooh/ImageTransitionSample
<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" />
遷移元、遷移先で⾓丸の ImageViewを使う
<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" /> ؙ͓֯ͳ͡ʹ͓ͯ͘͠
Transitionしながら ⾓丸を調整する
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <changeBounds/> <changeTransform/> <changeClipBounds/> <changeImageTransform/> </transitionSet> IUUQTHJUIVCDPNBPTQNJSSPSQMBUGPSN@GSBNFXPSLT@CBTFCMPCMPMMJQPQSFMFBTFDPSFSFTSFTUSBOTJUJPONPWFYNM
// 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)) } }
͍͍ײ͡ʹ࠷ॳͷΛอଘ͢Δ
͍͍ײ͡ʹΞχϝʔγϣϯ͢Δ
None
None