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

Cf72ecd4105b5818fcabcc0c0aaeee22?s=47 jsugai
June 19, 2017

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

Umeda.apk #3 の登壇資料

Cf72ecd4105b5818fcabcc0c0aaeee22?s=128

jsugai

June 19, 2017
Tweet

Transcript

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

  2. ϨΠΞ΢τ͸ۤख

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

  4. ΋ͬͱ৘ใྔ͕ཉ͍͠

  5. Google Home $150 50 205 22

  6. Google Home $150 50 205 22 Google Pixel XL $600

    1 8 7 Google Home $122 14 87 6 Google Home $89
  7. ૉ௚ʹϨΠΞ΢τ

  8. 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
  9. None
  10. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="@dimen/list_height"
 android:layout_marginTop="@dimen/small_padding_size"
 android:orientation="horizontal">


    
 <ImageView
 android:layout_width="@dimen/list_height"
 android:layout_height="@dimen/list_height"
 android:src="@mipmap/ic_launcher" />
 
 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:paddingStart="@dimen/text_paddng_right"
 tools:ignore="RtlSymmetry">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="24sp"
 android:textStyle="bold"
 tools:text="Selected Item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="20sp"
 tools:text="$200000" />
 
 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 android:paddingStart="@dimen/small_padding_size"
 android:paddingTop="@dimen/small_padding_size">
 
 <ImageView
 android:layout_width="@dimen/small_icon_size"
 android:layout_height="@dimen/small_icon_size"
 android:src="@drawable/ic_comment_black_24dp" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 tools:text="item" />
 
 <ImageView
 android:layout_width="@dimen/small_icon_size"
 android:layout_height="@dimen/small_icon_size"
 android:src="@drawable/ic_thumb_up_black_24dp" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 tools:text="item" />
 
 <ImageView
 android:layout_width="@dimen/small_icon_size"
 android:layout_height="@dimen/small_icon_size"
 android:src="@drawable/ic_favorite_black_24dp" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 tools:text="item" />
 </LinearLayout>
 </LinearLayout>
 </LinearLayout> ௕͗͢ -JOF
  11. Θ͔Γʹ͗͘͢ ϝϯςͨ͘͠ͳ͍

  12. ରࡦ·ͱΊͯ͘

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

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

  15. None
  16. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="@dimen/list_height"
 android:layout_marginTop="@dimen/small_padding_size"
 android:orientation="horizontal">


    
 <ImageView
 android:layout_width="@dimen/list_height"
 android:layout_height="@dimen/list_height"
 android:src="@mipmap/ic_launcher"
 />
 
 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:paddingStart="@dimen/text_paddng_right"
 tools:ignore="RtlSymmetry">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="24sp"
 tools:text="Selected Item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textSize="20sp"
 tools:text="$200000" />
 
 <LinearLayout
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="horizontal"
 android:paddingStart="@dimen/small_padding_size"
 android:paddingTop="@dimen/small_padding_size">
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingStart="@dimen/text_paddng_left"
 android:paddingEnd="@dimen/text_paddng_right"
 android:drawableStart="@drawable/ic_comment_black_24dp"
 tools:text="item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingStart="@dimen/text_paddng_left"
 android:paddingEnd="@dimen/text_paddng_right"
 android:drawableStart="@drawable/ic_thumb_up_black_24dp"
 tools:text="item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:paddingStart="@dimen/text_paddng_left"
 android:paddingEnd="@dimen/text_paddng_right"
 android:drawableStart="@drawable/ic_favorite_black_24dp"
 tools:text="item" />
 </LinearLayout>
 </LinearLayout>
 </LinearLayout> -JOF 
  17. ରࡦೖΕࢠΛݮΒ͢

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

  19. <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="@dimen/list_height"
 android:layout_marginTop="@dimen/small_padding_size"


    android:orientation="horizontal">
 
 <ImageView
 android:layout_width="@dimen/list_height"
 android:layout_height="@dimen/list_height"
 android:src="@mipmap/ic_launcher" />
 
 <com.google.android.flexbox.FlexboxLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:paddingStart="@dimen/text_paddng_right"
 app:flexWrap="wrap">
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="24sp"
 android:textStyle="bold"
 tools:text="Selected Item" />
 
 <TextView
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:textSize="20sp"
 tools:text="$200000" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:drawableStart="@drawable/ic_comment_black_24dp"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 tools:text="item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:drawableStart="@drawable/ic_thumb_up_black_24dp"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 tools:text="item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:drawableStart="@drawable/ic_favorite_black_24dp"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 tools:text="item" />
 </com.google.android.flexbox.FlexboxLayout>
 </LinearLayout> -JOF  ʢωετΛݸݮʣ
  20. ConstraintLayout

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

  22. <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http:// schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="@dimen/list_height"


    android:layout_marginTop="@dimen/small_padding_size"
 android:orientation="horizontal">
 
 <ImageView
 android:id="@+id/imageView"
 android:layout_width="80dp"
 android:layout_height="80dp"
 android:src="@mipmap/ic_launcher"
 tools:layout_editor_absoluteY="0dp"
 android:layout_marginLeft="8dp"
 app:layout_constraintLeft_toLeftOf="parent" />
 
 <TextView
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:textSize="24sp"
 android:textStyle="bold"
 app:layout_constraintLeft_toRightOf="@+id/imageView"
 tools:layout_editor_absoluteY="0dp"
 tools:text="Selected Item" />
 
 <TextView
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:textSize="20sp"
 app:layout_constraintLeft_toRightOf="@+id/imageView"
 tools:layout_editor_absoluteY="28dp"
 tools:text="$200000" />
 
 <TextView
 android:id="@+id/textView"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:drawableStart="@drawable/ic_comment_black_24dp"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 app:layout_constraintLeft_toRightOf="@+id/imageView"
 tools:layout_editor_absoluteY="56dp"
 tools:text="item" />
 
 <TextView
 android:id="@+id/textView2"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:drawableStart="@drawable/ic_thumb_up_black_24dp"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 app:layout_constraintLeft_toRightOf="@+id/textView"
 tools:layout_editor_absoluteY="56dp"
 tools:text="item" />
 
 <TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="8dp"
 android:drawableStart="@drawable/ic_favorite_black_24dp"
 android:paddingEnd="@dimen/text_paddng_right"
 android:paddingStart="@dimen/text_paddng_left"
 app:layout_constraintLeft_toRightOf="@+id/textView2"
 tools:layout_editor_absoluteY="56dp"
 tools:text="item" />
 
 </android.support.constraint.ConstraintLayout> -JOF Ͱ΋ωετ͸Ұ൪গͳ͍
  23. $POTUSBJOU͸6*Ͱ
 ௐ੔͕Ͱ͖ΔΜͰ 7JFXͷ਺͸ Ұ൪গͳ͍Ͱ͢

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

  25. -JUIP

  26. None
  27. <!-- activity_main.xml--> EOF XML <!-- fragment_main.xml--> EOF <!-- recycler_item.xml--> EOF

  28. @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
  29. ੺࿮ͷൣғશମͰ7JFX͕ݸ

  30. 1SPT$POT

  31. Pros • ϨΠΞ΢τ͕γϯϓϧʢ͔ͯҰݸʣ • ׳ΕͨΒॻ͖΍͍͢ • એݴతʹॻ͚Δ • Fresco ͱ΋૬ੑ͕ྑ͍

    • ϨΠΞ΢τ͸ Flexbox CSSతͳߟ͑ํ
  32. Cons • ॻ͖׵͑Δͷ͕େม • αϯϓϧ௨Γʹॻ͍ͯ΋ಈ͔ͳ͍Օॴུ͕ • Ankoͷํ͕ͱ͖ͬͭ΍͍͢ • Fresco Λ࢝Ί

    FB ੡OSS໨നԡ͠ͷTutorial • ͪΐͬͱಠಛͳۭؾ Yoga ͸FB੡͕ͩผͷϥΠϒϥϦ (Glide ͱ͔ Picasso ͷํ͕)
  33. -JUIPͲ͏Α ݁࿦ : Litho ࢖͏ͳΒAnko Ͱ͍͍