Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ConstraintLayout 2.0

ConstraintLayout 2.0

Presentation of the current state of ConstraintLayout 2.0 library, covering the latest alpha releases (3,4,5) at Android Makers'19

Nicolas Roard

April 23, 2019
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. Why

  2. ConstraintLayout 1.x Flat hierarchy : decouple layout from the view

    hierarchy Support library Powerful internal engine Design Tools : UI Builder
  3. When : some guidance Simplify layouts of components Build UI

    quickly What about LinearLayout / FrameLayout ?
  4. Layout concepts Direct Constraints : relative, circular, dimensions (ratio…) Chains

    Helpers : Guidelines, Barriers, Layer… Decorators Virtual Layout Constraint Sets
  5. Encapsulate Behaviors ConstraintLayout utility Encapsulate a given behavior Apply it

    to a set of widgets ▸ Supported in Studio ▸ Can use View APIs (animation, etc.) in helpers to promote reuse
  6. @Override public void updatePostLayout(ConstraintLayout container) { super.updatePostLayout(container); if (mContainer !=

    container) { int rad =(int) Math.hypot(mComputedMaxY - mComputedMinY, mComputedMaxX - mComputedMinX); Animator anim = ViewAnimationUtils.createCircularReveal(this, (int) mComputedCenterX-getLeft(), (int) mComputedCenterY-getTop(), 0, rad); anim.setDuration(2000); anim.start(); } mContainer = container; }
  7. @Override public void updatePostLayout(ConstraintLayout container) { super.updatePostLayout(container); if (mContainer !=

    container) { int rad =(int) Math.hypot(mComputedMaxY - mComputedMinY, mComputedMaxX - mComputedMinX); Animator anim = ViewAnimationUtils.createCircularReveal(this, (int) mComputedCenterX-getLeft(), (int) mComputedCenterY-getTop(), 0, rad); anim.setDuration(2000); anim.start(); } mContainer = container; }
  8. public class MetaballsDecorator extends ConstraintHelper { public void updatePostLayout(ConstraintLayout container)

    { int[] ids = getReferencedIds(); final int count = ids.length; for (int i = 0; i < count; i++) { View view = container.getViewById(ids[i]); // do something } } @Override public void onDraw(Canvas canvas) { // do something } }
  9. MotionLayout Reflect and animate between multiple states of components Coordinating

    motion of multiple components Support nesting MotionLayout Drive custom views
  10. MotionLayout Reflect and animate between multiple states of components Coordinating

    motion of multiple components Support nesting MotionLayout Drive custom views
  11. MotionLayout Subclass of ConstraintLayout Gets its constraints from a separate

    xml file. Allows you to directly animate between two Constraint sets Extensive control of the Transition between the two Custom attributes — not just layout
  12. Chris Banes "I MotionLayout, creating complex UI animations is a

    breeze when you can define some keyframes and let MotionLayout handle the rest"
  13. Chris Banes "I MotionLayout, creating complex UI animations is a

    breeze when you can define some keyframes and let MotionLayout handle the rest"
  14. Monotonic splines • Less prone to overshoot • Needs to

    be differentiable and Integrable Typical Spline Monotonic Spline
  15. KeyCycle •Period - 1/pos across space •Offset - shifts the

    envelope •Attributes - set amplitude of wave
  16. Introducing CycleEditor • Explore the capabilities of KeyCycles • XML

    shown compatible with alpha3 • Features: • Graph multiple cycles • Simulate keyCycles effect on a button
  17. KeyTimeCycle •Period - 1/s (Hz) •Offset - shifts the envelope

    •Attributes - set amplitude of wave Same attributes as KeyCycle
  18. alpha 4 Richer behaviors for OnClick actions CustomAttributes support for

    customPixelDimensions ImageFilterView overlay support KeyTrigger collision support Attributes rename
  19. MotionTarget matching Two Tags: layout_constraintTag … Label a View motionTarget

    … Takes ID or Regular Expressions Apply one keyframe to many views
  20. layout_constraintTag & motionTarget In Layout… <ImageButtton … motion:layout_constraintTag="ActionRow1" /> Or

    in MotionScene … <ConstraintSet> <Constraint … motion:layout_constraintTag="ActionRow1" /> <Constraint> <PropertySet motion:layout_constraintTag="ActionRow1" /> />
  21. layout_constraintTag & motionTarget In Layout… <ImageButtton … motion:layout_constraintTag="ActionRow1" /> Or

    in MotionScene … <ConstraintSet> <Constraint … motion:layout_constraintTag="ActionRow1" /> <Constraint> <PropertySet motion:layout_constraintTag="ActionRow1" /> /> Now apply in MotionScene <Transition> <KeyPosition … motion:motionTarget="ActionRow1" /> <KeyAttribute … motion:motionTarget=“ActionRow.*” /> />
  22. Derived Constraint <ConstraintSet android:id="@+id/base"> </ConstraintSet> <ConstraintSet android:id="@+id/state1"> <Constraint android:id="@id/view1"> <PropertySet

    motion:visibility=“gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state2" motion:deriveConstraintsFrom="@id/state1"> <Constraint android:id="@id/view2"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state3" motion:deriveConstraintsFrom="@id/state2"> <Constraint android:id="@id/view3"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> Base layout
  23. Derived Constraint <ConstraintSet android:id="@+id/base"> </ConstraintSet> <ConstraintSet android:id="@+id/state1"> <Constraint android:id="@id/view1"> <PropertySet

    motion:visibility=“gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state2" motion:deriveConstraintsFrom="@id/state1"> <Constraint android:id="@id/view2"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state3" motion:deriveConstraintsFrom="@id/state2"> <Constraint android:id="@id/view3"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> Base layout + view1 gone
  24. Derived Constraint <ConstraintSet android:id="@+id/base"> </ConstraintSet> <ConstraintSet android:id="@+id/state1"> <Constraint android:id="@id/view1"> <PropertySet

    motion:visibility=“gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state2" motion:deriveConstraintsFrom="@id/state1"> <Constraint android:id="@id/view2"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state3" motion:deriveConstraintsFrom="@id/state2"> <Constraint android:id="@id/view3"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> Base layout + view1 gone + view2 gone
  25. Derived Constraint <ConstraintSet android:id="@+id/base"> </ConstraintSet> <ConstraintSet android:id="@+id/state1"> <Constraint android:id="@id/view1"> <PropertySet

    motion:visibility=“gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state2" motion:deriveConstraintsFrom="@id/state1"> <Constraint android:id="@id/view2"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> <ConstraintSet android:id=“@+id/state3" motion:deriveConstraintsFrom="@id/state2"> <Constraint android:id="@id/view3"> <PropertySet motion:visibility="gone"/> </Constraint> </ConstraintSet> Base layout + view1 gone + view2 gone + view3 gone
  26. Flow : Virtual Layout Helper : reference objets Keep a

    Flat Hierarchy On the fly changes
  27. Flow modes 1. Apply an horizontal or vertical chain to

    the elements 2. Wrap elements as needed, using chains 3. Wrap elements as needed, aligning in rows & columns
  28. Flow : a view Flow is a perfectly normal view

    You can ask it to wrap_content or be of a given size You can set up a background
  29. Flow : XML <android.support.constraint.helper.Flow android:id="@+id/flow" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#F8BA00" android:padding="10dp" app:flow_horizontalStyle="packed"

    app:flow_horizontalGap="10dp" app:constraint_referenced_ids="A,B,C" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent">
  30. Flow : XML <android.support.constraint.helper.Flow android:id="@+id/flow" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#F8BA00" android:padding="10dp" app:flow_horizontalStyle=“spread"

    app:flow_horizontalGap="10dp" app:constraint_referenced_ids="A,B,C" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintTop_toTopOf="parent">
  31. Flow mode : wrap chains A B C D E

    F Wrapping Add a new chain
  32. Flow mode : wrap chains A B C D E

    F Wrapping Spread Chain
  33. Flow mode : wrap chains A B C D E

    F Wrapping Spread Chain Packed Chain
  34. Flow mode : wrap chains A B C D E

    F Wrapping : max elements = 3 (wrap_content)
  35. How it works Handle Gesture Provide a similar view Add

    view to Placeholder in MotionLayout Recompute bounds Run transition
  36. Timeline… Alpha 4 : released April 4th Alpha 5 :

    in the next few days! Beta 1 around Google IO Motion Editor : resume work after Google IO
  37. developer.android.com https://developer.android.com/reference/android/support/constraint/classes.html Medium Articles: Introduction to MotionLayout part I http://bit.ly/2O4AmIz

    Introduction to MotionLayout part II http://bit.ly/2uPuWbw Introduction to MotionLayout part III http://bit.ly/2zRjCSj Introduction to MotionLayout part IV http://bit.ly/2QqfJaF Github: https://github.com/googlesamples/android-ConstraintLayoutExamples Documentation