Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Layout ファイルののメンテナンス
jsugai
June 19, 2017
Technology
1
290
Layout ファイルののメンテナンス
Umeda.apk #3 の登壇資料
jsugai
June 19, 2017
Tweet
Share
More Decks by jsugai
See All by jsugai
jsugai
0
250
jsugai
0
430
jsugai
0
160
jsugai
0
46
jsugai
1
350
jsugai
0
28
jsugai
1
270
Other Decks in Technology
See All in Technology
orimanabu
1
160
layerx
1
1k
soracom
0
150
keiya01
23
9k
shoken
0
210
hirosys
0
150
gkzz
0
390
shirayanagiryuji
1
130
recruitengineers
0
150
takaking22
2
550
papix
0
290
k1low
3
1.4k
Featured
See All Featured
philhawksworth
190
17k
brad_frost
157
6.4k
smashingmag
283
47k
malarkey
393
60k
lauravandoore
437
28k
jrom
114
7.1k
keithpitt
401
20k
notwaldorf
13
1.6k
dougneiner
119
7.8k
marcelosomers
220
15k
bkeepers
321
53k
zenorocha
296
40k
Transcript
Layout.xml ͷϝϯς umeda.apk #3 - Report from Google I/O 2017
ϨΠΞτۤख
Α͋͘Δ ͜ΜͳϨΠΞτ Google Home $150
ͬͱใྔ͕ཉ͍͠
Google Home $150 50 205 22
Google Home $150 50 205 22 Google Pixel XL $600
1 8 7 Google Home $122 14 87 6 Google Home $89
ૉʹϨΠΞτ
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
None
<?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
Θ͔Γʹ͗͘͢ ϝϯςͨ͘͠ͳ͍
ରࡦ·ͱΊͯ͘
5&95 ImageView TextView 5&95 TextView:drawableStart TextView:text TextView ViewGroup(LinearLayout/RelativeLayout/etc...)
`make money` Ϙλϯ App Icon & Folder ྫ
None
<?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
ରࡦೖΕࢠΛݮΒ͢
https://github.com/google/flexbox-layout ʮapp:flexWrap="wrap"ʯ ͜Ε͚ͩͰ͑͗͢Δ PercentRelativeLayͭͷ͜ͱΕΖ
<?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 ʢωετΛݸݮʣ
ConstraintLayout
https://developer.android.com/topic/libraries/support-library/revisions.html
<?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 ͰωετҰ൪গͳ͍
$POTUSBJOU6*Ͱ ௐ͕Ͱ͖ΔΜͰ 7JFXͷ Ұ൪গͳ͍Ͱ͢
ରࡦ ൃΛม͑ͯ ϨΠΞτॻ͔ͳ͍
-JUIP
None
<!-- activity_main.xml--> EOF XML <!-- fragment_main.xml--> EOF <!-- recycler_item.xml--> EOF
@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
ͷൣғશମͰ7JFX͕ݸ
1SPT$POT
Pros • ϨΠΞτ͕γϯϓϧʢ͔ͯҰݸʣ • ׳ΕͨΒॻ͖͍͢ • એݴతʹॻ͚Δ • Fresco ͱ૬ੑ͕ྑ͍
• ϨΠΞτ Flexbox CSSతͳߟ͑ํ
Cons • ॻ͖͑Δͷ͕େม • αϯϓϧ௨Γʹॻ͍ͯಈ͔ͳ͍Օॴུ͕ • Ankoͷํ͕ͱ͖͍ͬͭ͢ • Fresco Λ࢝Ί
FB OSSനԡ͠ͷTutorial • ͪΐͬͱಠಛͳۭؾ Yoga FB͕ͩผͷϥΠϒϥϦ (Glide ͱ͔ Picasso ͷํ͕)
-JUIPͲ͏Α ݁ : Litho ͏ͳΒAnko Ͱ͍͍