2015/09/06 鈴木　研吾

第1回 Androidトレーニング for

デザイナー

自己紹介

名前: 鈴木　研吾 twitter: @kengoScal

2011～2014：セキュリティアナリスト@野村総研 2014年11月： マネーフォワード入社 2014年11月～2015年01月： iOS開発 2015年02月～08月：Android開発 2015年10月～ : セキュリティ某

2

好きなMS

OZ-00MS2 トールギスII

今日の目的

1. デザイナー <̶> エンジニア間でスムーズに意思疎通するため、

2. Android開発における共通認識(言語)をもてるようにする

3. きっかけを作る　

4

デザイナ エンジニア

今日の目標

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

5

今日やること

• かる～いgit管理 • Android Studioでプロジェクトを開く • 意外と迷う

• レイアウトの作成 • レイアウト作成において気をつけないといけない部分

6

今日やらないこと

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

7

アジェンダ

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

8

gitでソース落とす

• terminal立ち上げ • spotlightからterminalとうてばおk

• mkdir ~/Desktop/workspace • cd ~/Desktop/workspace • git clone https://github.com/ken5scal/AndroidTraining4Designer.git

• cd AndroidTraining4Designer

9

Android Studio

• Android Studioを開く • 起動してる間に、Genymotionを開き、Google Nexus 6 -5.1.0 -API22を立ち上げる

• 立ち上がったら、プロジェクトをロード • File > open > デスクトップのworkspace > AndroidTraining… • > build.gradleをクリック

• ツールバー上の再生ボタンが押せるようになったらクリック • しばらくするとChoose Deviceというダイアログが出るので、その中のデバイスをクリック

• そうするとGenymotionでアプリが走り出す

10

View サマリー

• View: 画面を構成する要素となるパーツ • TextView • EditText • ImageView • Button • etc

• MyApplicationアプリの「非レイアウトView」を参照

11

Layout サマリー

• Layout: 配下のView（もしくは子Layout)をグルーピングする • Linear Layout • View を縦横に並べます

• Relative Layout • 相対的にViewを並べる

• FrameLayout • Viewを重ねる

• ScrollView, ListView, GridView, etc • MyApplicationアプリの「なんとか Layout Example」を参照

12

View, Layoutの共通パラメタ

• ID名 • パラメタ名 • android:id

• パラメタの値 • “@+id/[ID名]

• 外部から参照する際に指定するID • 例: RelativeLayout

• 参照しなくてもつけておいて損はない • なんのviewかわかりやすくなる

• 参照: activity_non_layout.xml • ※Android Studioでapp > res > layout内のファイルを参照

13

View, Layoutの共通パラメタ

• サイズ • パラメタ名 • android:layout_height -> 高さ • android:layout_width -> 横幅

• パラメタの値 (dp) • match_parent -> 親Viewと同じサイズ • wrap_content -> コンテンツを表示するのに十分なサイズに調整

• 参照: activity_non_layout.xml • ※Android Studioでapp > res > layout内のファイルを参照

14

View, Layoutの共通パラメタ

• パディング、マージン • パラメタ名 • android:padding, android:layout_margin • 全方面への余白調整

• paddingほげ, layout_marginほげ • ほげ: Top, Bottom, Right, Left • ほげに指定した方向への余白調整

• パラメタの値 (dp) • 参照: activity_non_layout.xml

15

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

LinearLayout独自のパラメタ

• 整列方向: 子View(Layout)の並び方向を指定 • パラメタ名 • android:orientation

• パラメタの値 • horizontal • vertical

• デフォルトはhorizontal • 参照: activity_linear_layout_example.xml

17

LinearLayout独自のパラメタ

• 重み: 子View(Layout)が占有できる余白の割り当て比率 • パラメタ名 • android:layout_weight

• パラメタの値 • 1とか数字

• 注意: orientation方向のsizeパラメタを0dpにしなければいけない • 例: orientation: horizontalなら、width=“0dp”

• 画面一杯使って、うまくView(Layout)で分割したい時につかう • 参照: activity_linear_layout_example.xml

18

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

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

これらを組み合わせてレイアウトを作る

• じゃやってみるか • ということで実習

• 上記のバナー？みたいなのを作ってみましょう • activity_assignment.xml内の「ここから」「ここまで」の間を記入してください

21

完成イメージ

• Kengoが使ったView(Layout) • FrameLayout • RelativeLayout • ImageView

• やりかたはいろいろある（はず）

Thank you!