マネーフォワードにてデザイナーさん向けのAndroidアプリ開発の勉強会を実施しました。 主にViewとLayoutに関する講義と課題を実施してもらいました。

1. 2015/09/06
鈴木 研吾
第1回 Androidトレーニング
for
デザイナー

2. 自己紹介
名前: 鈴木 研吾
twitter: @kengoScal
2011∼2014：セキュリティアナリスト@野村総研
2014年11月： マネーフォワード入社
2014年11月∼2015年01月： iOS開発
2015年02月∼08月：Android開発
2015年10月∼ : セキュリティ某
2

3. 好きなMS
OZ-00MS2
トールギスII

4. 今日の目的
1. デザイナー <̶> エンジニア間でスムーズに意思疎通
するため、
2. Android開発における共通認識(言語)をもてるように
する
3. きっかけを作る
4
デザイナ エンジニア

5. 今日の目標
1. ソースコードをダウンロードして
2. 開発環境を立ち上げて
3. レイアウトファイルについて知る
5

6. 今日やること
• かる∼いgit管理
• Android Studioでプロジェクトを開く
• 意外と迷う
• レイアウトの作成
• レイアウト作成において気をつけないといけない部分
6

7. 今日やらないこと
• Java
• Androidのフレームワーク
• アニメーション
• 単位dpにの詳しい説明
• 単位sp
• バージョン管理
• マテリアルデザイン云々
7

8. アジェンダ
• gitでソース落とす(5min)
• Android Studio立ち上げ(5min)
• レイアウト講義(20min40min)
• ハンズオン(20min)
8

9. gitでソース落とす
• terminal立ち上げ
• spotlightからterminalとうてばおk
• mkdir /Desktop/workspace
• cd /Desktop/workspace
• git clone https://github.com/ken5scal/
AndroidTraining4Designer.git
• cd AndroidTraining4Designer
9

10. Android Studio
• Android Studioを開く
• 起動してる間に、Genymotionを開き、Google Nexus 6 -5.1.0 -API22
を立ち上げる
• 立ち上がったら、プロジェクトをロード
• File > open > デスクトップのworkspace > AndroidTraining…
• > build.gradleをクリック
• ツールバー上の再生ボタンが押せるようになったらクリック
• しばらくするとChoose Deviceというダイアログが出るので、その中の
デバイスをクリック
• そうするとGenymotionでアプリが走り出す
10

11. View サマリー
• View: 画面を構成する要素となるパーツ
• TextView
• EditText
• ImageView
• Button
• etc
• MyApplicationアプリの「非レイアウトView」を参照
11

12. Layout サマリー
• Layout: 配下のView（もしくは子Layout)をグルーピングする
• Linear Layout
• View を縦横に並べます
• Relative Layout
• 相対的にViewを並べる
• FrameLayout
• Viewを重ねる
• ScrollView, ListView, GridView, etc
• MyApplicationアプリの「なんとか Layout Example」を参照
12

13. View, Layoutの共通パラメタ
• ID名
• パラメタ名
• android:id
• パラメタの値
• @+id/[ID名]
• 外部から参照する際に指定するID
• 例: RelativeLayout
• 参照しなくてもつけておいて損はない
• なんのviewかわかりやすくなる
• 参照: activity_non_layout.xml
• ※Android Studioでapp > res > layout内のファイルを参照
13

14. View, Layoutの共通パラメタ
• サイズ
• パラメタ名
• android:layout_height -> 高さ
• android:layout_width -> 横幅
• パラメタの値 (dp)
• match_parent -> 親Viewと同じサイズ
• wrap_content -> コンテンツを表示するのに十分なサイズに調整
• 参照: activity_non_layout.xml
• ※Android Studioでapp > res > layout内のファイルを参照
14

15. View, Layoutの共通パラメタ
• パディング、マージン
• パラメタ名
• android:padding, android:layout_margin
• 全方面への余白調整
• paddingほげ, layout_marginほげ
• ほげ: Top, Bottom, Right, Left
• ほげに指定した方向への余白調整
• パラメタの値 (dp)
• 参照: activity_non_layout.xml
15

16. View, Layoutの共通パラメタ
• 位置
• パラメタ名
• android:layout_gravity
• View(Layout)そのものの位置を指定
• android:gravity
• View(Layout)の中身の位置を指定
• パラメタの値
• center_horizontal: 水平方向の真ん中
• center_vertical: 垂直方方向の真ん中
• center: center_horizontal と center_vertical
• right, top, bottom, start, end
• gravityパラメタを使えないViewもある (例: ImageView)
• 参照: activity_linear_layout_example.xml
16

17. LinearLayout独自のパラメタ
• 整列方向: 子View(Layout)の並び方向を指定
• パラメタ名
• android:orientation
• パラメタの値
• horizontal
• vertical
• デフォルトはhorizontal
• 参照: activity_linear_layout_example.xml
17

18. LinearLayout独自のパラメタ
• 重み: 子View(Layout)が占有できる余白の割り当て比率
• パラメタ名
• android:layout_weight
• パラメタの値
• 1とか数字
• 注意: orientation方向のsizeパラメタを0dpにしなければいけない
• 例: orientation: horizontalなら、width= 0dp
• 画面一杯使って、うまくView(Layout)で分割したい時につかう
• 参照: activity_linear_layout_example.xml
18

19. RelativeLayout独自のパラメタ
• 相対位置: 子View(Layout)の別のView(Layout)に対する位置
• パターン1
• パラメタ名
• android:alignParentなんちゃら: 親Viewに対する相対位置
• なんちゃら: Bottom, Left, Right, Top
• android:layout_centerなんちゃら: 同上
• なんちゃら: Horizontal, Parent, Vertical
• パラメタの値
• true/false
• 参照: activity_relative_layout_example.xml
19

20. RelativeLayout独自のパラメタ
• 相対位置: 子View(Layout)の別のView(Layout)に対する位置
• パターン2
• パラメタ名
• android:layout_alignなんちゃら: 指定した別の子View(Layout)に
対する相対位置
• なんちゃら: Baseline, Bottom, Left, Right, Top, below, above
• android:layout_toなんちゃらOf: 指定した別の子View(Layout)の左
か右に配置
• なんちゃら: Left, Right
• パラメタの値
• @id/ID名
• 参照: activity_relative_layout_example.xml
20

21. これらを組み合わせてレイアウトを作る
• じゃやってみるか
• ということで実習
• 上記のバナー？みたいなのを作ってみましょう
• activity_assignment.xml内の「ここから」「ここまで」の間を記入して
ください
21

22. 完成イメージ
• Kengoが使ったView(Layout)
• FrameLayout
• RelativeLayout
• ImageView
• やりかたはいろいろある（はず）

23. Thank you!