james williams - demystifying constraint layout - codemotion milan 2017

1

INTRODUCTIONI work at Udacity. I'm Curriculum Lead for Android.

2

OUR NANODEGREE PROGRAMS

Android Basics and Android

Also Data Analyst, Machine Learning, Web Dev, iOShttp://go.udacity.com/android

3

MATERIAL DESIGN FOR ANDROIDDEVELOPERS

https://www.udacity.com/course/material-design-for-android-developers--ud862

4

AGENDA

A Quick Guide to RenderingPitfalls of Some Layout ViewGroupsConstraint LayoutMore Awesomeness You Can Do With It

5

THE ANDROID VIEW CYCLE

Measure PassLayout PassDrawing the Things

6

MEASURING A VIEW

7

ONMEASURE(WIDTHMEASURESPEC,HEIGHTMEASURESPEC)

8

MEASURESPEC

modesize

9

MEASURESPEC MODES

EXACTLYAT MOSTUNSPECIFIED

10

LAYOUT OF A VIEW

11

ONLAYOUT(CHANGED, L, T, R, B)

12

DOUBLE TAXATION

13

WHY IS THIS IMPORTANT?

14

16MS

15

OKAY I'LL USE RELATIVELAYOUT

INSTEAD OF NESTEDLINEARLAYOUT

16

GRIDLAYOUT

17

CONSTRAINTLAYOUT

18

CONSTRAINTLAYOUT IS A SUPPORTLIBRARY

19

SUPPORTED BACK TO API 9(GINGERBREAD)

20

WHAT ARE CONSTRAINTS?

21

THE NEW LAYOUT EDITORDesign ViewBlueprint View

22

DESIGN VIEW

23

BLUEPRINT VIEW

24

ATTRIBUTES VIEW

25

CLEARING CONSTRAINTS

26

27

28

29

ADDING CONSTRAINTS

30

31

32

33

34

35

UNDERSTANDING THE NEWATTRIBUTES VIEW

36

37

38

39

40

MORE ABOUT MATCH_PARENT

41

42

CHAINS

43

44

45

CHAIN STYLES

46

HOW MANY DESIGNERS IN THEROOM?

47

AND HOW MANY DEVELOPERS?

48

DESIGNERS AND DEVELOPERS

49

DESIGNERS

DESIGNERS sometimes design things that are:hard to represent in the target platformdifficult to understand in static drawinds

50

DEVELOPERS

DEVELOPERS o�en optimize for tersenessand will silently drop parts of the design they don'tunderstand

51

DEALING WITH MOCKS

52

53

STRATEGIES TO CONVERT MOCKS TO AREAL UI

54

SET MARGINS INDIVIDUALLY

55

PUT THEM IN ANOTHER LAYOUT

56

USE ANDROID.WIDGET.VIEW ELEMENTSAS PLACEHOLDERS

57

ENTER VIRTUAL HELPEROBJECTS

GuidelinesBarriersGroups

58

GUIDELINES

59

60

61

BARRIERS

62

CongressVolksvertretung

63

GROUPS<android.support.constraint.Group 

              android:id="@+id/group" 

              android:layout_width="wrap_content" 

              android:layout_height="wrap_content" 

              android:visibility="visible" 

              app:constraint_referenced_ids="button4,button9" /> 

64

MOAR STUFF

65

PLACEHOLDERS

66

SETCONTENTID(…)

67

CIRCULAR POSITIONING

68

69

<Button android:id="@+id/buttonA" ... /> 

  <Button android:id="@+id/buttonB" ... 

      app:layout_constraintCircle="@+id/buttonA" 

      app:layout_constraintCircleRadius="100dp" 

      app:layout_constraintCircleAngle="45" />

70

RECAPDouble Taxation is badUse Constraint Layout for nearly ALL THE THINGS

71

QUESTIONS?

72