Pro Yearly is on sale from $80 to $50! »

Google I/O '18 Extended In Daejeon Part2

Google I/O '18 Extended In Daejeon Part2

354271902cd8ba2762d05b251dfa0f84?s=128

pluulove (노현석)

August 04, 2018
Tweet

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

  8. None
  9. None
  10. None
  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
  21. None
  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
  26. None
  27. None
  28. Lava Decorator

  29. Bottom Panel

  30. None
  31. All Together

  32. None
  33. None
  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

  64. None
  65. 1.Create start Layout 2.Create end Layout 3.Enjoy the animation 4.Add

    KeyFrames 5.Repeat
  66. None
  67. None
  68. None
  69. Pluu Help pluulove@gmail.com Thank you! @pluulove / Yanolja