Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FlexboxLayoutの紹介
Search
えぐ
August 05, 2016
2
330
FlexboxLayoutの紹介
umeda.apk #2での発表資料です
えぐ
August 05, 2016
Tweet
Share
More Decks by えぐ
See All by えぐ
KotshiからMoshi-codegenに 乗り換えた経緯
egugue
0
2.4k
Annotationを利用した現在時刻のテスト
egugue
0
870
エンジニアにしてもよいこと エンジニアからお願いしたいこと
egugue
0
180
コードで事前条件を表明する
egugue
3
3.6k
Backends for Frontends を適用した話
egugue
1
1.2k
Robolectricの @Configを共通化する方法
egugue
0
850
Featured
See All Featured
Side Projects
sachag
455
43k
For a Future-Friendly Web
brad_frost
180
9.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Building an army of robots
kneath
306
46k
How GitHub (no longer) Works
holman
315
140k
Designing for Performance
lara
610
69k
Transcript
FlexboxLayout ͷհ Umeda.apk #2 2016/8/5
ࣗݾհ • ֎ࢁ ࣏༝ (@duane0728) • Ϡϑʔגࣜձࣾ • גࣜձࣾGYAOʹग़த •
GYAOΞϓϦͷ։ൃ୲
͢͜ͱ • FlexboxLayoutʹ͍ͭͯ • attributeͷҰ෦Λհ • FlexboxLayoutΛ͏ͱ༗ޮͳέʔε • ༻͢Δࡍͷҙ
FlexboxLayout
FlexboxLayout FlexboxLayout • CSSͷFlexboxͱ΄΅ಉ͡ػೳΛఏڙ͢ΔϨΠΞτ • LinearLayout + ΑΓॊೈͳϨΠΞτ • Google
https://github.com/google/flexbox-layout
FlexboxLayout ద༻Ͱ͖Δattributes • flexDirection • flexWrap • justifyContent • etc…
ࣗʹରͯ͠ ࢠViewʹରͯ͠ • layout_order • layout_flexGrow • layout_flexBasicPercent • etc…
<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>
<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>
ৄࡉREADMEΛࢀর
FlexboxLayout Flexbox Playground • FlexboxLayout͕ͲͷΑ͏ʹಈ͘ͷ͔ ֬ೝͰ͖ΔαϯϓϧΞϓϦ • ৮ͬͯΈΕಈ͖͕େମΘ͔Δ
attributeͷҰ෦Λհ
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore
attributeͷҰ෦Λհ • ࢠViewΛฒΔํΛܾΊΔ • ͜ͷattributeʹΑͬͯmain࣠ɺcross͕ܾ࣠ఆ͞ΕΔ • ͜ͷ࣠ଞͷattributeͷಈ͖ʹӨڹ͢Δ flexDirection
row cross main cross main column
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
attributeͷҰ෦Λհ • ࢠViewΛஔ͢ΔࡍʹંΓฦ͔͢Ͳ͏͔ܾΊΔ flexWrap
nowrap wrap
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
ࢠViewΛંΓฦ͔͢Ͳ͏͔
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
ࢠViewΛંΓฦ͔͢Ͳ͏͔
attributeͷҰ෦Λհ • main࣠ʹ͓͚ΔࢠViewͷஔํ๏ΛܾΊΔ justifyContent
flex_start flex_center flex_end
֤ࢠViewͷspace͕ ִؒͱͳΔ space_between
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷஔํ๏
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷஔํ๏
layout_wrapBefore • ͜ͷattributeΛࢦఆͨ͠ࢠViewΛڧ੍తʹંΓฦ͢ • CSSͷFlexboxʹͳ͍ಠࣗattribute attributeͷҰ෦Λհ
7ʹlayout_wrapBefore 5ʹlayout_wrapBefore 2ʹlayout_wrapBefore
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷஔํ๏ ࢠViewΛڧ੍తʹંΓฦ͢Ͳ͏͔
attributeͷҰ෦Λհ • flexDirection • flexWrap • justifyContent • layout_wrapBefore ࢠViewΛฒΔํ
ࢠViewΛંΓฦ͔͢Ͳ͏͔ main࣠ʹ͓͚ΔࢠViewͷஔํ๏ ࢠViewΛڧ੍తʹંΓฦ͢Ͳ͏͔
FlexboxLayout͕༗ޮͳέʔε
FlexboxLayout͕༗ޮͳέʔε Multi Window
None
None
• Ұ෦ͷλά͕ݟ͑ͳ͍ • ରԠ͢ΔͳΒScrollViewʁ • ͰεΫϩʔϧͩͱશͯͷ λά͕ͯ͢ݟ͑ͳ͍
None
None
• flexWrap=“wrap” • ͯ͢ͷλά͕ݟΕΔ • εΫϩʔϧ͢Δඞཁͳ͠ • ࣮؆୯
FlexboxLayout͕༗ޮͳέʔε GridͳϨΠΞτ
• LinearLayoutͩͱωετ͕ ૿͑Δ • RelativeLayoutෳࡶ • GridLayoutෳࡶ
• justifyContent=“space_between” • layout_wrapBefore=“true” • ωετ1ͭ • هड़͢Δattribute࠷ݶ
FlexboxLayout͕༗ޮͳέʔε • MultiWindow • GridͳϨΠΞτ
༻͢Δࡍͷҙ
༻͢Δࡍͷҙ Multi WindowΛ͠ͳ͕Β FleboxLayoutΛௐ͍ͯͨͱ͖
None
None
༻͢Δࡍͷҙ ͋Εʁ
༻͢Δࡍͷҙ ͋ͷattributeͲ͜ʹʁ
None
༻͢Δࡍͷҙ ҙ͢Δ͜ͱ wrap͢Δઃఆඇৗʹศར͕ͩ ߹ʹΑͬͯϢʔβϏϦςΟ͕Լ͕Δ
·ͱΊ
·ͱΊ • ࠓ·Ͱ͔ͬͨ͠ϨΠΞτ͕͔ͳΓ؆୯ʹͰ͖Δ • ಛʹflexWrap=“wrap”εΰΠʂ • Multi Windowʹରͯ͠༗ޮ • ͍ͨͩ͠υίϩͪΌΜͱݟۃΊΔ
͋Γ͕ͱ͏͍͟͝·ͨ͠