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
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Designing for Performance
lara
609
69k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Site-Speed That Sticks
csswizardry
10
670
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Statistics for Hackers
jakevdp
799
220k
What's in a price? How to price your products and services
michaelherold
246
12k
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ʹରͯ͠༗ޮ • ͍ͨͩ͠υίϩͪΌΜͱݟۃΊΔ
͋Γ͕ͱ͏͍͟͝·ͨ͠