Layout ファイルののメンテナンス

by jsugai

Slide 1

Slide 1 text

Layout.xml ͷϝϯς umeda.apk #3 - Report from Google I/O 2017

Slide 2

Slide 2 text

ϨΠΞ΢τ͸ۤख

Slide 3

Slide 3 text

Α͋͘Δ ͜ΜͳϨΠΞ΢τ Google Home $150

Slide 4

Slide 4 text

΋ͬͱ৘ใྔ͕ཉ͍͠

Slide 5

Slide 5 text

Google Home $150 50 205 22

Slide 6

Slide 6 text

Google Home $150 50 205 22 Google Pixel XL $600 1 8 7 Google Home $122 14 87 6 Google Home $89

Slide 7

Slide 7 text

ૉ௚ʹϨΠΞ΢τ

Slide 8

Slide 8 text

1. LinerLayout ᶄ 2. ImageView 4. TextView 5. TextView 3. LinerLayout Google Home $150 50 205 22 ᶄ ᶅ ᶆ 6. ImageView + TextView 7. ImageView + TextView 8. ImageView + TextView

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

                                                    ௕͗͢ -JOF

Slide 11

Slide 11 text

Θ͔Γʹ͗͘͢ ϝϯςͨ͘͠ͳ͍

Slide 12

Slide 12 text

ରࡦ·ͱΊͯ͘

Slide 13

Slide 13 text

5&95 ImageView TextView 5&95 TextView:drawableStart TextView:text TextView ViewGroup(LinearLayout/RelativeLayout/etc...)

Slide 14

Slide 14 text

`make money` Ϙλϯ App Icon & Folder ྫ

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

                                        -JOF

Slide 17

Slide 17 text

ରࡦೖΕࢠΛݮΒ͢

Slide 18

Slide 18 text

https://github.com/google/flexbox-layout ʮapp:flexWrap="wrap"ʯ ͜Ε͚ͩͰ΋࢖͑͗͢Δ PercentRelativeLay΍ͭͷ͜ͱ͸๨ΕΖ

Slide 19

Slide 19 text

                                  -JOF ʢωετΛݸݮʣ

Slide 20

Slide 20 text

ConstraintLayout

Slide 21

Slide 21 text

https://developer.android.com/topic/libraries/support-library/revisions.html

Slide 22

Slide 22 text

                              -JOF Ͱ΋ωετ͸Ұ൪গͳ͍

Slide 23

Slide 23 text

$POTUSBJOU͸6*Ͱ  ௐ੔͕Ͱ͖ΔΜͰ 7JFXͷ਺͸ Ұ൪গͳ͍Ͱ͢

Slide 24

Slide 24 text

ରࡦ ൃ૝Λม͑ͯ ϨΠΞ΢τॻ͔ͳ͍

Slide 25

Slide 25 text

-JUIP

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

EOF XML EOF EOF

Slide 28

Slide 28 text

@LayoutSpec  public class ListItemSpec {    @OnCreateLayout  static ComponentLayout onCreateLayout(  ComponentContext c,  @Prop String name,  @Prop String price,  @Prop(optional = true) Drawable photo) {    final ComponentLayout column = Column.create(c)  .marginDip(YogaEdge.LEFT, 16)  .child(  Text.create(c)  .text(name)  .textSizeSp(24)  )  .child(  Text.create(c)  .text(price)  .textSizeSp(16)  )  .child(  Row.create(c)  .marginDip(YogaEdge.TOP,4)  .child(  Image.create(c)  .drawableRes(R.drawable.ic_comment)  .withLayout()  .marginDip(YogaEdge.RIGHT,4)  .heightDip(20)  .widthDip(20)  )  .child(  Text.create(c)  .text("700")  .textSizeSp(14)  )  .child(  Image.create(c)  .drawableRes(R.drawable.ic_thumb_up)  .withLayout()  .marginDip(YogaEdge.RIGHT,4)  ... ... ... ALL Programming

Slide 29

Slide 29 text

੺࿮ͷൣғશମͰ7JFX͕ݸ

Slide 30

Slide 30 text

1SPT$POT

Slide 31

Slide 31 text

Pros • ϨΠΞ΢τ͕γϯϓϧʢ͔ͯҰݸʣ • ׳ΕͨΒॻ͖΍͍͢ • એݴతʹॻ͚Δ • Fresco ͱ΋૬ੑ͕ྑ͍ • ϨΠΞ΢τ͸ Flexbox CSSతͳߟ͑ํ

Slide 32

Slide 32 text

Cons • ॻ͖׵͑Δͷ͕େม • αϯϓϧ௨Γʹॻ͍ͯ΋ಈ͔ͳ͍Օॴུ͕ • Ankoͷํ͕ͱ͖ͬͭ΍͍͢ • Fresco Λ࢝Ί FB ੡OSS໨നԡ͠ͷTutorial • ͪΐͬͱಠಛͳۭؾ Yoga ͸FB੡͕ͩผͷϥΠϒϥϦ (Glide ͱ͔ Picasso ͷํ͕)

Slide 33

Slide 33 text

-JUIPͲ͏Α ݁࿦ : Litho ࢖͏ͳΒAnko Ͱ͍͍