Tweet
Tweet

Slide 1

Slide 1 text

Again Big Bang ConstraintLayout Sunflower Pluu Android Developer / Yanolja

Slide 2

Slide 2 text

ConstraintLayout Easily create User Interface Flexible layout Flat hierarchies UI Builder Back compatible starting from API 9 (99.99% of devices) Support library : ~160Kb

Slide 3

Slide 3 text

ConstraintLayout 1.0 2017 Relative positioning Center & Bias positioning Group behavior (chains / weights) Visibility behavior (gone handling & margins) Aspect ratio ConstraintSet Guidelines

Slide 4

Slide 4 text

ConstraintLayout 1.1 2018 Improved Chains support Dimension constraints Circular constraints New Optimizer Barriers

Slide 5

Slide 5 text

build.gradle dependencies { compile ‘com.android.suppo_.constraint:constraint-layout:1.1.0' }

Slide 6

Slide 6 text

ConstraintLayout 2.0

Slide 7

Slide 7 text

Helpers

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

ConstraintHelper ӝઓ View੄ ଵઑ݅ ࣗਬ Flat hierarchy Viewח ࠂࣻ Helperী ଵઑ оמ ӝࠄ੸ਵ۽ Viewী Tagܳ ૑੿೧ ౠ੿ ز੘ਸ ࢸ੿

Slide 12

Slide 12 text

3 main categories of helpers Layout Manipulation Post-Layout Manipulation Rendering or Decorating

Slide 13

Slide 13 text

Virtual Layouts

Slide 14

Slide 14 text

Linear horizontal / vertical chains ࢤࢿ Helper ੉૑݅, LinearLayout җ ࠺त

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Flow Implements FlexboxLayout-like semantics Overflow elements will be pushed to the next row Still flat layout! Able to position outside elements relative to the ones in Flow

Slide 18

Slide 18 text

Post Layout effects

Slide 19

Slide 19 text

Layers

Slide 20

Slide 20 text

Layers Hide / Show / Lock elements in the editor Manipulate graphically a collection of views Supports transforms, etc. Can be set as the bounding box of the referenced views

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Circular Reveal

Slide 23

Slide 23 text

Circular Reveal Use existing circular reveal code …but handles the math for you only applies to referenced views

Slide 24

Slide 24 text

Decorators

Slide 25

Slide 25 text

Decorators Can reference views Easily build decorators Depends on view location / visibility / etc

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Lava Decorator

Slide 29

Slide 29 text

Bottom Panel

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

All Together

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Helpers Tag your views Encapsulate & Reuse behavior Declaratively use them

Slide 35

Slide 35 text

Layout Management

Slide 36

Slide 36 text

Managing States

Slide 37

Slide 37 text

Before private val constraintSet1 by lazy { ConstraintSet() } private val constraintSet2 by lazy { ConstraintSet() } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // get constraints from layout constraintSet2.clone(this, R.layout.layout_small) setContentView(R.layout.layout_large) // get constraints from ConstraintSet constraintSet1.clone(mConstraintLayout) }

Slide 38

Slide 38 text

State XML

Slide 39

Slide 39 text

After override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.layout) root.setLayoutDescription(R.xml.state) } fun toogle(v: View) { TransitionManager.beginDelayedTransition(root) root.setState(if (closed) R.id.large else R.id.small, 1080, 1920) closed = !closed }

Slide 40

Slide 40 text

More After override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.layout) root.setLayoutDescription(R.xml.state) } fun toogle(v: View) { TransitionManager.beginDelayedTransition(root) root.setState(if (closed) R.id.large else R.id.small, 1080, 1920) closed = !closed } Defined in XML

Slide 41

Slide 41 text

State XML : Size Qualifiers

Slide 42

Slide 42 text

override fun onConwgurationChanged(newConwg: Conwguration?) { super.onConwgurationChanged(newConwg) cl.setState(newConwg?.screenWidthDp, newConwg?.screenHeightDp) }

Slide 43

Slide 43 text

Live Resize

Slide 44

Slide 44 text

cl.setOnConstraintsChanged(object : ConstraintsChangedListener() { override fun preLayoutChange(stateId: Int, constraintId: Int) { TransitionManager.beginDelayedTransition(cl) } }) Callback

Slide 45

Slide 45 text

Animated live Resize

Slide 46

Slide 46 text

Layout Management Centralize multiple layouts in a single XML Allows to easily initialize and deal with different representations for your layout Size qualifiers & live resize

Slide 47

Slide 47 text

ConstraintLayout 2.0 Helpers API Virtual Layouts, Decorators Resize Motion Layouts

Slide 48

Slide 48 text

MotionLayout A subclass of ConstraintLayout

Slide 49

Slide 49 text

MotionLayout

Slide 50

Slide 50 text

MotionLayout

Slide 51

Slide 51 text

MotionLayout MotionScene

Slide 52

Slide 52 text

MotionLayout MotionScene CustomAttribute CustomAttribute

Slide 53

Slide 53 text

MotionLayout MotionScene CustomAttribute CustomAttribute

Slide 54

Slide 54 text

MotionLayout MotionScene CustomAttribute CustomAttribute

Slide 55

Slide 55 text

MotionLayout MotionScene CustomAttribute CustomAttribute

Slide 56

Slide 56 text

begin end Keyframe

Slide 57

Slide 57 text

Keyframe begin end

Slide 58

Slide 58 text

MotionLayout MotionScene CustomAttribute CustomAttribute KeyAttribute KeyPosition

Slide 59

Slide 59 text

motion.xml https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/layout/motion_20_reveal.xml

Slide 60

Slide 60 text

scene_20.xml https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/xml/scene_20.xml … …

Slide 61

Slide 61 text

https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/xml/scene_20.xml motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintSta__toSta_Of="parent" motion:layout_constraintTop_toTopOf="parent" motion:layout_editor_absoluteX="0dp" motion:layout_editor_absoluteY=“0dp" /> … android:layout_marginBomom="-1dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> …

Slide 62

Slide 62 text

https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/xml/scene_20.xml

Slide 63

Slide 63 text

Motion Editor Tooling for animations

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

1.Create start Layout 2.Create end Layout 3.Enjoy the animation 4.Add KeyFrames 5.Repeat

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

Pluu Help [email protected] Thank you! @pluulove / Yanolja