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
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.5k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
140
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
800
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
0
390
開発生産性を上げるための生成AI活用術
starfish719
1
180
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
350
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
CSC509 Lecture 04
javiergs
PRO
0
300
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
クラシルを支える技術と組織
rakutek
0
190
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Producing Creativity
orderedlist
PRO
347
40k
How to Think Like a Performance Engineer
csswizardry
27
2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building Applications with DynamoDB
mza
96
6.6k
GitHub's CSS Performance
jonrohan
1032
460k
Documentation Writing (for coders)
carmenintech
75
5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
Balancing Empowerment & Direction
lara
4
680
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
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