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
850
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
540
運用中の Rails アプリをマルチテナント対応して新規サービスをリリースするまでの道のり
ytakahashi
1
2.6k
詳解 WindowInsets
ytakahashi
3
2.6k
Navigation Architecture Component によるアプリ内遷移の管理
ytakahashi
14
6.7k
Other Decks in Programming
See All in Programming
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
SwiftUI Viewの責務分離
elmetal
PRO
0
140
2024年のWebフロントエンドのふりかえりと2025年
sakito
1
230
GAEログのコスト削減
mot_techtalk
0
110
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
7
2.5k
Open source software: how to live long and go far
gaelvaroquaux
0
620
CI改善もDatadogとともに
taumu
0
110
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Facilitating Awesome Meetings
lara
51
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Thoughts on Productivity
jonyablonski
69
4.5k
GraphQLとの向き合い方2022年版
quramy
44
13k
Code Review Best Practice
trishagee
66
17k
Six Lessons from altMBA
skipperchong
27
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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