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
Being A Developer After 40
akosma
90
590k
We Have a Design System, Now What?
morganepeng
53
7.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
How GitHub (no longer) Works
holman
314
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Site-Speed That Sticks
csswizardry
10
690
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimizing for Happiness
mojombo
379
70k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
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ʹରͯ͠༗ޮ • ͍ͨͩ͠υίϩͪΌΜͱݟۃΊΔ
͋Γ͕ͱ͏͍͟͝·ͨ͠