FlexboxLayoutの紹介

umeda.apk #2での発表資料です

1. FlexboxLayout ͷ঺հ Umeda.apk #2 2016/8/5
2. ࣗݾ঺հ • ֎ࢁ ࣏༝ (@duane0728) • Ϡϑʔגࣜձࣾ • גࣜձࣾGYAOʹग़޲த • GYAOΞϓϦͷ։ൃ୲౰
3. ࿩͢͜ͱ • FlexboxLayoutʹ͍ͭͯ • attributeͷҰ෦Λ঺հ • FlexboxLayoutΛ࢖͏ͱ༗ޮͳέʔε • ࢖༻͢Δࡍͷ஫ҙ఺
4. FlexboxLayout
5. FlexboxLayout FlexboxLayout • CSSͷFlexboxͱ΄΅ಉ͡ػೳΛఏڙ͢ΔϨΠΞ΢τ • LinearLayout + ΑΓॊೈͳϨΠΞ΢τ • Google੡
6. https://github.com/google/flexbox-layout
7. FlexboxLayout ద༻Ͱ͖Δattributes • flexDirection • flexWrap • justifyContent • etc… ࣗ਎ʹରͯ͠ ࢠViewʹରͯ͠ • layout_order • layout_flexGrow • layout_flexBasicPercent • etc…
8. <com.google.android.flexbox.FlexboxLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:flexWrap=“wrap" >
 
 <TextView
 style="@style/FlexItem"
 app:layout_wrapBefore="true" />
 
 <TextView
 style="@style/FlexItem"
 app:layout_minWidth=“300dp" />
 
 </com.google.android.flexbox.FlexboxLayout>
9. <com.google.android.flexbox.FlexboxLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:flexWrap=“wrap" >
 
 <TextView
 style="@style/FlexItem"
 app:layout_wrapBefore="true" />
 
 <TextView
 style="@style/FlexItem"
 app:layout_minWidth=“300dp" />
 
 </com.google.android.flexbox.FlexboxLayout>
10. ৄࡉ͸READMEΛࢀর
11. FlexboxLayout Flexbox Playground • FlexboxLayout͕ͲͷΑ͏ʹಈ͘ͷ͔
 ֬ೝͰ͖ΔαϯϓϧΞϓϦ • ৮ͬͯΈΕ͹ಈ͖͕େମΘ͔Δ
12. attributeͷҰ෦Λ঺հ
13. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore
14. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore
15. attributeͷҰ෦Λ঺հ • ࢠViewΛฒ΂Δํ޲ΛܾΊΔ • ͜ͷattributeʹΑͬͯmain࣠ɺcross͕ܾ࣠ఆ͞ΕΔ • ͜ͷ࣠͸ଞͷattributeͷಈ͖ʹӨڹ͢Δ flexDirection
16. row cross main cross main column
17. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲
18. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲
19. attributeͷҰ෦Λ঺հ • ࢠViewΛ഑ஔ͢ΔࡍʹંΓฦ͔͢Ͳ͏͔ܾΊΔ flexWrap
20. nowrap wrap
21. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲ ࢠViewΛંΓฦ͔͢Ͳ͏͔
22. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲ ࢠViewΛંΓฦ͔͢Ͳ͏͔
23. attributeͷҰ෦Λ঺հ • main࣠ʹ͓͚ΔࢠViewͷ഑ஔํ๏ΛܾΊΔ justifyContent
24. flex_start flex_center flex_end
25. ֤ࢠViewͷspace͕ ౳ִؒͱͳΔ space_between
26. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲ ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷ഑ஔํ๏
27. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲ ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷ഑ஔํ๏
28. layout_wrapBefore • ͜ͷattributeΛࢦఆͨ͠ࢠViewΛڧ੍తʹંΓฦ͢ • CSSͷFlexboxʹ͸ͳ͍ಠࣗattribute attributeͷҰ෦Λ঺հ
29. 7ʹlayout_wrapBefore 5ʹlayout_wrapBefore 2ʹlayout_wrapBefore
30. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲ ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷ഑ஔํ๏ ࢠViewΛڧ੍తʹંΓฦ͢Ͳ͏͔
31. attributeͷҰ෦Λ঺հ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒ΂Δํ޲ ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷ഑ஔํ๏ ࢠViewΛڧ੍తʹંΓฦ͢Ͳ͏͔
32. FlexboxLayout͕༗ޮͳέʔε
33. FlexboxLayout͕༗ޮͳέʔε Multi Window
36. • Ұ෦ͷλά͕ݟ͑ͳ͍ • ରԠ͢ΔͳΒScrollViewʁ • Ͱ΋εΫϩʔϧͩͱશͯͷ
 λά͕͢΂ͯݟ͑ͳ͍
39. • flexWrap=“wrap” • ͢΂ͯͷλά͕ݟΕΔ • εΫϩʔϧ͢Δඞཁͳ͠ • ࣮૷؆୯
40. FlexboxLayout͕༗ޮͳέʔε GridͳϨΠΞ΢τ
41. • LinearLayoutͩͱωετ͕
 ૿͑Δ • RelativeLayout͸ෳࡶ • GridLayout΋ෳࡶ
42. • justifyContent=“space_between” • layout_wrapBefore=“true” • ωετ͸1ͭ • هड़͢Δattribute͸࠷௿ݶ
43. FlexboxLayout͕༗ޮͳέʔε • MultiWindow • GridͳϨΠΞ΢τ
44. ࢖༻͢Δࡍͷ஫ҙ఺
45. ࢖༻͢Δࡍͷ஫ҙ఺ Multi WindowΛ͠ͳ͕Β FleboxLayoutΛௐ΂͍ͯͨͱ͖
48. ࢖༻͢Δࡍͷ஫ҙ఺ ͋Εʁ
49. ࢖༻͢Δࡍͷ஫ҙ఺ ͋ͷattributeͲ͜ʹʁ
51. ࢖༻͢Δࡍͷ஫ҙ఺ ஫ҙ͢Δ͜ͱ wrap͢Δઃఆ͸ඇৗʹศར͕ͩ ৔߹ʹΑͬͯ͸ϢʔβϏϦςΟ͕Լ͕Δ
52. ·ͱΊ
53. ·ͱΊ • ࠓ·Ͱ೉͔ͬͨ͠ϨΠΞ΢τ͕͔ͳΓ؆୯ʹͰ͖Δ • ಛʹflexWrap=“wrap”͸εΰΠʂ • Multi Windowʹରͯ͠༗ޮ • ͨͩ͠࢖͍υίϩ͸ͪΌΜͱݟۃΊΔ
54. ͋Γ͕ͱ͏͍͟͝·ͨ͠