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

Umeda.apk #3 の登壇資料

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
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 ྫ
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
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 Ͱ͍͍