1. 情報理工
Android勉強会
第一回
坂本大将

2. 最終ゴール
• 定期的な個別テーマ発表会
• なんかいっしょにつくれたらいいな、、、
• 突発的な企画実現の場として機能

3. 今日のゴール
自分で調べて何か作れるくらいのレベル

4. 今日の流れ
• 大将Part
１. 何を学べばアプリを作れるの？
２．開発環境の使い方
３．画面作成(レイアウト)について
• 維新Part
１. Activityについて
２．Intentについて
• まとめ

5. 何を学べばいいの？

6. 何を学べばいいの？
アプリ実装に必要なこと
• UI
• 画面遷移、アプリ間連携
• DB処理(SQLite)、データ処理
• ネットワーク通信
• 非同期処理
• ハードウェア、センサー
• バッチ処理、バックグラウンド処理
アプリの品質向上に必要なこと
• オブジェクト指向
• アーキテクチャ設計
• テスト技法、TDD
!
!

7. まずはこっち！
アプリ実装に必要なこと
• UI
• 画面遷移、アプリ間連携
• DB処理(SQLite)、データ処理
• ネットワーク通信
• 非同期処理
• ハードウェア、センサー
• バッチ処理、バックグラウンド処理

8. まずはこっち！
今日の分！
アプリ実装に必要なこと
• UI
• 画面遷移、アプリ間連携
• DB処理(SQLite)、データ処理
• ネットワーク通信
• 非同期処理
• ハードウェア、センサー
• バッチ処理、バックグラウンド処理

9. 単語だけ聞いても・・・
正直良くわかんない・・・

10. みんなだいすきLIN○の挙動を
追ってみよう！

11. ※あくまでイメージです。
実在のシステムや団体などとは
（ｒｙ

12. UI
レイアウト
ボタンタップ
検知
ボタン
画像
上部ヘッダー
タブメニュー
アニメーション

13. 画面遷移
タップ
遷移

14. アプリ間連携(Intent)
タップ
呼び出し

15. DB処理(SQLite)
ローカルのDBへ
会話ログの保管

16. コンテントプロバイダ
電話帳アプリ
が保持する
連絡先DBに
アクセス
外部アプリDB
と連携！

17. ネットワーク通信
タップ
サーバー
非同期処理で
送信

18. バックグラウンド処理
（Service）
サーバーから受信
バックグラウンドで
受信処理

19. バックグラウンド処理
（Service）
表示！！

20. この他に・・・
• 決められた時間に決まった処理
AlarmManager
• 地磁気センサー、加速度センサー、GPS

21. つまり！
!
• これらの仕組みを上手く組み合わせれば・・・
なんでも作れる！！！！

22. 開発を開始しよう！

23. 最初に・・・
ごめんなさい！
ぼくもAndroidStudio初心者です＞＜

24. 最初に・・・
AndroidStudio勉強会も
別途やりたい。。。

25. プロジェクト作成
・MinimumRequiredSDK
実行できる最小のAndroidバージョン
・TargetSDK
・Compile with

26. ディレクトリ,ファイル
• drawable
• menu
• values
• layout
• manifest

27. 画面構成について

28. アプリの画面構成
画面＝ビューの組み合わせ

29. ビューって？
画面を構成する二種類の要素の集合
• レイアウト
ウィジェットを置く領域。種類によって置かれ方が違う！
• ウィジェット
ボタン、チェックボックス、テキストボックス、etc

30. たとえば・・・

31. こんな感じ！
ウィジェットを
縦に並べる
領域を設置
＝レイアウト
レイアウトの中に
ボタン配置
階層構造！

32. さらに・・・

33. こんな感じ！
ウィジェットを
縦に並べる
レイアウト ウィジェット
を横に並べる
レイアウト
レイアウトの中に
レイアウト

34. つまり！
∼画面の作り方∼
1. 画面全体のレイアウトを作る
2. その中にウィジェットまたはレイアウトを置い
ていく。
以上！

35. とっても簡単！

36. 実際に作ってみる
どうやって作るの？
→XMLに記述していく
何学べばXMLに記述して画面作れるの？
・レイアウト、ウィジェットの種類
・サイズ指定などのパラメータ設定

37. 実際に作ってみる
まずはこの画面を作成しつつ
説明します！

38. 実際に作ってみる
・上から順にボタンを置く
・ボタンを中心寄せ
!
この二点で作れそう！

39. まずは画面全体のレイアウト
今回は
LinearLayout（縦または横に順に並べる）使用

40. 定義の仕方
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“match_parent"
android:gravity=“center"
android:orientation="vertical">
</LinearLayout>
ここでやってるのは、
・要素名の参照先の指定(最上階層のビューに必須)
・ビューサイズ指定
・内部のビューの配置(中央寄せ)
・ウィジェットを置く向きの指定

41. ビューサイズ指定
ビューは必ずwidthとheightを持つ！
☆指定方法
• wrap_content
• match_parent
• dp指定

42. ビューサイズ指定
wrap_content
表示に必要最低限なサイズに自動調整
match_parent
画面をフルに使う

43. ｄｐによるサイズ指定！

44. px指定だと・・・
Androidには多様な解像度の機種が存在！
→機種によって見た目が大きく変動する

45. そこで！
!
!
1dp = 160dpi(dot per inch)の機種で1px
→320dpiなら1dp＝2pxとなる

46. 解像度に合わせてサイズを調整！！！

47. 今回は・・・・
Layoutの配置なので画面全体を使いたい！
→match_parent

48. ビューの位置
gravity
ビューが内部に持っているビューを
どの位置に寄せるか。
layout_gravity
ビュー自体が親ビューに対してどこに寄るか。

49. どういうこと？
サンプル LinearLayoutLinearLayout
TextView
こういう画面が
あったとする

50. どういうこと？
サンプル
内部のLinearLayoutに
android:gravity= right
を設定

51. どういうこと？
サンプル
TextViewが右による！

52. どういうこと？
サンプル
内部のLinearLayoutに
android:layout_gravity= right
を設定

53. どういうこと？
サンプル
Layoutそのものが右による！

54. 今回は・・・
最上階層のLayoutの子の配置を中央寄せ
→gravity= center を設定

55. 向きの指定
android:orientation
!
vertical: 縦に並べる
!
horizontal: 横に並べる

56. 今回は・・・
縦に順に並べたい→verticalを設定

57. ボタンを置く
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“@string/start_text" />

58. 文字列定義
<strings.xml>
!
<?xml version="1.0" encoding="utf-8"?>
<resources>
!
<string name="app_name">MapSample</string>
<string name="action_settings">Settings</string>
<string name="hello_world">Hello world!</string>
!
</resources>
通常は外部定義ファイルに記述する！！

59. 全体のコード
!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height=“match_parent"
android:gravity=“center"
android:orientation=“vertical">
!
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“@string/start_text" />
!
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“@string/end_text" />
!
</LinearLayout>

60. 完成！！

61. 話はそれますが・・・
drawableフォルダ、たくさんあります。
なぜでしょうか・・・・？

62. 話はそれますが・・・
100dp
100dp
こんな画像を
表示する画面
を考えてください

63. dpをpxに直すと・・・
• 160dpiでは、
100px 100px
!
• 320dpiでは、
200px 200px

64. つまり
自動的に拡大、縮小を行う
→画像の品質が劣化する

65. そこで・・・
端末解像度に合わせて画像を用意する！
drawable-ldpi : 120dpi
drawable-mdpi : 160dpi
drawable-hdpi : 240dpi
drawable-xhdpi : 320dpi

66. 端末に合わせて適切なフォルダから
画像を選択してくれます！

67. あれ・・・？
一番dpi高い端末用に作っておけば
縮小されるだけだしよくね・・・？

68. あんまよくない！
• オーバヘッドの問題
• たまに形崩れるかもしれない
でも僕はわりとやってしまうことあります。。。
ごめんなさい、、、、、

69. お話戻します！

70. 他のレイアウト
他にどんなレイアウトがあるの？
• TableLayout
• FrameLayout
• RelativeLayout

71. TableLayout
表を作成(HTMLのtableタグとほぼ同じ！)
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
!
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent" >
!
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/hello" />
!
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/world" />
</TableRow>
!
</TableLayout>
Hello world

72. FrameLayout
ビューを重ねて配置していく
!
子ビュー一つずつにレイヤーが割り当てられ
重ねられていく。

73. FrameLayout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
!
<!-- 赤 -->
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#FF0000" />
!
<!-- 緑 -->
<ImageView
android:layout_width="190dp"
android:layout_height="190dp"
android:background="#00FF00" />
!
<!-- 青 -->
<ImageView
android:layout_width="180dp"
android:layout_height="180dp"
android:background="#0000FF" />
!
</FrameLayout>
(出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」)
https://github.com/mixi-inc/AndroidTraining

74. RelativeLayout
親または他の子ビューからの相対位置で配置

75. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
!
<Button
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="A"
android:textSize="16sp" />
!
<Button
android:id="@+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/a"
android:layout_toRightOf="@+id/a"
android:text="B" />
!
<Button
android:id="@+id/c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/b"
android:layout_below="@+id/b"
android:text="C" />
!
<Button
android:id="@+id/d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/c"
android:layout_alignTop="@+id/b"
android:layout_toRightOf="@+id/b"
android:text="D" />
!
</RelativeLayout>
(出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」)
https://github.com/mixi-inc/AndroidTraining

76. 他のウィジェット
• EditText：テキストボックス
• Spinner：選択ボックス
• RadioButton：ラジオボタン
• CheckBox：チェックボタン
• ListView: リスト
などなど盛りだくさん！！！！！！！逐次検索して！！

77. ちなみに・・・
ListView
こういうの！

78. 他のパラメータ指定
他にどんなパラメータがあるの？？
・Padding、Margin
・画像指定
・背景色、背景画像
・右寄せ、左寄せ
・文字色、書体
などなど盛りだくさん！！！！あとはリファレンス見て！！

79. 演習
(出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」)
https://github.com/mixi-inc/AndroidTraining

80. 演習
(出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」)
https://github.com/mixi-inc/AndroidTraining

81. 参考にするとよいです
Androidアプリ開発入門
http://androidguide.nomaki.jp/html/widget/
widgetMain.html
Android Developers API Reference
http://developer.android.com/reference/
packages.html

82. 参考にするとよいです
OpenGrok(Androidソースコード検索)
http://tools.oesf.biz/android-4.4.2_r1.0/

83. ‒Hiroki Sakamoto
Thank you for listening!!