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

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