ConstraintLayout 2.0 sneak peek

ConstraintLayout 2.0 sneak peek

A presentation at ChicagoRoboto 2018 of what's coming up soon with ConstraintLayout 2.0

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

April 12, 2018
Tweet

Transcript

  1. CONSTRAINT LAYOUT 2.0 Nicolas Roard & John Hoford @camaelon @johnhoford

    (Sneak peek)
  2. BUT FIRST…

  3. CL 1.1 1.1

  4. ConstraintLayout 2.0 preview GOOGLE MAVEN REPOSITORY dependencies { compile 'com.android.support.constraint:constraint-layout:1.1.0'

    }
  5. ConstraintLayout 2.0 preview CONSTRAINT LAYOUT 1.1 ➤ Constraints ➤ Helper

    objects ➤ Optimizer ➤ ton of bug fixes!
  6. ConstraintLayout 2.0 preview CONSTRAINTS ➤ Constrained Dimensions : percent, min/max,

    wrap ➤ Circular constraints ➤ Complex chains
  7. ConstraintLayout 2.0 preview CIRCULAR CONSTRAINTS <Button android:id="@+id/buttonA" ... /> <Button

    android:id="@+id/buttonB" … app:layout_constraintCircle=“@+id/buttonA" app:layout_constraintCircleRadius=“100dp" app:layout_constraintCircleAngle="45" />
  8. ConstraintLayout 2.0 preview EXAMPLE Andrew Kelly https://medium.com/devnibbles/ constraintlayout-circular- positioning-9489b11cb0e5

  9. ConstraintLayout 2.0 preview EXAMPLE Andrew Kelly https://medium.com/devnibbles/ constraintlayout-circular- positioning-9489b11cb0e5

  10. ConstraintLayout 2.0 preview HELPER OBJECTS ➤ Barriers ➤ Groups ➤

    Placeholders
  11. ConstraintLayout 2.0 preview BARRIERS ➤ A barrier takes the minimum

    or maximum of a set of widget ➤ Other widgets can then be constrained to it ➤ Allows to build more flexible layouts Helper object
  12. Barriers

  13. Barriers

  14. Barriers 1 2 3

  15. Barriers 1 2 3 4

  16. Barriers

  17. Barriers

  18. ConstraintLayout 2.0 preview GROUPS ➤ Define a set of widgets

    ➤ Apply visibility to them Helper object
  19. Groups textview2 textview3

  20. Groups Invisible Gone

  21. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } fun select(v: View) { TransitionManager.beginDelayedTransition(main_layout) placeholder.setContentId(v.id) main_title.text= v.tag as CharSequence?;""; } } Placeholder
  22. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) {

    super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) } fun select(v: View) { TransitionManager.beginDelayedTransition(main_layout) placeholder.setContentId(v.id) main_title.text= v.tag as CharSequence?;""; } } Placeholder
  23. ConstraintLayout 2.0 preview OPTIMIZER ➤ New optimizer in 1.1 ➤

    A lot more powerful :) ➤ Multiple optimizations passes available ➤ Direct & Center connections ➤ Barriers ➤ Chains (experimental) ➤ Dimensions (experimental)
  24. ConstraintLayout 2.0 preview OPTIMIZER ATTRIBUTE app:layout_optimizationLevel=“standard” app:layout_optimizationLevel=“direct|barriers|chains|dimensions”

  25. ConstraintLayout 2.0 preview OPTIMIZER CONSTRAINTS OPTIMIZER SOLVER MEASURES

  26. ConstraintLayout 2.0 preview OPTIMIZER Widget A

  27. ConstraintLayout 2.0 preview OPTIMIZER Widget A

  28. ConstraintLayout 2.0 preview OPTIMIZER Widget A

  29. ConstraintLayout 2.0 preview OPTIMIZER Widget A

  30. ConstraintLayout 2.0 preview OPTIMIZER Widget A Widget B

  31. ConstraintLayout 2.0 preview OPTIMIZER Widget A Widget B

  32. ConstraintLayout 2.0 preview OPTIMIZER Widget A Widget B

  33. ConstraintLayout 2.0 preview OPTIMIZER

  34. ConstraintLayout 2.0 preview OPTIMIZER

  35. CONSTRAINT LAYOUT 2.0Preview

  36. CL 2.0 WHY?

  37. CL 2.0 UI : RAISING THE BAR

  38. CL 2.0 HELP!

  39. CL 2.0 VOCABULARY

  40. ConstraintLayout 2.0 preview TOOLING ➤ Integrated manipulation in the component

    tree (like for barriers) ➤ Exposed in the Palette ➤ Support 3rd party libraries ➤ exposing their custom views / helpers
  41. CL 2.0 HELPERS

  42. ConstraintLayout 2.0 preview THREE MAIN CATEGORIES OF HELPERS Layout Manipulation

    Rendering or Decorating Post-Layout Manipulation
  43. ConstraintLayout 2.0 preview CONSTRAINT HELPERS ➤ Keep a reference to

    existing views ➤ Flat hierarchy ➤ Views can be referenced by multiple helpers ➤ Essentially, it allows you to tag views, setting specific behaviors
  44. ConstraintLayout 2.0 preview API ➤ Access a list of views

    ➤ pre/post layouts callbacks ➤ normal views ➤ already used ➤ barriers ➤ groups
  45. ConstraintLayout 2.0 preview COLLECTION ➤ Trampoline object ➤ forward function

    calls to referenced views ➤ setVisibility ➤ setAlpha ➤ setRotation, etc. ➤ no getter!
  46. CL 2.0 DECORATORS

  47. ConstraintLayout 2.0 preview DECORATORS ➤ Can reference views ➤ Easily

    build decorators that depends on views location / visibility / etc
  48. ConstraintLayout 2.0 preview METABALLS 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 } }
  49. Decorator Canvas ImageViews

  50. Decorator Canvas ImageViews

  51. Decorator Canvas ImageViews

  52. Metaballs Decorator

  53. Metaballs Decorator

  54. Metaballs Decorator

  55. Metaballs Decorator

  56. ConstraintLayout 2.0 preview LAYER DECORATOR ➤ Group ++ ➤ Manipulate

    graphically a collection of views ➤ Supports transforms, etc. ➤ Can be set as the bounding box of the referenced views
  57. ConstraintLayout 2.0 preview LET’S CREATE A DRAWABLE… <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

    <corners android:radius="12dp" /> <stroke android:width="2dp" android:color="@color/colorPrimary" /> <solid android:color="#ffffff" /> </shape
  58. ConstraintLayout 2.0 preview LAYER DECORATOR <android.support.constraint.Layer android:id=“@+id/layer” android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/frame"

    android:padding="32dp" app:constraint_referenced_ids=“button1,button2,button3, button4,button5” />
  59. ConstraintLayout 2.0 preview LAYER DECORATOR <android.support.constraint.Layer android:id=“@+id/layer” android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/frame"

    android:padding="32dp" app:constraint_referenced_ids=“button1,button2,button3, button4,button5” />
  60. ConstraintLayout 2.0 preview LAYER DECORATOR

  61. ConstraintLayout 2.0 preview LAYER DECORATOR

  62. ConstraintLayout 2.0 preview LAYERS : PROGRAMMATIC ACCESS Layer layer =

    findViewById(R.id.layer); layer.setRotation(angle); layer.setScaleX(1+(180 - Math.abs(angle-180))/20f); layer.setScaleY(1+(180 - Math.abs(angle-180))/20f); float shift_x = 500 * (float) Math.sin(Math.toRadians(angle*5)); float shift_y = 500 * (float) Math.sin(Math.toRadians(angle*7)); layer.setTranslationX(shift_x); layer.setTranslationY(shift_y);
  63. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  64. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  65. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  66. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  67. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  68. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  69. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  70. ConstraintLayout 2.0 preview FLY-IN DECORATOR

  71. ConstraintLayout 2.0 preview FLY IN DECORATOR @Override public void updatePostLayout(ConstraintLayout

    container) { update(); } void update(){ if (mContainer == null) { return; } mComputedCenterX = Float.NaN; mComputedCenterY = Float.NaN; View[] views = getViews(mContainer); calcCenters(); float shift = myFlyValue-1; for (int i = 0; i < mCount; i++) { View view = views[i]; int x = (view.getLeft() + view.getRight()) / 2; int y = (view.getTop() + view.getBottom()) / 2; view.setTranslationX((x - mComputedCenterX)*shift); view.setTranslationY((y - mComputedCenterY)*shift); } }
  72. ConstraintLayout 2.0 preview FLY IN DECORATOR @Override public void updatePreLayout(ConstraintLayout

    container) { if (mContainer!=container) { setFlyIn(10); ObjectAnimator.ofFloat(this, "FlyIn", 1f) .setDuration(1000).start(); } mContainer = container; } public void setFlyIn(float flyIn) { myFlyValue = flyIn; update(); }
  73. ConstraintLayout 2.0 preview FLY IN DECORATOR: XML <com.example.FlyinHelper android:id="@+id/flyinhelper" android:layout_width="match_parent"

    android:layout_height="match_parent" android:background="#F00" app:constraint_referenced_ids=“button1,button2,button3, imageView,button4" />
  74. ConstraintLayout 2.0 preview (BONUS CODE) public void calcCenters() { if

    (!(Float.isNaN(mComputedCenterX) || Float.isNaN(mComputedCenterY))) { return; } if (Float.isNaN(mCenterX) || Float.isNaN(mCenterY)) { int minx = Integer.MAX_VALUE, miny= Integer.MAX_VALUE; int maxx= Integer.MIN_VALUE,maxy= Integer.MIN_VALUE; View []views = getViews(mContainer); for (int i = 0; i < mCount; i++) { View view = views[i]; minx = Math.min(minx, view.getLeft()); miny = Math.min(miny, view.getTop()); maxx = Math.max(maxx, view.getRight()); maxy = Math.max(maxy, view.getBottom()); } mComputedCenterX = (Float.isNaN(mCenterX))?(minx + maxx) / 2:mCenterX; mComputedCenterY = (Float.isNaN(mCenterY))?(miny + maxy) / 2:mCenterY; } else { mComputedCenterY = mCenterY; mComputedCenterX = mCenterX; } }
  75. ConstraintLayout 2.0 preview CIRCULAR REVEAL <com.example.CircularRevealHelper android:id="@+id/helper" android:layout_width=“wrap_content" android:layout_height="wrap_content" android:background="@drawable/lake"

    app:constraint_referenced_ids="imageView" />
  76. ConstraintLayout 2.0 preview CIRCULAR REVEAL <com.example.CircularRevealHelper android:id="@+id/helper" android:layout_width=“wrap_content" android:layout_height="wrap_content" android:background="@drawable/lake"

    app:constraint_referenced_ids="imageView" />
  77. ConstraintLayout 2.0 preview CIRCULAR REVEAL @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; }
  78. ConstraintLayout 2.0 preview DECORATOR HELPERS ➤ Tag your views with

    behavior ➤ Encapsulate behavior ➤ Declaratively use them
  79. CL 2.0 VIRTUAL LAYOUTS

  80. ConstraintLayout 2.0 preview VIRTUAL LAYOUTS ➤ Layout the referenced views

    ➤ Still keep flat hierarchy ➤ Linear ➤ Flow
  81. ConstraintLayout 2.0 preview LINEAR ➤ Create horizontal or vertical chains

    ➤ Somewhat similar to linear layout, but as a helper
  82. ConstraintLayout 2.0 preview LINEAR <android.support.constraint.Linear android:id=“@+id/linear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:constraint_referenced_ids="button1,button2,button3"

    app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
  83. ConstraintLayout 2.0 preview LINEAR

  84. ConstraintLayout 2.0 preview <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="20dp" android:layout_marginTop="20dp" android:text="TextView"

    app:layout_constraintStart_toEndOf="@+id/linear" app:layout_constraintTop_toBottomOf="@+id/linear" />
  85. ConstraintLayout 2.0 preview LINEAR

  86. ConstraintLayout 2.0 preview FLOW ➤ Implements FlexboxLayout-like semantics ➤ Overflow

    elements will be pushed to the next row ➤ Still flat layout! ➤ Able to position outside elements relative to the ones in Flow
  87. ConstraintLayout 2.0 preview FLOW <android.support.constraint.Flow android:id="@+id/flow" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="8dp" app:constraint_referenced_ids=“button1,button2,button3,button4, button5,button6,button7,button8"

    android:layout_width="match_parent" android:layout_height="wrap_content"/>
  88. ConstraintLayout 2.0 preview REFERENCE BUTTONS <ImageView android:layout_width="200dp" android:layout_height="100dp" android:src="@drawable/background" android:scaleType="centerCrop"

    app:layout_constraintLeft_toLeftOf="@+id/button6" app:layout_constraintTop_toBottomOf="@id/button8"/>
  89. ConstraintLayout 2.0 preview FLOW

  90. ConstraintLayout 2.0 preview FLOW

  91. ConstraintLayout 2.0 preview FLOW

  92. CL 2.0 LAYOUT MANAGEMENT

  93. ConstraintLayout 2.0 preview MANAGING STATES

  94. ConstraintLayout 2.0 preview MANAGING STATES

  95. ConstraintLayout 2.0 preview STATE XML <ConstraintLayoutStates> <State android:id="@+id/small" app:constraints=“@layout/layout_small” />

    <State android:id="@+id/large" app:constraints=“@layout/layout_large” /> </ConstraintLayoutStates>
  96. ConstraintLayout 2.0 preview JAVA-SIDE @Override protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState); setContentView(R.layout.layout); cl = findViewById(R.id.root); cl.setLayoutDescription(R.xml.layout_states); }
  97. ConstraintLayout 2.0 preview JAVA-SIDE @Override protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState); setContentView(R.layout.layout); cl = findViewById(R.id.root); cl.setLayoutDescription(R.xml.layout_states); } public void change(View v) { cl.setState(closed ? R.id.large : R.id.small); closed = !closed; }
  98. ConstraintLayout 2.0 preview STATE XML : SIZE QUALIFIERS <ConstraintLayoutStates> <State

    app:constraints=“@layout/layout_small"> <Constraints app:constraints="@layout/layout_small" app:region_widthLessThan="550dp" /> <Constraints app:constraints="@layout/layout_large" app:region_widthMoreThan="450dp"/> </State> </ConstraintLayoutStates>
  99. ConstraintLayout 2.0 preview ON CONFIGURATION CHANGE @Override public void onConfigurationChanged(Configuration

    newConfig) { super.onConfigurationChanged(newConfig); cl.setState(newConfig.screenWidthDp, newConfig.screenHeightDp); }
  100. ConstraintLayout 2.0 preview LIVE RESIZE

  101. ConstraintLayout 2.0 preview LIVE RESIZE

  102. ConstraintLayout 2.0 preview LIVE RESIZE

  103. ConstraintLayout 2.0 preview LIVE RESIZE

  104. ConstraintLayout 2.0 preview LIVE RESIZE

  105. ConstraintLayout 2.0 preview LIVE RESIZE

  106. ConstraintLayout 2.0 preview CALLBACK cl.setOnConstraintsChanged(new ConstraintsChangedListener() { @Override public void

    preLayoutChange(int state,int layoutId) { TransitionManager.beginDelayedTransition(cl); } });
  107. ConstraintLayout 2.0 preview ANIMATED LIVE RESIZE (TRANSITION MANAGER)

  108. ConstraintLayout 2.0 preview ANIMATED LIVE RESIZE (TRANSITION MANAGER)

  109. ConstraintLayout 2.0 preview LAYOUT MANAGEMENT ➤ Centralize multiple layouts in

    a single XML ➤ Allows to easily initialize and deal with different representations for your layout ➤ Size qualifiers & live resize
  110. CL 2.0 FLUENT API

  111. ConstraintLayout 2.0 preview FLUENT API ➤ ConstraintSet: great to capture

    full state and manage it ➤ …But not that ideal for direct manipulation ➤ Fluent API to change layout params directly
  112. ConstraintLayout 2.0 preview FLUENT API new Constraints(view).margin(ConstraintProperties.TOP,23).apply(); Constraints.on(view) .margin(TOP, 16)

    .margin(BOTTOM, 16) .margin(LEFT, 16) .margin(RIGHT, 16) .apply(); Constraints.on(view) .center(R.id.button1, LEFT, 23, R.id.button2, RIGHT, 23,.05f) .connect(TOP,PARENT_ID, TOP, 32) .apply();
  113. ConstraintLayout 2.0 preview EXAMPLE : CENTER Constraints.on(myView) .center(R.id.button1, LEFT, R.id.button2,

    RIGHT) .horizontalBias(.5f) .top(PARENT_ID,TOP,32) .apply();
  114. ConstraintLayout 2.0 preview center(int firstID, int firstSide, int firstMargin, int

    secondId, int secondSide, int secondMargin, f centerHorizontally(int leftId, int leftSide, int leftMargin, int rightId, int rightSide, int rightMar centerHorizontallyRtl(int startId, int startSide, int startMargin, int endId, int endSide, int endMar centerVertically(int topId, int topSide, int topMargin, int bottomId, int bottomSide, int bottomMargi centerHorizontally(int toView) centerHorizontallyRtl(int toView) centerVertically(int toView) removeConstraints(int anchor) margin(int anchor, int value) goneMargin(int anchor, int value) horizontalBias(float bias) verticalBias(float bias) dimensionRatio(String ratio) visibility(int visibility) alpha(float alpha) elevation(float elevation) rotation(float rotation) rotationX(float rotationX) rotationY(float rotationY) scaleX(float scaleX) scaleY(float scaleY) CONSTRAINTS API… translationX(float translationX) translationY(float translationY) translation(float translationX, float translationY) translationZ(float translationZ) constrainHeight(int height) constrainWidth(int width) constrainMaxHeight(int height) constrainMaxWidth(int width) constrainMinHeight(int height) constrainMinWidth(int width) constrainDefaultHeight(int height) constrainDefaultWidth(int width) horizontalWeight(float weight) verticalWeight(float weight) horizontalChainStyle(int chainStyle) verticalChainStyle(int chainStyle) addToHorizontalChain(int leftId, int rightId) addToHorizontalChainRTL(int leftId, int rightId) addToVerticalChain(int topId, int bottomId) removeFromVerticalChain() removeFromHorizontalChain() connect(int startSide, int endID, int endSide, int margin
  115. ConstraintLayout 2.0 preview CONSTRAINT LAYOUT 2.0 - SUMMARY ➤ Virtual

    Layouts ➤ Layers & Transitions ➤ Decorators ➤ State management & Live Resize ➤ Fluent API for LayoutParams ➤ …more to come!
  116. THANKS! Nicolas Roard & John Hoford @camaelon @johnhoford

  117. CL 2.0 TO BE CONTINUED… … at Google IO 2018!

  118. ConstraintLayout 2.0 preview DOCUMENTATION ➤ http://www.constraintlayout.com ➤ https://developer.android.com/reference/android/support/constraint/package- summary.html ➤

    https://developer.android.com/training/constraint-layout/index.html ➤ https://codelabs.developers.google.com/codelabs/constraint-layout ➤ https://medium.com/google-developers/building-interfaces-with- constraintlayout-3958fa38a9f7