Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MotionLayout Basics
Search
Yuta Takahashi
August 02, 2018
Programming
3
840
MotionLayout Basics
shibuya.apk #27 で使用した MotionLayout に関する発表の資料です
Yuta Takahashi
August 02, 2018
Tweet
Share
More Decks by Yuta Takahashi
See All by Yuta Takahashi
開発チームの生産性向上に取り組む
ytakahashi
1
500
運用中の Rails アプリをマルチテナント対応して新規サービスをリリースするまでの道のり
ytakahashi
1
2.5k
詳解 WindowInsets
ytakahashi
3
2.4k
Navigation Architecture Component によるアプリ内遷移の管理
ytakahashi
14
6.5k
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
200
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
390
C#/.NETのこれまでのふりかえり
tomokusaba
1
150
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
EventSourcingの理想と現実
wenas
6
2.1k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
830
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
Realtime API 入門
riofujimon
0
110
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
1.7k
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
330
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Docker and Python
trallard
40
3.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Build your cross-platform service in a week with App Engine
jlugia
229
18k
BBQ
matthewcrist
85
9.3k
Why Our Code Smells
bkeepers
PRO
334
57k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Become a Pro
speakerdeck
PRO
24
5k
Adopting Sorbet at Scale
ufuk
73
9k
Transcript
MotionLayout Basics Yuta Takahashi 2018/8/2(Thu) shibuya.apk #27
About Me ∁ڮ༎ଠ "OESPJE&OHJOFFSBU$ZCFS"HFOU *OD '3&4)-*7&ͱ͍͏ੜ์ૹ৴αʔϏεΛ࡞͍ͬͯ·͢ 5XJUUFS!ZU@IJ[J (JU)VC!ZUULIT
MotionLayout
w ̎ͭͷϨΠΞτͷঢ়ଶΛΞχϝʔγϣϯͤ͞ͳ͕Β มԽͤ͞Δ͜ͱ͕Ͱ͖ΔϨΠΞτ w $POTUSBJOU-BZPVUBMQIBͰՃ͞Εͨ w ͰTUBCMFʹͳΔ༧ఆ Կ͕৽͍͠ͷ͔ w $VTUPN"UUSJCVUFΛࢦఆͰ͖Δ
w Ϣʔβͷૢ࡞ʹԠͯ͡ঢ়ଶΛมԽͤ͞Δ͜ͱ͕Ͱ͖ΔͳͲ MotionLayout
࠷ॳͷঢ়ଶͷMBZPVUΛ࡞Δ ࠷ޙͷঢ়ଶͷMBZPVUΛ࡞Δ Ͱ࡞ͨ͠MBZPVUΛͱʹ.PUJPO4DFOFΛ࡞Δ 5SBOTJUJPOͱ0O4XJQFΛఆٛ͢Δ
.PUJPO-BZPVUʹ.PUJPO4DFOFΛηοτ͢Δ How to create animation
͜Ε͔Β࡞Δαϯϓϧ https://github.com/googlesamples/android-ConstraintLayoutExamples How to create animation
<View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
࠷ॳͷঢ়ଶͷMBZPVUΛ࡞Δ How to create animation
<View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" />
࠷ޙͷঢ়ଶͷMBZPVUΛ࡞Δ How to create animation
How to create animation Ͱ࡞ͨ͠MBZPVUΛͱʹ.PUJPO4DFOFΛͭ͘Δ <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene> How to create animation https://developer.android.com/reference/android/support/constraint/motion/MotionLayout
Ͱ࡞ͨ͠MBZPVUΛͱʹ.PUJPO4DFOFΛͭ͘Δ <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/button"
android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene> https://developer.android.com/reference/android/support/constraint/motion/MotionLayout How to create animation \ ⁞ \
How to create animation 5SBOTJUJPOͱ0O4XJQFΛఆٛ͢Δ <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition
motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@+id/start" motion:duration="1000"> <OnSwipe motion:dragDirection="dragRight" motion:touchAnchorId="@id/button" motion:touchAnchorSide="right" /> </Transition> <!— 3Ͱ࡞ͬͨ ConstraintSet ͳͲͷఆ͕ٛԼʹଓ͘ —> How to create animation
How to create animation .PUJPO-BZPVUʹ.PUJPO4DFOFΛηοτ͢Δ How to create animation
<android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene"> <View android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/colorAccent"/> </android.support.constraint.motion.MotionLayout>
How to debug animation <android.support.constraint.motion.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01"
app:showPaths="true"> Debug animation BQQTIPX1BUITͰΞχϝʔγϣϯͷύεΛ දࣔͰ͖Δ
w .PUJPO-BZPVU ͜ͷঢ়ଶ͔Β͜͏͍͏ঢ়ଶʹͳͬͯ ΄͍͠ʜͱ͍͏ͷΛΑ͠ͳʹ͑ͯ͘ΕΔ w ࣗͰΔ͜ͱ͕গͳָͯ͘ͳͿΜɺࡉ͔͍ௐ͍͠ w BMQIBͳͷͰવͳ͕Βෆ۩߹ଟ͍࣮ϓϩμΫτͰ ͓͏ͱ͢Δͱ΄΅࣮֬ʹཕΛ౿Ήͱ͍͍͍ͬͯ͘Β͍ w
.PUJPO&EJUPS͕͋Εͬͱָͦ͏ CFUBPSTUBCMFҎ߱ Impressions
Thank you ࠓճ༻ͨ͠αϯϓϧͪ͜Β͔Β: https://github.com/googlesamples/android-ConstraintLayoutExamples