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
890
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
620
運用中の Rails アプリをマルチテナント対応して新規サービスをリリースするまでの道のり
ytakahashi
1
2.9k
詳解 WindowInsets
ytakahashi
4
3k
Navigation Architecture Component によるアプリ内遷移の管理
ytakahashi
14
6.9k
Other Decks in Programming
See All in Programming
ABEMAモバイルアプリが Kotlin Multiplatformと歩んだ5年 ─ 導入と運用、成功と課題 / iOSDC 2025
akkyie
0
310
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
120
Serena MCPのすすめ
wadakatu
4
860
株式会社 Sun terras カンパニーデック
sunterras
0
180
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
210
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
160
Model Pollution
hschwentner
1
180
CSC305 Lecture 02
javiergs
PRO
1
260
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
690
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
340
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
130
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
Making Projects Easy
brettharned
118
6.4k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Balancing Empowerment & Direction
lara
4
670
The Pragmatic Product Professional
lauravandoore
36
6.9k
Producing Creativity
orderedlist
PRO
347
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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