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.5k
Backends for Frontends を適用した話
egugue
1
1.2k
Robolectricの @Configを共通化する方法
egugue
0
850
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A designer walks into a library…
pauljervisheath
207
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Thoughts on Productivity
jonyablonski
69
4.8k
Balancing Empowerment & Direction
lara
1
510
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Designing Experiences People Love
moore
142
24k
We Have a Design System, Now What?
morganepeng
53
7.7k
Optimizing for Happiness
mojombo
379
70k
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ʹରͯ͠༗ޮ • ͍ͨͩ͠υίϩͪΌΜͱݟۃΊΔ
͋Γ͕ͱ͏͍͟͝·ͨ͠