Google I/O '18 Extended In Daejeon Part1

Transcript

1. ConstraintLayout Sunflower Back to the Future Pluu Android Developer / Yanolja
2. Simple Complex LinearLayout RelativeLayout FrameLayout GridLayout TableLayout
3. Android Layouts Simple ۨ੉ইਓ਷ ઺୏ਵ۽ ҳࢿ ઺୏ਵ۽ ੋ೧ ࢿמ ޙઁо ߊࢤ Complex ۨ੉ইਓ਷ ࢎਊ ߂ ਬ૑о য۰਎ ࣻ ੓׮ ӝઓ ۨ੉ইਓ ಞ૘ӝ۽ח ࠗ੸੺
4. Preview in I/O '16 1.0 in 2017 1.1 in 2018 2.0-alpha1 in I/O '18 ConstraintLayout
5. ConstraintLayout ੘਷ ௼ӝ, ߣٜ۽ ޘ੉૑ ঋ਷ ۄ੉࠳۞ܻ API Level 9 ഐജ (99.99%) Ө਷ ҅க ҳઑܳ ਤ೧ ࢸ҅ػ ۨ੉ইਓ Android Studio ীࢲ ੘স оמ
6. Why not RelativeLayout? ConstraintLayout੉ ؊ ъ۱ ؊ ݆੉ ಴അ, ੸਷ ઺୏ ۄ੉࠳۞ܻ ഋక۽ ઁҕ Android Studio UI بҳܳ ઁҕ
7. <RelativeLayout> <ImageView/> <ImageView/> <RelativeLayout> <TextView/> <LinearLayout> <TextView/> <RelativeLayout> <EditText/> </RelativeLayout> </LinearLayout> <LinearLayout> <TextView/> <RelativeLayout> <EditText/> </RelativeLayout> </LinearLayout> <TextView/> </RelativeLayout> <LinearLayout> <Button/> <Button/> </LinearLayout> </RelativeLayout>
8. <android.suppo_.constraint.ConstraintLayout> <ImageView/> <ImageView/> <TextView/> <EditText/> <TextView/> <TextView/> <EditText/> <Bu`on/> <Bu`on/> <TextView/> </android.suppo_.constraint.ConstraintLayout> ConstraintLayout
9. Feature
10. Connection
11. Button Right Left Bottom Top
12. Attributes Relative Positioning layout_constraintStart_toStartOf layout_constraintEnd_toEndOf layout_constraintTop_toTopOf layout_constraintBottom_toBottomOf layout_constraintBaseline_toBaselineOf layout_constraintStart_toEndOf layout_constraintEnd_toStartOf layout_constraintTop_toBottomOf layout_constraintBottom_toTopOf
13. Center and Bias
14. Attributes Centering Positioning and Bias layout_constraintHorizontal_bias layout_constraintVertical_bias
15. Visibility
16. Visibility
17. Visibility (2)
18. Margins when Gone
19. android:layout_marginStart android:layout_marginEnd android:layout_marginLeft android:layout_marginTop android:layout_marginRight android:layout_marginBottom Attributes Margins layout_goneMarginStart layout_goneMarginEnd layout_goneMarginLeft layout_goneMarginTop layout_goneMarginRight layout_goneMarginBottom Margins when Gone
20. <android.suppo_.constraint.ConstraintLayout> <Bu`on android:id="@+id/bu`on3" /> <TextView app:layout_constraintCircle="@id/bu`on3" app:layout_constraintCircleAngle="45" app:layout_constraintCircleRadius="140dp" /> <TextView app:layout_constraintCircle="@id/bu`on3" app:layout_constraintCircleAngle="185" app:layout_constraintCircleRadius="80dp" /> </android.suppo_.constraint.ConstraintLayout> Circular positioning Added 1.1
21. Dimension A A A margin
22. Attributes Dimension layout_constrainedWidth="true|false"
 layout_constrainedHeight="true|false" layout_constraintWidth_min layout_constraintHeight_min
 layout_constraintWidth_max layout_constraintHeight_max Added 1.1
23. Attributes Percent Dimension layout_constraintWidth_default="spread|percent" layout_constraintHeight_default="spread|percent" wrap is Deprecated (WRAP_CONTENT and layout_constrainedWidth=true) layout_constraintWidth_percent="0~1" layout_constraintHeight_percent="0~1"
24. <android.suppo_.constraint.ConstraintLayout> <ImageView android:layout_width="0dp" android:layout_height="0dp" android:background=“@color/colorAccent" app:layout_constraintDimensionRatio="3:2" /> </android.suppo_.constraint.ConstraintLayout> Ratio Dimension
25. Attributes Ratio Dimension layout_constraintDimensionRatio="width:height"
26. Chains
27. Chains HEAD
28. Spread Spread Inside Weighted Spread Packed A B C A B C A B C A B C A B C Packed Chain with Bias Chain Style
29. Attributes Chains layout_constraintHorizontal_chainStyle
 ="spread|spread_inside|packed" layout_constraintVertical_chainStyle
 ="spread|spread_inside|packed" layout_constraintHorizontal_weight layout_constraintVertical_weight Weighted Chains
30. Helper Objects
31. Guidelines
32. Guideline Attributes android:orientation="vertical|horizontal" layout_constraintGuide_start="dimension" layout_constraintGuide_end="dimension" layout_constraintGuide_percent=“float"
33. Added 1.1 Barrier References multiple widgets as input, and creates a virtual guideline based on the most extreme widget on the specified side
34. <android.suppo_.constraint.Barrier android:id="@+id/barrier" android:layout_width="wrap_content" android:layout_height="wrap_content" app:barrierDirection="end" app:constraint_referenced_ids="tv1,tv2" /> Barrier Added 1.1
35. Barrier Attributes barrierDirection="start|top|end|bottom" barrierAllowsGoneWidgets="true|false" constraint_referenced_ids="View IDs" Added 1.1
36. Added 1.1 Group
37. Group Attributes android:visibility="visible|invisible|gone" constraint_referenced_ids="View Ids" Added 1.1
38. Attribute Priority Group Visibility Ignore reference views visibility Added 1.1
39. Added 1.1 Placeholder A Placeholder provides a virtual object which can position an existing object.
40. Placeholder Added 1.1 class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main_sta_) } fun select(v: View) { TransitionManager.beginDelayedTransition(root) placeholder.setContentId(v.id) } }
41. ConstraintSet
42. View ੗୓৬ যڌѱ Layout ೞחоܳ ܻ࠙ ConstraintLayout੉ о૑ח ઁডਸ ё୓ച ӝઓ ConstraintLayoutী ConstraintSetਸ ੸ਊ оמ ࠂࣻ੄ ConstraintSetਵ۽ ੹ജ оמ Layoutਸ Ү୓ೞח Ѫ੉ ইפ޲۽, Viewח Reload ೞ૑ ঋ਺ ConstraintSet
43. private val mConstraintSetNormal = ConstraintSet() private val mConstraintSetExpand by lazy(LazyThreadSafetyMode.NONE) { ConstraintSet().apply { load(this@MainActivity, R.layout.constraintset_expand) } } private var mShowExpandImage = false override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main_sta_) mConstraintSetNormal.clone(rootLayout) } fun toggleMode(v: View) { TransitionManager.beginDelayedTransition(rootLayout) mShowExpandImage = !mShowExpandImage applyConug()
44. super.onCreate(savedInstanceState) setContentView(R.layout.activity_main_sta_) mConstraintSetNormal.clone(rootLayout) } fun toggleMode(v: View) { TransitionManager.beginDelayedTransition(rootLayout) mShowExpandImage = !mShowExpandImage applyConug() } private fun applyConug() { if (mShowExpandImage) { mConstraintSetExpand.applyTo(rootLayout) } else { mConstraintSetNormal.applyTo(rootLayout) } }
45. ConstraintSet (load or clone) TransitionManager.beginDelayedTransition (layout) ConstraintSet#applyTo(layout) Simple Flow
46. ConstraintSet Support ConstraintLayout and ConstraintSet support API 9 TransitionManager support API 14
47. Trouble Shooting
48. Case 1 Title Sub Title View Required Title Sub Title Required View ConstraintLayout ConstraintLayout
49. <android.suppo_.constraint.ConstraintLayout> <TextView android:id="@+id/lew" /> <TextView android:id="@+id/lew2" /> <View app:layout_constraintSta__toEndOf="@+id/barrier" /> <android.suppo_.constraint.Barrier android:id="@+id/barrier" app:barrierDirection="end" app:constraint_referenced_ids="lew,lew2" /> </android.suppo_.constraint.ConstraintLayout> Case 1
50. <android.suppo_.constraint.ConstraintLayout> <TextView android:id="@+id/lew" /> <TextView android:id="@+id/lew2" /> <View app:layout_constraintSta__toEndOf="@+id/barrier" /> <android.suppo_.constraint.Barrier android:id="@+id/barrier" app:barrierDirection="end" app:constraint_referenced_ids="lew,lew2" /> </android.suppo_.constraint.ConstraintLayout> Case 1
51. Case 2 Title Short Text ConstraintLayout Required Title Required Long Text ConstraintLayout
52. Case 2 <android.suppo_.constraint.ConstraintLayout> <TextView android:id="@+id/lew" /> <TextView android:layout_width="wrap_content" app:layout_constrainedWidth="true" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1" app:layout_constraintSta__toEndOf="@id/lew" /> </android.suppo_.constraint.ConstraintLayout>
53. Case 2 <android.suppo_.constraint.ConstraintLayout> <TextView android:id="@+id/lew" /> <TextView android:layout_width="wrap_content" app:layout_constrainedWidth="true" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="1" app:layout_constraintSta__toEndOf="@id/lew" /> </android.suppo_.constraint.ConstraintLayout>
54. Case 3 View View Required Button > View Required Button > View ConstraintLayout ConstraintLayout
55. Case 3 <android.suppo_.constraint.ConstraintLayout> <TextView android:id="@+id/lew" android:layout_width="wrap_content" app:layout_constrainedWidth="true" app:layout_constraintEnd_toSta_Of="@id/barrier" app:layout_constraintSta__toSta_Of="parent" /> <ImageView android:id="@+id/lew2" android:layout_width="wrap_content" app:layout_constraintEnd_toSta_Of="@+id/right" app:layout_constraintHorizontal_bias="0" app:layout_constraintSta__toEndOf="@+id/lew" /> <Bu`on android:id="@+id/right" app:layout_constraintEnd_toEndOf="parent" /> <android.suppo_.constraint.Barrier android:id="@+id/barrier" app:barrierDirection="sta_" app:constraint_referenced_ids="lew2,right" /> </android.suppo_.constraint.ConstraintLayout>
56. Case 3 <android.suppo_.constraint.ConstraintLayout> <TextView android:id="@+id/lew" android:layout_width="wrap_content" app:layout_constrainedWidth="true" app:layout_constraintEnd_toSta_Of="@id/barrier" app:layout_constraintSta__toSta_Of="parent" /> <ImageView android:id="@+id/lew2" android:layout_width="wrap_content" app:layout_constraintEnd_toSta_Of="@+id/right" app:layout_constraintHorizontal_bias="0" app:layout_constraintSta__toEndOf="@+id/lew" /> <Bu`on android:id="@+id/right" app:layout_constraintEnd_toEndOf="parent" /> <android.suppo_.constraint.Barrier android:id="@+id/barrier" app:barrierDirection="sta_" app:constraint_referenced_ids="lew2,right" /> </android.suppo_.constraint.ConstraintLayout>
57. ConstraintLayout 2.0
58. MotionLayout A subclass of ConstraintLayout
59. MotionLayout <View>
60. MotionLayout <View>
61. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet>
62. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute
63. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch>
64. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch> <Helper>
65. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch> <Helper>
66. begin end Keyframe
67. Keyframe begin end
68. MotionLayout <View> MotionScene <ConstraintSet> <ConstraintSet> CustomAttribute CustomAttribute <OnTouch> <KeyFrameSet> KeyAttribute KeyPosition <Helper>
69. ConstraintLayout Easily create User Interface Flexible layout Flat hierarchies UI Builder Back compatible starting from API 9 (99.99% of devices) Support library : ~160Kb
70. Pluu Help pluulove@gmail.com Thank you! @pluulove / Yanolja