Google I/O '18 Extended In Daejeon Part2

Transcript

1. Again Big Bang ConstraintLayout Sunflower Pluu Android Developer / Yanolja
2. ConstraintLayout Easily create User Interface Flexible layout Flat hierarchies UI Builder Back compatible starting from API 9 (99.99% of devices) Support library : ~160Kb
3. ConstraintLayout 1.0 2017 Relative positioning Center & Bias positioning Group behavior (chains / weights) Visibility behavior (gone handling & margins) Aspect ratio ConstraintSet Guidelines
4. ConstraintLayout 1.1 2018 Improved Chains support Dimension constraints Circular constraints New Optimizer Barriers
5. build.gradle dependencies { compile ‘com.android.suppo_.constraint:constraint-layout:1.1.0' }
6. ConstraintLayout 2.0
7. Helpers
11. ConstraintHelper ӝઓ View੄ ଵઑ݅ ࣗਬ Flat hierarchy Viewח ࠂࣻ Helperী ଵઑ оמ ӝࠄ੸ਵ۽ Viewী Tagܳ ૑੿೧ ౠ੿ ز੘ਸ ࢸ੿
12. 3 main categories of helpers Layout Manipulation Post-Layout Manipulation Rendering or Decorating
13. Virtual Layouts
14. Linear horizontal / vertical chains ࢤࢿ Helper ੉૑݅, LinearLayout җ ࠺त
15. <android.suppo_.constraint.Linear android:id="@+id/linear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:constraint_referenced_ids="bumon1,bumon2,bumon3" app:layout_constraintBomom_toBomomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintSta__toSta_Of="parent" app:layout_constraintTop_toTopOf="parent" />
16. <android.suppo_.constraint.Linear android:id="@+id/linear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:constraint_referenced_ids="bumon1,bumon2,bumon3" app:layout_constraintBomom_toBomomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintSta__toSta_Of="parent" app:layout_constraintTop_toTopOf="parent" /> <android.suppo_.constraint.Linear android:id="@+id/linear" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" app:constraint_referenced_ids="bumon1,bumon2,bumon3" app:layout_constraintBomom_toBomomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintSta__toSta_Of="parent" app:layout_constraintTop_toTopOf="parent" />
17. 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
18. Post Layout effects
19. Layers
20. 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
22. Circular Reveal
23. Circular Reveal Use existing circular reveal code …but handles the math for you only applies to referenced views
24. Decorators
25. Decorators Can reference views Easily build decorators Depends on view location / visibility / etc
28. Lava Decorator
29. Bottom Panel
31. All Together
34. Helpers Tag your views Encapsulate & Reuse behavior Declaratively use them
35. Layout Management
36. Managing States
37. 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) }
38. State XML <ConstraintLayoutState> <State android:id="@+id/small" app:constraints="@layout/layout_small" /> <State android:id="@+id/large" app:constraints="@layout/layout_large" /> </ConstraintLayoutState>
39. 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 }
40. 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
41. State XML : Size Qualifiers <ConstraintLayoutState xmlns:app="hmp://schemas.android.com/apk/res-auto"> <State app:constraints="@layout/layout_small"> <Constraints app:constraints="@layout/layout_small" app:region_widthLessTahn="550dp" /> <Constraints app:constraints="@layout/layout_large" app:region_widthMoreTahn="450dp" /> </State> </ConstraintLayoutState>
42. override fun onConwgurationChanged(newConwg: Conwguration?) { super.onConwgurationChanged(newConwg) cl.setState(newConwg?.screenWidthDp, newConwg?.screenHeightDp) }
43. Live Resize
44. cl.setOnConstraintsChanged(object : ConstraintsChangedListener() { override fun preLayoutChange(stateId: Int, constraintId: Int) { TransitionManager.beginDelayedTransition(cl) } }) Callback
45. Animated live Resize
46. 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
47. ConstraintLayout 2.0 Helpers API Virtual Layouts, Decorators Resize Motion Layouts
48. MotionLayout A subclass of ConstraintLayout
49. MotionLayout <View>
50. MotionLayout <View>
51. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet>
52. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute
53. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch>
54. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch> <Helper>
55. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch> <Helper>
56. begin end Keyframe
57. Keyframe begin end
58. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch> <KeyFrameSet> KeyAttribute KeyPosition <Helper>
59. motion.xml <android.suppo_.constraint.motion.MotionLayout app:layoutDescription="@xml/scene_20"> <ImageView /> <TextView /> <ImageBumon /> <TextView /> <ImageView /> <com.google.androidstudio.motionlayoutexample.helpers.
 ExampleFlyinBounceHelper app:constraint_referenced_ids=“imageView9" /> </android.suppo_.constraint.motion.MotionLayout> https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/layout/motion_20_reveal.xml
60. scene_20.xml https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/xml/scene_20.xml <MotionScene> <ConstraintSet android:id="@+id/sta_"> <Constraint android:id="@id/imageView8" android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginEnd="0dp" 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" /> … </ConstraintSet> <ConstraintSet android:id=“@+id/end"> <Constraint android:id="@id/imageView8" android:layout_width="0dp" android:layout_height="326dp" android:layout_marginTop="0dp" android:layout_marginBomom="-1dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> … </ConstraintSet>
61. 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" /> … </ConstraintSet> android:layout_marginBomom="-1dp" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> … </ConstraintSet> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetSta_="@+id/sta_" motion:duration="1000" motion:interpolator="linear"> <OnSwipe motion:touchAnchorId="@+id/imageView8" motion:touchAnchorSide="bomom" motion:dragDirection="dragUp" />
62. https://github.com/googlesamples/android-ConstraintLayoutExamples/blob/master/motionlayout/src/main/res/xml/scene_20.xml <OnSwipe motion:touchAnchorId="@+id/imageView8" motion:touchAnchorSide="bomom" motion:dragDirection="dragUp" /> <KeyFrameSet> <KeyAmribute android:rotation="0" motion:framePosition="1" motion:target="@id/imageView9" /> <KeyPosition motion:framePosition="27" motion:percentX="-0.2585034" motion:percentY="0.50630915" motion:target="@id/imageView9" motion:type="deltaRelative" /> </KeyFrameSet> </Transition> </MotionScene>
63. Motion Editor Tooling for animations
65. 1.Create start Layout 2.Create end Layout 3.Enjoy the animation 4.Add KeyFrames 5.Repeat
69. Pluu Help pluulove@gmail.com Thank you! @pluulove / Yanolja