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
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Documentation Writing (for coders)
carmenintech
74
5k
Bash Introduction
62gerente
615
210k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
How GitHub (no longer) Works
holman
315
140k
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ʹରͯ͠༗ޮ • ͍ͨͩ͠υίϩͪΌΜͱݟۃΊΔ
͋Γ͕ͱ͏͍͟͝·ͨ͠