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

Advanced ConstraintLayout

Advanced ConstraintLayout

ConstraintLayout 1.0 made building flexible UI easy, with a deep integration in the Android Studio layout editor. The recently introduced 1.1 version is bringing even more flexibility, with new capabilities like barriers or groups. This talk will take a deeper look at the current state of the library, why you should use it and when: architecture, performance behavior, examples of complex UI, animation capabilities and discussing some upcoming features.

presented at 360 AnDev 2017

Nicolas Roard

July 13, 2017
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. What is it • Expressive Layout Manager • Flat Layouts

    • Deep integration with Android Studio + Layout Editor • Unbundled Library • Compatible with 99% of devices
  2. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView />

    <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
  3. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView />

    <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout>
  4. The Tetris Model • Change is hard • Impose limits

    for animation / transitions • Not conductive to a great design tool experience • Performance can become an issue
  5. Flat Layouts • Layout definition is not mixed with the

    view hierarchy • Easy to manipulate in a graphical editor • Easy to change • Animation friendly • Keep layout computation in a single place
  6. <RelativeLayout > <ImageView /> <ImageView /> <RelativeLayout > <TextView />

    <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <LinearLayout > <TextView /> <RelativeLayout > <EditText /> </RelativeLayout> </LinearLayout> <TextView /> </RelativeLayout> <LinearLayout > <Button /> <Button /> </LinearLayout> </RelativeLayout> <android.support.constraint.ConstraintLayout> <ImageView /> <ImageView /> <TextView /> <EditText /> <TextView /> <TextView /> <EditText /> <Button /> <Button /> <TextView /> </android.support.constraint.ConstraintLayout>
  7. Simplex • Linear Programming • Invented by Georges Dantzig in

    1947 • Large, empty matrices representing the equations
  8. Example Minimize Constrained by Z x y z s t

    = Basic Feasible Solution (BFS) Matrix representation (plus slack variables s & t) Pivot on z, row 2 BFS Objective row
  9. Cassowary • https://constraints.cs.washington.edu/cassowary/ • Constraints for User Interface Applications •

    Alan Borning, Kim Marriott, Peter Stuckey, and Yi Xiao, Solving Linear Arithmetic, Proceedings of the 1997 ACM Symposium on User Interface Software and Technology, October 1997, pages 87-96.
  10. Cassowary • Incremental resolution and construction of the system •

    Handles positive and negative variables • Goal function and error representation
  11. Pros / Cons • Very flexible, can represent any type

    of layout situation • But “relatively” heavy computation compared to simple layouts • Can be more memory intensive • Specifying layout via equations?…
  12. ConstraintLayout solver • Pure java • Represents the system matrix

    as rows of sparse arrays • Memory Efficient • Efficient incremental construction • Has to have good performances on both Dalvik and Art
  13. Constraints Model • Simple model — relative positioning, centering •

    No Equations exposed • Evolving (bias, new dimension constraints, etc.)
  14. Optimizer • Constraints which can be resolved unambiguously • app:layout_optimizationLevel=“none|all|basic|chains”

    • multiple steps: • wrap content computation • direct resolution of simple dependency • chains on parent
  15. Optimizer • match_constraint is more costly, as we need to

    remeasure • wrap_content, fixed dimension are cheap on a widget (end up as a value in the solver)
  16. Optimizer - wrap content • If widgets contain match_constraint, no

    optimizations: • if ratio is specified • if percent is specified (for dimension, guideline) • if wrap_content is specified in the other dimension
  17. Optimizer - Direct resolution • Only if the container is

    not in wrap_content • Only for widgets that are not match_constraints • Will resolve as much as it can before handing the system to the full solver
  18. Optimizer - Chains • Only for chains that are connected

    to the container (stable endpoints) • Only for widgets in a chain that are not match_constraints / ratio • Right now, only for chains in spread mode
  19. 1.0 • Relative positioning • Center positioning & bias •

    Guidelines - helper objects • Chains • Dimension constraints: min/max, Ratio • ConstraintSet
  20. 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
  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. Dimension Constraints • width|height set to 0dp (“match_constraint”) • control

    behavior with • app:layout_constraintWidth_default=“spread|wrap|percent” • spread matches endpoints • wrap behave like wrap_content, but respect constraints
  23. Percent Dimension • As a percentage of the parent container

    • Not bounded by the container • value from 0 to 1 android:layout_width="0dp" app:layout_constraintWidth_default="percent" app:layout_constraintWidth_percent="0.5"
  24. beta 1 1.1.0 maven { url "https://maven.google.com" } dependencies {

    ... compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1' }
  25. ConstraintSet • Separate views from how we layout them •

    Encapsulate all constraints in an object
  26. ConstraintSet • Separate views from how we layout them •

    Encapsulate all constraints in an object • You can apply a ConstraintSet to an existing ConstraintLayout
  27. ConstraintSet • Separate views from how we layout them •

    Encapsulate all constraints in an object • You can apply a ConstraintSet to an existing ConstraintLayout • Switch between multiple ConstraintSet
  28. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet();

    // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout);
  29. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet();

    // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
  30. Motion • Flat Hierarchy == No clipping issues • Scene

    Graph • ConstraintSet == Keyframe
  31. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet();

    // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
  32. ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new ConstraintSet();

    // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
  33. TransitionManager.beginDelayedTransition(mConstraintLayout); ConstraintSet mConstraintSet1 = new ConstraintSet(); ConstraintSet mConstraintSet2 = new

    ConstraintSet(); // get constraints from layout mConstraintSet2.clone(context, R.layout.state2); setContentView(R.layout.state1); mConstraintLayout = (ConstraintLayout) findViewById(R.id.activity_main); // get constraints from ConstraintSet mConstraintSet1.clone(mConstraintLayout); mConstraintSet1.applyTo(mConstraintLayout);
  34. ConstraintLayout : choreographer • What you can do with widgets,

    you can do with components • Everything is still the same • Flexible • Easy to build and test
  35. Custom Transitions • ConstraintSet • Custom TransitionSet • Support library

    physics TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
  36. Custom Transitions • ConstraintSet • Custom TransitionSet • Support library

    physics TransitionManager.beginDelayedTransition(cl, new MyCustomAnimationSet())
  37. What’s next • More performance optimizations • experimental background resolution

    • segmentation of constraints • broadening the optimizer surface
  38. What’s next • ConstraintHelper • Chains • Layers • Custom

    • Motion • better motion control • gesture support
  39. 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
  40. 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