Download as PDF, PPTX
![Variables: {
angle: { from: 0, step: 10 },
rotation: { from: 'startRotation', step: 10 },
distance: 100,
mylist: { tag: 'box' }
},
Generate: {
mylist: {
width: 200,
height: 40,
circular: ['parent', 'angle', 'distance'],
pivotX: 0.1,
pivotY: 0.1,
translationX: 225,
rotationZ: 'rotation'
}
}](https://image.slidesharecdn.com/2021roboto-210928173241/85/ConstraintLayout-Compose-2021-Chicago-Roboto-50-320.jpg)
ConstraintLayout Compose 2021 Chicago Roboto
- 1. ConstraintLayout & MotionLayoutin Compose John Hoford Google @johnhoford Nicolas Roard Rivian @camaelon
- 2.
- 3. ConstraintLayout 1.0 ConstraintLayout Core (Solver Engine) ViewGroup XMLParsing ConstraintSet
- 4. ConstraintLayout 1.0 • FlexibleLayout Manager • Positions relatively, in percentage, as a set (chain) • Dimensions : ratio, percentage, weight… • Guideline, Barriers… • ConstraintSet : build your layout rules on the fl y, swap them • Layout Editor
- 5. ConstraintLayout ConstraintLayout 1.0 Core (Solver Engine) ViewGroup XMLParsing ConstraintSet
- 6. ConstraintLayout 2.0 ConstraintLayout Core (Solver Engine) ViewGroup XMLParsing ConstraintSet MotionLayout Core Interpolator “physics” engines ViewGroup XML Parsing Touch Handling ConstraintSet Transitions KeyFrames Helpers OnSwipe
- 7. ConstraintLayout 2.0 • VirtualLayouts • Helpers & Decorators • Programming APIs • MotionLayout • Motion Editor
- 8. ConstraintLayout 2.0 ConstraintLayout Core (Solver Engine) ViewGroup XMLParsing ConstraintSet MotionLayout Core Interpolator “physics” engines ViewGroup XML Parsing Touch Handling ConstraintSet Transitions KeyFrames Helpers OnSwipe
- 9. ConstraintLayout 2.1 ConstraintLayout Core (Solver Engine) ViewGroup XMLParsing ConstraintSet MotionLayout Core Interpolator “physics” engines ViewGroup XML Parsing Touch Handling ConstraintSet Transitions KeyFrames ViewTransitions Helpers ConstraintProperties Helpers OnSwipe
- 10. ConstraintLayout 2.1 ConstraintLayout • CircularFlow •ReactiveGuide • supports negative margins for constraints • supports baseline to top and baseline to bottom constraints • supports baseline margin constraints
- 11.
- 12. C A B Negative Margins Baseline to Top orBottom +/- margin
- 13. ConstraintLayout 2.1 MotionLayout • Rotation:Polar motions, Device Rotation, Rotation swipes • ViewTransitions • OnSwipe Spring • Interpolators - Overshoot, quantized motion • Animated Text • Motion Helpers: MotionE ff ect & Carousel • Scalability: <include> <ConstraintOverride>
- 14. • Support ComplexRotational Animation Polar mode
- 15.
- 16. <ViewTransitions> • “noState” Runasynchronous <ViewTransitio n android:id="@+id/spin " motion:motionTarget="button.* " motion:viewTransitionMode="noState " motion:onStateTransition="actionDownUp " motion:upDuration = "700 " motion:duration="200" > <KeyFrameSet > <KeyAttribute motion:framePosition="30" > <CustomAttribut e motion:attributeName="roundPercent " motion:customFloatValue=".3" / > <CustomAttribut e motion:attributeName="background " motion:customColorDrawableValue="#AE7088" / > </KeyAttribute > </KeyFrameSet > </ViewTransition >
- 17. Springs! <OnSwip e motion:dragDirection ="dragUp " motion:touchAnchorId ="@id/bar " motion:springStiffness="3300 " motion:springDamping ="50 " motion:springMass ="2 " motion:autoCompleteMode="spring " motion:springBoundary ="bounceStart " motion:onTouchUp="neverCompleteToEnd"
- 18.
- 19.
- 20. <androidx.constraintlayout.helper.widget.MotionEffec t android:id="@+id/fade " app:motionEffect_start="40 " app:motionEffect_alpha="0 " app:motionEffect_end="60 " app:motionEffect_move="west " app:motionEffect_strict="false " android:layout_width="wrap_content " android:layout_height="wrap_content " app:constraint_referenced_ids="t1,t2,t3,t4,t5,t6,t7,t8,t9 " / > <androidx.constraintlayout.helper.widget.MotionEffec t android:id="@+id/fade " android:layout_width="wrap_content " android:layout_height="wrap_content " app:motionEffect_viewTransition="@+id/foo " app:motionEffect_translationY="-40dp " app:constraint_referenced_ids="t1,tf1,t2,tf2,t3,tf3,t4,tf4,t5,tf5 " / > MotionHelper: MotionE ff ect <ViewTransition android:id="@+id/foo" > <KeyFrameSet > <KeyAttributemotion:framePosition="20" android:alpha="0.5" android:rotationX="80" android:scaleY="0.5" android:scaleX="0.5"/ > <KeyAttribute motion:framePosition="50" android:alpha=“0.0" android:rotationX="80" android:scaleY="0.5" android:scaleX="0.5"/ > <KeyAttribute motion:framePosition="80" android:alpha="0.5" android:rotationX="80" android:scaleY="0.5" android:scaleX="0.5"/ > </KeyFrameSet > </ViewTransition >
- 21.
- 23. ConstraintLayout 2.1 ConstraintLayout Core (Solver Engine) ViewGroup XMLParsing ConstraintSet MotionLayout Core Interpolator “physics” engines ViewGroup XML Parsing Touch Handling ConstraintSet Transitions KeyFrames ViewTransitions Helpers ConstraintProperties Helpers OnSwipe
- 24. ConstraintLayout Compose 1.0 ConstraintLayout Core (SolverEngine) ConstraintSet MotionLayout Core Interpolator “physics” engines ConstraintSet Transitions KeyFrames OnSwipe Compose Adaptor Compose Adaptor
- 25. ConstraintLayout / Compose •Common Core with existing implementation • Kotlin DSL to express constraints • JSON syntax to express constraints • Work in Progress : we want your feedback!
- 26. Why? ConstraintLayout in Compose •Migration path • Relative positioning • Separation of concerns
- 32.
- 33.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. MotionLayout / Compose •JSON5 (http://www.json5.org) • Limited subset for now • Check examples • https://github.com/androidx/constraintlayout/tree/main/ projects/ComposeConstraintLayout
- 42. MotionLayout / Compose JSON5 •Header • ConstraintSet • Generate • Variables • Transitions • KeyFrames • KeyPosition • KeyAttributes • KeyCycle
- 43. • Header • ConstraintSet •Generate • Variables • Transitions • KeyFrames • KeyPosition • KeyAttributes • KeyCycle MotionLayout / Compose JSON5
- 44. • Header • ConstraintSet •Generate • Variables • Transitions • KeyFrames • KeyPosition • KeyAttributes • KeyCycle MotionLayout / Compose JSON5
- 45. • Header • ConstraintSet •Generate • Variables • Transitions • KeyFrames • KeyPosition • KeyAttributes • KeyCycle MotionLayout / Compose JSON5
- 46. • KeyCycle MotionLayout /Compose JSON5
- 48.
- 49. JSON5 • Disadvantages • NewSyntax to learn • Parse → constants vs. execute → constraints • Advantages • Compact • Enable novel functionality • Cross platform • Live Literal → fast update • Separation of Concerns • Link…
- 50. Variables: { angle: {from: 0, step: 10 }, rotation: { from: 'startRotation', step: 10 }, distance: 100, mylist: { tag: 'box' } }, Generate: { mylist: { width: 200, height: 40, circular: ['parent', 'angle', 'distance'], pivotX: 0.1, pivotY: 0.1, translationX: 225, rotationZ: 'rotation' } }
- 52.
- 53.
- 54. •Run your app •LinkingLinkServer.kt •adb forward tcp:9999 tcp:9999 •run desktop app: ConstraintLayoutLink
- 55. List all exportedjson5 scripts JSON5 pulled From device Visual Inspector Timeline Attributes
- 56.
- 57.
- 58.
- 59. Where are wenow
- 60. Constraint Layout 2.1.1 dependencies { implementation ‘androidx.constraintlayout:constraintlayout:2.1.1 ’ } h tt ps://github.com/AndroidX/constraintlayout
- 61. ConstraintLayout Compose 1.0.0-rc01 dependencies { implementation‘androidx.constraintlayout:constraintlayout-compose:1.0.0-rc01 ’ } h tt ps://github.com/AndroidX/constraintlayout
- 62.
- 63.