James Williams - Demystifying Constraint Layout - Codemotion Milan 2017
72
1
-
Upload
codemotion -
Category
Technology
-
view
101 -
download
0
Transcript of 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
