鹿児島で行われた夜子まま塾の資料

1. 夜子まま塾＠鹿児島
日本Androidの会神戸支部
夜子まま
13年8月27日火曜日

2. アジェンダ
アジェンダ
自己紹介
本プレゼンの趣旨説明
初心者向け講義
実践レイアウト
13年8月27日火曜日

3. 自己紹介
名前 寺園 聖文
肩書 株式会社Re:Kayo-System 代表取締役社長
他 日本Androidの会神戸支部、NFCLab関西支部、
京都GDG、神戸GDG、瀬戸内デベロッパー部
マイブーム バスケ
13年8月27日火曜日

4. 想定する対象者
Androidアプリ開発初心者
アプリの画面デザインをやっているけどAndoridははじめ
て
Androidならなんでも知りたいというAndroidおたく
夜子ままさんの勉強会に興味のある人
13年8月27日火曜日

5. 13年8月27日火曜日

6. スマホ用の画面デザインを
作ってほしいと頼まれ
このアプリの画面作
ってくれる？
いやぁ
私やったことないけ
ど、おもしろそう！
13年8月27日火曜日

7. とりあえずPhotoshopで
画面のレイアウトを作ってみたけど
うぐぐ、、
13年8月27日火曜日

8. 今度は
Androidアプリ用に画像を切り出して
ほしいと言われた
これじゃ使えないの
でアプリ用に切り出
してくれる？
うーん
13年8月27日火曜日

9. そこでネットで調べて
Androidの開発環境を入れてみたが・・・
分からない事だらけ
で、問題は山積み
13年8月27日火曜日

10. 最初にネタバレすると
13年8月27日火曜日

11. 提出すると喜ばれる
リソース一式
色(color.xml)
フォントスタイル(TextStyle.xml)
シェイプ(Drawable Shape ファイル)
画像(各解像度毎のPNG, ９パッチ)
アニメーション（animation ファイル)
テーマ（スタイル ファイル)
文字列(strings.xml)
数値定義(dimension.xml)
レイアウト（Layoutファイル)
13年8月27日火曜日

12. 環境構築
13年8月27日火曜日

13. ADT Bundleをインストール
以上
13年8月27日火曜日

14. ブラウザで 下記URLを開き
http://developer.android.com/sdk/index.html
クリック
13年8月27日火曜日

15. ダウンロードしたファイルをインストール
ZIPなら、解凍して任意のフォルダへ
EXEなら実行してダイアログに従う
13年8月27日火曜日

16. 画面作成
13年8月27日火曜日

17. 画面作成までの手順
画面作成用のプロジェクトを作成
レイアウトファイル（画面ファイル）を編集する
実行して画面を確認
13年8月27日火曜日

18. プロジェクトの作成
①Eclipseを起動 ② ワークスペースの選択
③ Eclipse
13年8月27日火曜日

19. プロジェクトの作成
④メニューから
File→New→Android Application Projectを選択
13年8月27日火曜日

20. プロジェクトの作成
アプリ名
プロジェクト名
パッケージ名
⑤ひと通り入力したらNextをクリック
アプリ名を入れると、自動的
に他が補完される。まずはこ
の初期値でも問題ない。
13年8月27日火曜日

21. プロジェクトの作成
⑥Next→Next→Next→Finish
13年8月27日火曜日

22. 気になる人は
10日でおぼえる
Androidアプリ開発入
門教室 第2版
大型本: 424ページ
出版社: 翔泳社; 第2版 (2012/10/19)
ISBN-10: 4798126306
ISBN-13: 978-4798126302
発売日： 2012/10/19
価格: ￥2,940
13年8月27日火曜日

23. プロジェクト作成完了
13年8月27日火曜日

24. レイアウトファイルを閉じる
①タブの☓ボタンをクリック
13年8月27日火曜日

25. レイアウトファイルを開く
① 開きたいレイアウトファイルをダブルクリック
右クリックでエディタの種類を選択できます。
Android Common XML Editorが
デフォルトです。
13年8月27日火曜日

26. レイアウトを編集（GUI）
①配置したいWidgetをクリック
②配置したい場所にドロップ
③プロパティーを編集
13年8月27日火曜日

27. レイアウトを編集（XML）
①XML編集タブを選択
②XML属性により直接編集
属性にどのようなものがあるかは憶えておかない
といけない。
しかし、簡単な編集は格段にこちらが速いい。
13年8月27日火曜日

28. 画面の確認（省略）
実機の場合は実機をUSB接続し実行
エミュレーターの場合は、事前にエミュレーターを作成
しておき、実行でエミュレーターを選択
13年8月27日火曜日

29. 実行画面
詳しくは書籍・ネット等の情報
を参照してください。
13年8月27日火曜日

30. レイアウト
13年8月27日火曜日

31. 最初の難関
13年8月27日火曜日

32. レイアウト編集
思うようにウィジェットを配置できない
レイアウトって何？
５つのレイアウトの使い分けがわからない
レイアウトの使い方でアプリのスピードが変わる
解像度、サイズの異なる端末でも崩れないレイアウト
13年8月27日火曜日

33. 思うように配置できない理由
ViewGroup
View View View
ViewGroup ・・・
Layout,ScrollView,ListView,,,
View ・・・
Button,TextView,ImageView,,,
13年8月27日火曜日

34. レイアウトのルールに従う
例えばLinearLayout（Vertical)だと
View
View
View
View
どこに置いても
縦に連続で配置される。
13年8月27日火曜日

35. え？
それじゃ単純な画面しか
作れないじゃない？
13年8月27日火曜日

36. 組み合わせて実現する
ViewGroup
View View ViewGroup
View View
レイアウトは入れ子に
することができる。
13年8月27日火曜日

37. レイアウトの種類
LinearLayout ・・・縦か横へ連続配置するレイアウト
RelativeLayout ・・・相対的な配置をするレイアウト
FrameLayout ・・・重ねるように配置するレイアウト
TableLayout ・・・テーブルで配置するレイアウト
GridLayout ・・・TableLayoutみたいなLinearLayout
13年8月27日火曜日

38. Linear Layout(Horizontal)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HelloWorld" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HelloWorld" />
</LinearLayout>
13年8月27日火曜日

39. Linear Layout(Vertical)
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HelloWorld" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HelloWorld" />
</LinearLayout>
13年8月27日火曜日

40. RelativeLayout(Child)
愛 BaseLine
toRightOftoLeftOf
above
below
alignTop
alignBottom
alignLeft alignRight
13年8月27日火曜日

41. RelativeLayout(Root)
alignParentRight
alignParentTopcenterInParent
alignParentLeft
centerHorizontal
centerVertical
alignParentBottom
13年8月27日火曜日

42. RelativeLayout(例）
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="TextView" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_toRightOf="@+id/textView1"
android:text="TextView" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/textView1"
android:layout_alignLeft="@+id/textView2"
android:text="TextView" />
</RelativeLayout>
13年8月27日火曜日

43. FrameLayout
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/a" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/b" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/c" />
</FrameLayout>
13年8月27日火曜日

44. <TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="abc" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="abc" />
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="abcdefg" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="abc" />
</TableRow>
</TableLayout>
TableLayout
13年8月27日火曜日

45. GridLayout
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="6" >
<Button
android:id="@+id/button1"
android:layout_column="0"
android:layout_row="0"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_column="2"
android:layout_row="0"
android:text="Button" />
<Button
android:id="@+id/button3"
android:layout_column="3"
android:layout_row="0"
android:text="Button" />
<Button
android:id="@+id/button4"
android:layout_column="0"
android:layout_row="1"
android:text="Button" />
<Button
android:id="@+id/button6"
android:layout_column="2"
android:layout_columnSpan="2"
android:layout_row="1"
android:layout_gravity="fill_horizontal"
android:text="Button" />
</GridLayout>
13年8月27日火曜日

46. GridLayout
（1,1）
（0,0）（1,0）（2,0）（3,0）
（0,1）
（0,2）
（0,3）
（0,4）
（1,2）
（1,3）
（1,4）
（2,1）
（2,2）
（2,3）
（2,4）
（3,1）
（3,2）
（3,3）
（3,4）
(column, row)位置の指定
範囲の指定 column_span
row_span
row_span = 2
column_span = 2
13年8月27日火曜日

47. GridLayout
(column=2, row=1, column_span=2)
(column=2, row=2, column_span=2,
layout_gravity=fill_horizontal)
13年8月27日火曜日

48. API１６から追加されたため、それ以前はSupportLibrary
を使用する必要がある。パッケージが違うので注意。
(android.support.v7.widget.GridLayout)
ColumnやRowは数値を飛ばすと自動で詰められる特性が
ある。元LinearLayoutであることを考慮すればイメージ
しやすい。
GridLayout(注意点）
13年8月27日火曜日

49. 画像
13年8月27日火曜日

50. 高DPI端末での劣化
Original
120dpi 320dpi
13年8月27日火曜日

51. DPIとは
dpi ( Dot Per Inch)
１インチあたりのピクセル数
1inch=2.54cm
1inch
1inch
ピクセル
ピクセル数が多いほど精細
な画像表示が可能になる。
13年8月27日火曜日

52. 高DPIの問題
50x50ピクセルの
画像 300x300のピクセル領域
足りない部分は補完されるので劣化する
13年8月27日火曜日

53. どうすればよい？
300x300ピクセル
の画像 300x300のピクセル領域
画素数の高い画像なので劣化しない。
13年8月27日火曜日

54. 全て高解像度にすれば良い？
Original
120dpi 320dpi
300x300ピクセル
の画像
低DPI端末では縮小処理が行われる。
そのため、無駄に高解像度はオーバースペック。
50x50 の領域 300x300 の領域
13年8月27日火曜日

55. 正解：DPI毎に画像を準備
DPI 端末例 シェア率
ldpi
xperia10 mini, Huawei Ideos,
PcketWifiS
10.3%
mdpi KindleFile,iPhone3,iPad1,iPad mini 23.2%
tvdpi Nexus7(Jerry Bean） 1.1%
hdpi
Nexus7, Galaxy S, Galaxy SII,
Xperia Arc
35.2%
xhdpi
Galaxy Nexus, iPhone4,iPhone5,
iPad3,iPad4
24.5%
xxhdpi
XperiaZ, Arrows X Optimus G,
Medias W、2012年冬以降の端末
5.7%
13年8月27日火曜日

56. DPI毎のフォルダ名
res/drawable-<dpi名>
dpi毎にフォルダを作成し、
同一ファイル名のファイルを
配置する。
13年8月27日火曜日

57. SHAPE DRAWABLE
単純な線、丸、四角等の画像もDPI毎
に置くことを考えると手間がかかる。
このような場合は、Shape Drawableを
使うことで手間を削減できる。
13年8月27日火曜日

58. SHAPE DRAWABLEとは
Shape DrwableはXMLによって定義す
る画像です。
<shape
android:shape="oval" >
<solid android:color="#666666" />
<size
android:height="120dp"
android:width="120dp" />
</shape>
13年8月27日火曜日

59. SHAPE DRAWABLEの配置
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/circle" />
画像ファイルと区別なく使える
解像度に依存しないのでどこでも
よいが、画像と同等に扱われるの
配置には注意すること
13年8月27日火曜日

60. SHAPE DRAWABLEの使用
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:usesLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
android:shape
キーワード。 シェイプのタイプを定義します。有効な値は以下です。
"rectangle"
含んでいるビューを長方形で埋めます。これがデフォルトのシェイプです。
"oval"
含んでいるビューのディメンションを楕円形にフィットさせます。
"line"
含んでいるビューの幅で水平方向の線が広がります。このシェイプは線の幅の指定に
は <stroke> 要素が必要となります。
"ring"
同心円のシェイプです。
<solid>
外形を塗りつぶす無地の色です。
android:color
カラー。シェイプに適用するカラーで、16 進数の値またはカラーリソースを指定し
ます。
<stroke>
シェイプの点線の指定です。
android:width
ディメンション。線の厚みで、ディメンション値または ディメンションリソース を指
定します。
android:color
カラー。線のカラーで、16 進数の値またはカラーリソースを指定します。
android:dashGap
ディメンション。点線間の間隔で、ディメンション値または ディメンションリソー
ス を指定します。android:dashWidth が設定されている場合のみ有効。
android:dashWidth
ディメンション。点線のサイズで、ディメンション値または ディメンションリソー
ス を指定します。android:dashGap が設定されている場合のみ有効。
13年8月27日火曜日

61. ９パッチ
このような吹き出しの画像を作る場合、
文字の長さにあわせて伸縮したい。
あいう あいうえおかき
しかし、そのまま伸縮すると形状
が変形する
13年8月27日火曜日

62. DRAW9PATCH
<Adt Bundle>/sdk/tools/draw9patch
13年8月27日火曜日

63. 伸縮位置の設定
横方向に伸縮する位置
縦方向に伸縮する位置
縦方向に文字列または子Viewを
表示する位置
横方向に文字列または子Viewを
表示する位置
13年8月27日火曜日

64. 9PATCHの例
あいうえおかきくけこ
さしすせとたちつてと
13年8月27日火曜日

65. 実践
13年8月27日火曜日

66. L
I
N
E
13年8月27日火曜日

67. みんな大好きLINEアプリの
画面をパクってみる。
というハンズオン
13年8月27日火曜日

68. 素材
実際のLINEの画面をキャプチャしたものを利用。
13年8月27日火曜日

69. 機能の分割
タイトルバー
タブバー
検索バー
友達リスト
13年8月27日火曜日

70. タイトルバーの作成
ボタン ボタン
ラベル
縦区切り線
縦区切り線
横区切り線
13年8月27日火曜日

71. PHOTO SHOP
13年8月27日火曜日

72. タイトルバー画像切り出し
Click時
ボタン
タイトル背景 縦区切り線
9patch 9patch
13年8月27日火曜日

73. ボタン画像の定義
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="false">
<color android:color="@color/titlebar_selected_color" />
</item>
<item android:state_focused="true" android:state_pressed="true">
<color android:color="@color/titlebar_selected_color" />
</item>
<item android:state_focused="false" android:state_pressed="true">
<color android:color="@color/titlebar_selected_color" />
</item>
<item>
<color android:color="@android:color/transparent" />
</item>
</selector>
ステートリストファイル
画像ファイルとして、res/drawableの下に配置
13年8月27日火曜日

74. ステートリストファイル
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:constantSize=["true" | "false"]
android:dither=["true" | "false"]
android:variablePadding=["true" | "false"] >
<item
android:drawable="@[package:]drawable/drawable_resource"
android:state_pressed=["true" | "false"]
android:state_focused=["true" | "false"]
android:state_selected=["true" | "false"]
android:state_active=["true" | "false"]
android:state_checkable=["true" | "false"]
android:state_checked=["true" | "false"]
android:state_enabled=["true" | "false"]
android:state_window_focused=["true" | "false"] />
</selector>
android:state_pressed ・・・ 押されている状態
android:state_focused ・・・ フォーカスがある状態
android:state_selected ・・・ 選択している状態
android:state_active ・・・ アクティブな状態
android:state_checkable ・・・ チェック可能な状態
android:state_enabled ・・・ 有効な状態
android:state_checked ・・・ チェックされた状態
13年8月27日火曜日

75. タイトルのレイアウト作成
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/title"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
style="@style/titlebar_button_text"
android:layout_width="64dip"
android:layout_height="match_parent"
android:background="@drawable/title_button_background"
android:gravity="center"
android:text="編集" />
<View
android:layout_width="3px"
android:layout_height="match_parent"
android:background="@drawable/title_separator" />
<TextView
android:id="@+id/textView2"
style="@style/titlebar_title_text"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="友達（５人）" />
<View
android:layout_width="3px"
android:layout_height="match_parent"
android:background="@drawable/title_separator" />
<ImageButton
android:id="@+id/button2"
style="@style/titlebar_button_text"
android:layout_width="64dip"
android:layout_height="match_parent"
android:background="@drawable/title_button_background"
android:src="@drawable/add_friend" />
</LinearLayout>
13年8月27日火曜日

76. タブバーの作成
ボタン
横区切り線 新着ラベル
13年8月27日火曜日

77. タブバー画像切り出し
ボタン
新着ラベル
13年8月27日火曜日

78. 新着の表示
FrameLayout
ImageButton
TextView
新着
新着なし ImageButton
13年8月27日火曜日

79. タブバーのレイアウト作成
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/tabbar_background_color"
android:orientation="horizontal" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/friend_button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/talk_button" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/timeline_unselected" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/other_unselected" />
</LinearLayout>
13年8月27日火曜日

80. 検索バーの作成
テキストボックス
13年8月27日火曜日

81. 検索バー画像切り出し
テキストボックス
13年8月27日火曜日

82. 検索バーのレイアウト作成
<?xml version="1.0" encoding="utf-8"?>
<EditText xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/searchbox"
android:ems="10"
android:hint="検索" >
<requestFocus />
</EditText>
13年8月27日火曜日

83. 友達リストの作成
マイプロフィールヘッダ
グループヘッダ
友達ヘッダ
マイプロフィールボディー
グループボディー
友達ボディー
13年8月27日火曜日

84. マイプロフィールヘッダのレイアウト作成
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="マイプロフィール" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="@drawable/friend_list_expand" />
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@color/list_separator_color" />
</RelativeLayout>
13年8月27日火曜日

85. マイプロフィールボディのレイアウト作成
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="@drawable/profile" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/now_message"
android:gravity="center_vertical"
android:text="蓮華" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="@+id/imageView1"
android:text="てらぷに" />
<include
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
layout="@layout/list_separator" />
</RelativeLayout>
13年8月27日火曜日

86. 以下同
似たよう感じなので割愛します。
13年8月27日火曜日

87. レイアウトを合体
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/list_background_color"
android:orientation="vertical"
tools:context=".MainActivity" >
<include
android:layout_width="match_parent"
android:layout_height="64dip"
layout="@layout/taitlebar" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/tabbar" />
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/searchbox" />
<ScrollView
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/friendlist" />
</ScrollView>
</LinearLayout>
13年8月27日火曜日

88. INCLUDE
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="@layout/B" />
A
B
ほっておくとレイアウトは肥大化するので機能
別に作成し、必要な箇所でIncludeすると良い。
13年8月27日火曜日

89. 残念な見た目
13年8月27日火曜日

90. 自分で自分に駄目だし
窮屈
フォントが大きすぎ
右に寄り過ぎ
フォントのスタイルが違う
画像が大きすぎる
太すぎる
13年8月27日火曜日

91. 微調整テク（大きさの指定）
layout_width
layout_height
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/circle" />
much_parent - 親Viewのサイズと同じ
wrap_content - 素材のサイズと同じ
予約文字指定
数値指定（単位）
fill_parent - much_parentと同じ
設定できる値は、
dp(dip)/sp/px/pt/mm/in
13年8月27日火曜日

92. 単位について
dp (dip) - Density-independent Pixels
画面の物理的な密度に基づいた抽象的な単位。
この単位は 160 dpi の画面と対応していて、160 dpi の画面で 1 dp = 1 px になる。なので、dp-pixel 比は画面密度（解像度）に応じて変化する
が、必ずしも正比例するわけではない。コンパイラは "dip"、"dp" のいずれも理解できるが、"dp" という記述のほうが "sp" との対応関係がよりわ
かりやすい。
sp - Scale-independent Pixels
dp に似た単位だが、ユーザーが設定したフォントサイズによって自動でスケールされる。フォントサイズを指定する場合には、この単位を使うこと
を推奨している。よって、sp で指定したサイズは、画面密度（解像度）とユーザーが設定したフォントサイズに依存する。
pt - Points
スクリーンの物理的サイズに基づいた 1/72 インチ。
px - Pixels
ピクセル、画面の実際のピクセル数
デバイスによって、1インチ当たり異なるピクセル数を持つ可能性があり、実際に表示されるサイズが変わってくるため、この単位で測ることは推奨
しない。
mm - ミリメートル
画面の物理的サイズに基づく。
in - インチ
画面の物理的サイズに基づく。
13年8月27日火曜日

93. 微調整テク（余白の指定）
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:layout_marginTop="5dip"
android:layout_marginBottom="5dip"
android:src="@drawable/circle" />
layout_marginLeft
layout_marginRight
layout_marginTop
layout_marginBottom
layout_marginLeft - 左の余白
layout_marginRight - 右の余白
layout_marginTop - 上の余白
layout_marginBottom - 下の余白
layout_margin - デフォルトの余白
設定できる値は、
dp(dip)/sp/px/pt/mm/in
数値指定（単位）
13年8月27日火曜日

94. 微調整テク（パディングの指定）
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="5dip"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingStart="5dip"
android:paddingEnd="5dip"
android:paddingTop="5dip" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/circle" />
</LinearLayout>
paddingLeft/paddingStart
paddingRight/paddingEnd
paddingTop
paddingBottom
paddingLeft - 子の左に余白
paddingRight - 子の右に余白
paddingTop - 子の上に余白
paddingBottom - 子の下に余白
padding - デフォルトで子に余白
paddingStart - paddingLeftとほぼ同じ動
きをするが優先順位は上。レイアウト内の向
きに応じて右と左が逆転する。
paddingEnd - paddingRightとほぼ同じ動
きをするが優先順位は上。レイアウト内の向
きに応じて右と左が逆転する。
13年8月27日火曜日

95. 微調整テク（重みの指定）
top - コンテナの上部に配置し、サイズ変更は行いません。
bottom - コンテナの下部に配置し、サイズ変更は行いません。
left - コンテナの左側に配置し、サイズ変更は行いません。
right - コンテナの右側に配置し、サイズ変更は行いません。
center_vertical - 上下中央に配置し、サイズ変更は行いません。
fill_vertical - オブジェクトの高さを、コンテナのサイズに合わせます。
center_horizontal - 左右中央に配置し、サイズ変更は行いません。
fill_horizontal - オブジェクトの幅を、コンテナのサイズに合わせます。
center - 上下左右中央に配置し、サイズ変更は行いません。
fill - オブジェクトの高さ・幅を、コンテナのサイズに合わせます。
clip_vertical - top/bottomの追加オプションとして、オブジェクトの上
部/下部の境界をコンテナの境界に合わせます。
clip_horizontal - left/rightの追加オプションとして、オブジェクトの左
側/右側の境界をコンテナの境界に合わせます。
gravity - 内包する子に対して指定
layout_gravity - 自分自身に対して指定
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="top">
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/circle" />
</LinearLayout>
13年8月27日火曜日

96. 微調整したレイアウト
13年8月27日火曜日

97. 修正前VS修正後
13年8月27日火曜日

98. ソースコード
https://docs.google.com/file/d/0B2nCbQ0YSzbDN09TRkRKUVNCYVU/edit?usp=sharing
http://goo.gl/FYLMU4
FULLURL
短縮URL
ファイル名
LineImageSample.zip
13年8月27日火曜日

99. 参考資料
Y.A.M の 雑記帳
http://y-anz-m.blogspot.jp/2010/05/androiddimension.html
Android API Reference
http://developer.android.com/reference/packages.html
Android Wiki
http://wikiwiki.jp/android/
ソフトウェア技術ドキュメントを勝手に翻訳
https://sites.google.com/a/techdoctranslator.com/jp/
13年8月27日火曜日

100. 告知
13年8月27日火曜日

101. Android NFCプログラミング完全ガイド
Android NFCプログラミング完全ガイド [大型本]
株式会社 Re:Kayo-System (著)
大型本: 264ページ
出版社: 翔泳社 (2013/9/13)
言語 日本語
ISBN-10: 4798131709
ISBN-13: 978-4798131702
発売日： 2013/9/13
13年8月27日火曜日

102. Effective Android 第2版
EffectiveAndroid 第2版
発売日 8月29日(β版)
価格は1900円です
新規書下ろし内容（あくまで予定ですので変更する可能性もあります）
@checkela AOSPを17倍楽しむ方法
@chun_ryo Android 4.3 プライバシーポリシー AppOps を解剖する
@cat_kaotaro 最新 NDK r9 の新機能を解説する
@miroc007 エンジニアのためのデザイン講座 よくあるUIのカラーバランスと簡単カラー理論
@keis UIのグラフィックを考える上でのコンセプトメーキングを学ぶ
@shige0501 LoaderでSQLiteDBやContentProviderを読み込む
@muo_jp Android 4.3 DRM の仕組みと運用（仮・テーマ変わるかも）
@mhidaka Volleyで学ぶネットワークプログラミング
@l_b__ Android.mkのレシピ
@bols_blue Jenkinsを使ったUIテストで落とし穴に落ちない冴えたやり方
@nkzn Geofencing、location APIで位置情報を活用する
@95kugo Android 4.3 Automated UI testing（仮・テーマ変わるかも）
@shigepon7 理系のためのなぜなにgit
@tao_gaku (未定)
薄くない薄い本！
13年8月27日火曜日