ConstraintLayout

We shall be discussing about the new view group provided by the android team from google and presented during Google I/O 2016 by Nicolas Roard & John Hoford.

Transcript

1. Constraint layout Dakar Android User Group
2. Common viewGroups • FrameLayout : single child view, useful when overlaying content • LinearLayout : aligns children in single direction • RelativeLayout : align view relative to each other or to the parent
3. Inflation of views - Depth-first traversal
4. Measure - (onMeasure()) Phase • When a view group is measured, it also measures it’s children. Provides the size of each parent view with it’s children I.e how big a view should be. Parent measure each child Child calculates measured width and height Measure own (if any) children
5. Layout - (onLayout()) Phase • each ViewGroup determines the position of it’s children with respect to to the size of measured Parent sizes and positions child
6. Draw - (onDraw()) Phase • for each object in the view tree, a canvas object is created to send a list of drawing commands to the GPU (using size and positions). parent draws Parent tells children to draw
7. What is a constraint ? A rule that specifies how properties of views relate to each other. For example, we might want the views to be aligned along their top edge.
8. Cassowary algorithm Constraints are expressed as a set of equations: a[1]x[1] + …… + a[n]x[n] = b a[1]x[1] + …… + a[n]x[n] <= b a[1]x[1] + …… + a[n]x[n] >= b
9. Constraint layout Released on google I/O 2016 Small library ~ 130kb Linear equation solver i.e all constraints are expressed in terms of mathematical equations
10. How does it work ? Layout editor Inference model Constraint model
11. Dimension layout_constraint<…>_to_<…>, constraintLeft_toLeftOf • Fixed • Wrap-content • Match constraints (0dp) • Match parent ???
12. Relative positioning baseline bias Chains
13. Guideline • Specify exact positioning or percent value • Virtual views which can be used as our layout parameters
14. Helpers • Barrier • Group