レイアウト編 - よく使うレイアウト -

1. ハッシュタグ
デザイナーが ##aaaaddeessiiggnnss
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第44回：レイアウト編
@@GGMMOO YYoouurrss
22001122..1100..2255

2. ハッシュタグ
##aaaaddeessiiggnnss
デザイン 開発
70
60
50
40
30
20
10
0
Web アプリ

3. ハッシュタグ
##aaaaddeessiiggnnss
aassaammiieeeeee77 ttoommmmmmmmyy aaddaammrroocckkeerr

4. ハッシュタグ
##aaaaddeessiiggnnss
がんばって作ったデザインが、
実装後に残念な結果にならないために

5. 秋葉ちひろ
•･ @@ttoommmmmmmmyy
•･ デザイナー／アートディレクター
•･ WWeebb系・アプリ系
•･ BBaaiidduuでSSiimmeejjiiの開発のフロント
エンドの一部

7. http://y-anz-m.blogspot.jp/2012/10/androidseekbar.html

8. 今日のアジェンダ
レイアウト編
11.. よく使うレイアウト
22.. 単位と余白
33.. PPSSやFFWWでデザイン案を作るとき
の33箇条

9. デザイナー向�け
レイアウト入�門

10. レイアウト編
11.. よく使うレイアウト

11. wwrraapp__ccoonntteenntt
インライン要素っぽい
ffiillll__ppaarreenntt//mmaattcchh__ppaarreenntt
ブロック要素っぽい
4488ddpp

12. android:layout_width="fill_parent"
android:layout_height="wrap_content"

13. TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww

14. <TextView />
<TextView /> TTeexxttVViieeww
<TextView />
<TextView />
IImmaaggeeVViieeww
<ImageView />
<ImageView />
<TextView /> TTeexxttVViieeww

15. 11.. よく使うレイアウト
LLiinneeaarrLLaayyoouutt

16. <TextView />
<TextView /> TTeexxttVViieeww
<TextView />
<TextView />
IImmaaggeeVViieeww
<ImageView />
<ImageView />
<TextView /> TTeexxttVViieeww

17. <LinearLayout>
<TextView />
<TextView /> TTeexxttVViieeww
<TextView />
<TextView />
IImmaaggeeVViieeww
<ImageView />
<ImageView />
<TextView /> TTeexxttVViieeww
</LinearLayout>

18. <LinearLayout> たてにならべー！
<TextView />
TTeexxttVViieeww
<TextView />
TTeexxttVViieeww
<TextView />
<TextView /> TTeexxttVViieeww
TTeexxttVViieeww
<ImageView /> IImmaaggeeVViieeww
<ImageView /> IImmaaggeeVViieeww
TTeexxttVViieeww
<TextView />
</LinearLayout>

19. <LinearLayout> よこにならべー！
<TextView />
TTeexxttVViieeww
<TextView />
TTeexxttVViieeww
<TextView />
<TextView /> TTeexxttVViieeww
TTeexxttVViieeww
<ImageView /> IImmaaggeeVViieeww
<ImageView /> IImmaaggeeVViieeww
TTeexxttVViieeww
<TextView />
</LinearLayout>

20. <LinearLayout> よこにならべー！
<TextView />
<TextView />
<TextView />
<TextView />
TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww IImmaaggeeVViieeww
<ImageView /> （入�り切らない）
<ImageView />
<TextView />
</LinearLayout>

22. name id time
img
text

23. よこにならべー！
name id time
img
text

24. よこにならべー！ たてにならべー！
name id time
img
text

25. よこにならべー！ たてにならべー！
name id time
img
text
よこにならべー！

26. <LinearLayout>
</LinearLayout>

27. <LinearLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
</LinearLayout>

28. <LinearLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
</LinearLayout>

29. <LinearLayout>
<ImageView />
<LinearLayout>
<LinearLayout>
</LinearLayout>
<TextView />
</LinearLayout>
</LinearLayout>

30. <LinearLayout>
<ImageView />
<LinearLayout>
<LinearLayout>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<TextView />
</LinearLayout>
</LinearLayout>

31. ! LLiinneeaarrLLaayyoouuttの
難点
構造が複雑で、階層が深い
↓
数が多いと、重い原因となる

32. よこにならべー！
name id time

33. よこにならべー！
name id time
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"

34. たてにならべー！
actionbar
toolbar
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="0dp"

35. よこにならべー！
cancel OK
11 11
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"

36. よこにならべー！
cancel OK
11 layout_weight 22

37. LLiinneeaarrLLaayyoouuttの
得意なこと
•･ 等分割や、割合を指定した分割が得意
•･ 使わないスペースを最大限に伸ばすこ
とが得意

38. 11.. よく使うレイアウト
RReellaattiivveeLLaayyoouutt

39. name id time
img
text

40. ぼく親だよー
name id time
img
text

41. ぼく親だよー ぼく親の右どなりAAのだよー
name id time
img
text

42. ぼく親だよー ぼく親の右どなりAAのだよー
ぼくAAの右どなりのBBだよー
name id time
img
text

43. ぼく親だよー ぼく親の右どなりAAのだよー
ぼくAAの右どなりのBBだよー
name id time
img
text
ぼくAAの下でAAと左端が同じなCCだよー

44. ぼく親だよー ぼく親の右どなりAAのだよー
ぼくAAの右どなりのBBだよー
name id time
img
text
ぼくAAの下でAAと左端が同じなCCだよー
ぼくCCの上でCCと右端が同じなDDだよー

45. ぼく親だよー android:id="@+id/Oya"
ぼく親の右どなりAAのだよー
android:layout_toRightOf="@id/
Oya"
ぼくAAの右どなりのBBだよー
android:layout_toRightOf="@id/A"
ぼくAAの下でAAと左端が同じなCCだよー
android:layout_below="@id/A"
android:layout_alignLeft="@id/A"
ぼくCCの上でCCと右端が同じなDDだよー
android:layout_above="@id/C"
android:layout_alignRight="@id/C"

46. RReellaattiivveeLLaayyoouutt
name id time
img
text

47. <RelativeLayout>
RReellaattiivveeLLaayyoouutt
<ImageView />
name id
<TextView /> img
<TextView />
<TextView />
<TextView />
</RelativeLayout>

48. <LinearLayout>
<ImageView />
<LinearLayout>
<LinearLayout>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<TextView />
</LinearLayout>
</LinearLayout>

49. RReellaattiivveeLLaayyoouuttの
得意なこと
•･ LLiinneeaarrLLaayyoouuttだと階層が深くなって
しまうところを、軽々と11階層で表現
できる！

50. 11.. よく使うレイアウト
FFrraammeeLLaayyoouutt
重ねるときに使おう

55. TTeexxttVViieeww
sshhaappee
IImmaaggeeVViieeww
android:layout_width=
"fill_parent"
android:layout_height=
"fill_parent"

56. ssttaarrttCCoolloorr ##88000000
eennddCCoolloorr ##00000000

58. <ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</ScrollView>

59. <ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
要素はひとつだけ
</ScrollView>

60. <HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</HorizontalScrollView>

61. レイアウト編
22.. 単位と余白

62. AAnnddrrooiiddアプリの
レイアウトで使う単位
ddpp sspp
DDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

63. 22.. 単位と余白
ddppについて

64. 116600ddppii 11 224400ddppii 11..55
332200ppxx 448800ppxx
448800ppxx
880000ppxx

65. 116600ddppii 11 224400ddppii 11..55
332200ppxx 448800ppxx
332200ddpp 332200ddpp
448800ppxx
880000ppxx

66. 116600ddppii 224400ddppii 332200ddppii
mmddppii hhddppii xxhhddppii
11 11..55 22
11ddpp 11ddpp 11ddpp
11ppxx 11..55ppxx 22ppxx

67. 224400ddppii 332200ddppii
hhddppii xxhhddppii
11..55 22
11ddpp 11ddpp
11..55ppxx 22ppxx

68. 22.. 単位と余白
ssppについて

70. 22
11..77
22..00
22..33
22..66
http://y-anz-m.blogspot.jp/2012/02/
androidtextview-settextsize-sp.html

71. 116600ddppii 224400ddppii 332200ddppii
mmddppii hhddppii xxhhddppii
11 11..55 22
11sspp 11sspp 11sspp
11ppxx 11..55ppxx 22ppxx

72. 224400ddppii 332200ddppii
hhddppii xxhhddppii
11..55 22
11sspp 11sspp
11..55ppxx 22ppxx

73. 2222sspp
1144sspp
1188sspp

74. 重要なのは…�
ddpp//ssppを意識すること
ddpp sspp
DDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension

75. http://developer.android.com/design/style/metrics-grids.html

76. http://developer.android.com/design/style/metrics-grids.html

77. http://developer.android.com/design/style/metrics-grids.html

78. http://developer.android.com/design/style/typography.html

79. 22.. 単位と余白
実際にどう作るか
考えてみる

80. http://developer.android.com/design/style/metrics-grids.html

81. http://developer.android.com/design/style/metrics-grids.html

82. 332200ddpp 336600ddpp
553333ddpp
664400ddpp
hhddppii xxhhddppii
11ddpp 11..55ppxx 11ddpp 22ppxx

83. http://developer.android.com/design/downloads/index.html
336600ppxx

84. xxhhddppii 772200ppxx 336600ddpp 4488ddpp
4488ddpp
9966ppxx

85. xxhhddppii
1122ddpp 2244ppxx
88ddpp 1166ppxx
1166ddpp
3322ppxx 1122ddpp
1122ddpp

86. xxhhddppii
2244ppxx
1122sspp
1188sspp
3322ppxx
1144sspp
2288ppxx

87. <RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:paddingTop="12dp"
android:paddingBottom="12dp">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginRight=" 12dp"
android:src="@drawable/photo"
android:id="@+id/photoarea" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize=" 18sp"
android:textColor="#fff"
android:layout_toRightOf="@id/photoarea"
android:text="Adamrocker"
android:id="@+id/titlearea" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"

88. PPhhoottoosshhoopp GGaallaaxxyy NNeexxuuss で実装

89. 336600ddpp 332200ddpp
GGaallaaxxyy NNeexxuuss で実装 HHTTCC DDeessiirree で実装

92. レイアウト編：まとめ
PPSSやFFWWでデザインを作る
ときの33箇条

93. 1.
サイズは（ほぼ）22種類！
ddppやssppを意識する
伸縮できるところを意識する

94. 332200ddpp 336600ddpp
553333ddpp
664400ddpp
hhddppii xxhhddppii
11ddpp 11..55ppxx 11ddpp 22ppxx

95. 2.
xxhhddppiiの余白は44の倍数の
ddppだとベスト！
hhddppiiになっても整数になる

96. 224400ddppii 332200ddppii
hhddppii xxhhddppii
11..55 22

97. xxddppii xxhhddppii
11..55 ： 22 ＝ の余白 ： の余白

98. xxddppii xxhhddppii
11..55 ： 22 ＝ の余白 ： の余白
11..5533
xxddppii xxhhddppii
の余白 ＝ の余白 ×
44の倍数
22 44

99. 3.
作ったあとは、実機で確認
（要ものさし）
何mmmmになるのかを実際にチェック

100. AAnnddrrooiidd DDeessiiggnn PPrreevviieeww
http://code.google.com/p/android-ui-utils/

104. デザイナーにも広めたい
と思ってはじめた勉強会

105. ありがとうございました！
GGoooodd LLuucckk!!
•･ @@ttoommmmmmmmyy
•･ ffaacceebbooookk :: 秋葉ちひろ
•･ 次回は1111//88（木）総集編
@@GGooooggllee
hhttttpp::////ggoooo..ggll//iiLLBBppoo