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
530
運用中の Rails アプリをマルチテナント対応して新規サービスをリリースするまでの道のり
ytakahashi
1
2.6k
詳解 WindowInsets
ytakahashi
3
2.6k
Navigation Architecture Component によるアプリ内遷移の管理
ytakahashi
14
6.6k
Other Decks in Programming
See All in Programming
Amazon Nova Reelの可能性
hideg
0
200
Fixstars高速化コンテスト2024準優勝解法
eijirou
0
190
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
2.1k
Package Traits
ikesyo
1
210
テストコード書いてみませんか?
onopon
2
340
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
170
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.7k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
1
410
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
生成AIでGitHubソースコード取得して仕様書を作成
shukob
0
630
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
For a Future-Friendly Web
brad_frost
176
9.5k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Optimizing for Happiness
mojombo
376
70k
Documentation Writing (for coders)
carmenintech
67
4.5k
Mobile First: as difficult as doing things right
swwweet
222
9k
We Have a Design System, Now What?
morganepeng
51
7.3k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Speed Design
sergeychernyshev
25
740
How STYLIGHT went responsive
nonsquared
96
5.3k
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