ConstraintLayout_devfest.pdf

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Why yet another layout ● Flat hierarchy – Simpler layouts – Faster

Slide 3

Slide 3 text

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!)

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

What are Constraints ● Define appearence of view with repect to – Size – Position – Visibility

Slide 6

Slide 6 text

Concepts ● Cassowary algorithm – Used also in Apple's AutoLayout ● iOS 6 / iPhone 5 – before for OS X development – And on the web

Slide 7

Slide 7 text

Concepts ● Cassowary algorithm – Used also in Apple's AutoLayout ● iOS 6 / iPhone 5 – before for OS X development – And on the web

Slide 8

Slide 8 text

Concepts ● New LayoutEditor – Blueprint and preview view – Create constraints – Define properties ● XML still usable – Good for pull requests / code reviews

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

View sizes ● wrap_content ● fixed sized ● Stretched (0dp) ● no match_parent – AS eventually will change this to 0dp

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Guidelines ● Proper views – But ● 0dp sized ● Not drawn ● Not layouted ● Can represent percentages

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

wrap_content ● CL can be set to wrap_content ● Uses sizes defined with android:minWith android:minHeight

Slide 16

Slide 16 text

CL programmatically ● Use ConstraintSet ● Works great when cloning from a layout ● Not so much when trying to do everything by code

Slide 17

Slide 17 text

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);

Slide 18

Slide 18 text

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);

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Packages

Slide 21

Slide 21 text

Packages

Slide 22

Slide 22 text

CL vs. AutoLayout Maybe I'm a bit biased, but...

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

CL vs. AutoLayout ● CL much simpler to handle ● CL less powerful – Inequalities and priorities ● Android's XML easier to understand ● No guidelines in AutoLayout

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Missing features ● Zoom with Ctrl-Mousewheel – This is a must have for the editor's usability ● Indicator for chains in component tree

Slide 31

Slide 31 text

Some nice to haves ● 0dp as possible size in editor drop-down ● Yellow instead of red indicator for lint warnings

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

More Material ● Google IO talk about ConstraintLayout: https://www.youtube.com/watch?v=sO9aX87hq9c ● CodeLab by Google: https://codelabs.developers.google.com/codelabs/constraintlayout/index.html

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content