ConstraintLayout_devfest.pdf

This talk will be held at the GDG Devfest, Romainia in Bucharest on Nov, 25th.

Transcript

2. Why yet another layout • Flat hierarchy – Simpler layouts – Faster
3. Basics • Normal ViewGroup • Similar to RelativeLayout – But more flexible • Similar to iOS' AutoLayout – But less crazy • Separate library (like RecyclerView) • Backwards compatible to v9 (yikes!)
4. Project Initialization compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4' • Android Studio 2.2 or later • Up to date Android Support Repository • Build.gradle: • Default for new projects in 2.3 canary
5. What are Constraints • Define appearence of view with repect to – Size – Position – Visibility
6. Concepts • Cassowary algorithm – Used also in Apple's AutoLayout • iOS 6 / iPhone 5 – before for OS X development – And on the web
7. Concepts • Cassowary algorithm – Used also in Apple's AutoLayout • iOS 6 / iPhone 5 – before for OS X development – And on the web
8. Concepts • New LayoutEditor – Blueprint and preview view – Create constraints – Define properties • XML still usable – Good for pull requests / code reviews
11. View sizes • wrap_content • fixed sized • Stretched (0dp) • no match_parent – AS eventually will change this to 0dp
12. Visibility • View.GONE • As the view taking up 0dp size • No margin • Extra margins to View.GONE targets possible – For example: layout_goneMarginStart="16dp" – Currently XML only
13. Guidelines • Proper views – But • 0dp sized • Not drawn • Not layouted • Can represent percentages
14. Chains • Created by constraining views to each other • Useful for – positioning the chain itself – Creating views of the same size – Spreading views equally • Default: Spread
15. wrap_content • CL can be set to wrap_content • Uses sizes defined with android:minWith android:minHeight
16. CL programmatically • Use ConstraintSet • Works great when cloning from a layout • Not so much when trying to do everything by code
17. CL programmatically ConstraintSet set = new ConstraintSet(); set.clone(container); set.clear(R.id.btn_ok, ConstraintSet.START); set.connect(R.id.btn_ok, ConstraintSet.END, R.id.constraintLayout, ConstraintSet.END, 48); set.applyTo(container);
18. CL programmatically ConstraintSet set = new ConstraintSet(); set.clone(container); set.clear(R.id.btn_ok); set.constrainHeight(R.id.btn_ok, ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_ok, ConstraintSet.WRAP_CONTENT); set.connect(R.id.btn_ok, ConstraintSet.END, R.id.constraintLayout, ConstraintSet.END, 48); set.applyTo(container);
19. CL programmatically ConstraintSet set = new ConstraintSet(); set.clone(container); set.clear(R.id.btn_ok); set.constrainHeight(R.id.btn_ok, ConstraintSet.WRAP_CONTENT); set.constrainWidth(R.id.btn_ok, ConstraintSet.WRAP_CONTENT); set.connect(R.id.btn_ok, ConstraintSet.END, R.id.constraintLayout, ConstraintSet.END, 48); set.applyTo(container);
20. Packages
21. Packages
22. CL vs. AutoLayout Maybe I'm a bit biased, but...
28. CL vs. AutoLayout • CL much simpler to handle • CL less powerful – Inequalities and priorities • Android's XML easier to understand • No guidelines in AutoLayout
29. Some bugs • Sometime heavy on CPU (especially device view) while designing • Layout preview wrong for unconstrained views • Textalignment neglected in blueprint design • Layout editor creates left/right instead of start/end • AutoConnect sometimes leaves views unconstrained • Chain preview in blueprint is broken
30. Missing features • Zoom with Ctrl-Mousewheel – This is a must have for the editor's usability • Indicator for chains in component tree
31. Some nice to haves • 0dp as possible size in editor drop-down • Yellow instead of red indicator for lint warnings
32. Future work • Performance enhancements • Logical containers ConstraintLayout is available as a support library ... As such, we are planning in enriching its API and capabilities over time. https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
33. More Material • Google IO talk about ConstraintLayout: https://www.youtube.com/watch?v=sO9aX87hq9c • CodeLab by Google: https://codelabs.developers.google.com/codelabs/constraint- layout/index.html
34. Even More Material • Google training https://developer.android.com/training/constraint-layout/index.html • Layout Editor User Guide https://developer.android.com/studio/write/layout-editor.html • API reference https://developer.android.com/reference/android/support/constraint/package- summary.html