情報理工
Android勉強会
第一回
坂本大将
最終ゴール
• 定期的な個別テーマ発表会
• なんかいっしょにつくれたらいいな、、、
• 突発的な企画実現の場として機能
今日のゴール
自分で調べて何か作れるくらいのレベル
今日の流れ
• 大将Part
1. 何を学べばアプリを作れるの?
2.開発環境の使い方
3.画面作成(レイアウト)について
• 維新Part
1. Activityについて
2.Intentについて
• まとめ
何を学べばいいの?
何を学べばいいの?
アプリ実装に必要なこと
• UI
• 画面遷移、アプリ間連携
• DB処理(SQLite)、データ処理
• ネットワーク通信
• 非同期処理
• ハードウェア、センサー
• バッチ処理、バックグラウンド処理
アプリの品質向上...
まずはこっち!
アプリ実装に必要なこと
• UI
• 画面遷移、アプリ間連携
• DB処理(SQLite)、データ処理
• ネットワーク通信
• 非同期処理
• ハードウェア、センサー
• バッチ処理、バックグラウンド処理
まずはこっち!
今日の分!
アプリ実装に必要なこと
• UI
• 画面遷移、アプリ間連携
• DB処理(SQLite)、データ処理
• ネットワーク通信
• 非同期処理
• ハードウェア、センサー
• バッチ処理、バックグラウンド処理
単語だけ聞いても・・・
正直良くわかんない・・・
みんなだいすきLIN○の挙動を
追ってみよう!
※あくまでイメージです。
実在のシステムや団体などとは
(ry
UI
レイアウト
ボタンタップ
検知
ボタン
画像
上部ヘッダー
タブメニュー
アニメーション
画面遷移
タップ
遷移
アプリ間連携(Intent)
タップ
呼び出し
DB処理(SQLite)
ローカルのDBへ
会話ログの保管
コンテントプロバイダ
電話帳アプリ
が保持する
連絡先DBに
アクセス
外部アプリDB
と連携!
ネットワーク通信
タップ
サーバー
非同期処理で
送信
バックグラウンド処理
(Service)
サーバーから受信
バックグラウンドで
受信処理
バックグラウンド処理
(Service)
表示!!
この他に・・・
• 決められた時間に決まった処理
AlarmManager
• 地磁気センサー、加速度センサー、GPS
つまり!
!
• これらの仕組みを上手く組み合わせれば・・・
なんでも作れる!!!!
開発を開始しよう!
最初に・・・
ごめんなさい!
ぼくもAndroidStudio初心者です><
最初に・・・
AndroidStudio勉強会も
別途やりたい。。。
プロジェクト作成
・MinimumRequiredSDK
 実行できる最小のAndroidバージョン
・TargetSDK
・Compile with
ディレクトリ,ファイル
• drawable
• menu
• values
• layout
• manifest
画面構成について
アプリの画面構成
画面=ビューの組み合わせ
ビューって?
画面を構成する二種類の要素の集合
• レイアウト
ウィジェットを置く領域。種類によって置かれ方が違う!
• ウィジェット
ボタン、チェックボックス、テキストボックス、etc
たとえば・・・
こんな感じ!
ウィジェットを
縦に並べる
領域を設置
=レイアウト
レイアウトの中に
ボタン配置
階層構造!
さらに・・・
こんな感じ!
ウィジェットを
縦に並べる
レイアウト ウィジェット
を横に並べる
レイアウト
レイアウトの中に
レイアウト
つまり!
∼画面の作り方∼
1. 画面全体のレイアウトを作る
2. その中にウィジェットまたはレイアウトを置い
ていく。
以上!
とっても簡単!
実際に作ってみる
どうやって作るの?
 →XMLに記述していく
何学べばXMLに記述して画面作れるの?
 ・レイアウト、ウィジェットの種類
 ・サイズ指定などのパラメータ設定
実際に作ってみる
まずはこの画面を作成しつつ
説明します!
実際に作ってみる
・上から順にボタンを置く
・ボタンを中心寄せ
!
この二点で作れそう!
まずは画面全体のレイアウト
今回は
 LinearLayout(縦または横に順に並べる)使用
定義の仕方
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"	
android:layout_width="match_parent"	
andro...
ビューサイズ指定
ビューは必ずwidthとheightを持つ!
☆指定方法
•   wrap_content
• match_parent
• dp指定
ビューサイズ指定
wrap_content
表示に必要最低限なサイズに自動調整
match_parent
画面をフルに使う
dpによるサイズ指定!
px指定だと・・・
Androidには多様な解像度の機種が存在!
→機種によって見た目が大きく変動する
そこで!
!
!
1dp = 160dpi(dot per inch)の機種で1px
→320dpiなら1dp=2pxとなる
解像度に合わせてサイズを調整!!!
今回は・・・・
Layoutの配置なので画面全体を使いたい!
→match_parent
ビューの位置
gravity
 ビューが内部に持っているビューを
 どの位置に寄せるか。
layout_gravity
ビュー自体が親ビューに対してどこに寄るか。
どういうこと?
サンプル LinearLayoutLinearLayout
TextView
こういう画面が
あったとする
どういうこと?
サンプル
内部のLinearLayoutに
android:gravity= right
を設定
どういうこと?
サンプル
TextViewが右による!
どういうこと?
サンプル
内部のLinearLayoutに
android:layout_gravity= right
を設定
どういうこと?
サンプル
Layoutそのものが右による!
今回は・・・
最上階層のLayoutの子の配置を中央寄せ
→gravity= center を設定
向きの指定
android:orientation	
!
	
	 vertical: 縦に並べる	
!
	 horizontal: 横に並べる
今回は・・・
縦に順に並べたい→verticalを設定
ボタンを置く
	 	 <Button	
android:layout_width="wrap_content"	
android:layout_height="wrap_content"	
android:text=“@string/start...
文字列定義
<strings.xml>	
!
<?xml version="1.0" encoding="utf-8"?>	
<resources>	
!
<string name="app_name">MapSample</string>	
...
全体のコード
!
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"	
android:layout_width="match_parent"	
an...
完成!!
話はそれますが・・・
drawableフォルダ、たくさんあります。
なぜでしょうか・・・・?
話はそれますが・・・
100dp
100dp
こんな画像を
表示する画面
を考えてください
dpをpxに直すと・・・
• 160dpiでは、
100px 100px
!
• 320dpiでは、
200px 200px
つまり
自動的に拡大、縮小を行う
→画像の品質が劣化する
そこで・・・
端末解像度に合わせて画像を用意する!
  drawable-ldpi : 120dpi
drawable-mdpi : 160dpi
drawable-hdpi : 240dpi
drawable-xhdpi : 320dpi
端末に合わせて適切なフォルダから
画像を選択してくれます!
あれ・・・?
一番dpi高い端末用に作っておけば
縮小されるだけだしよくね・・・?
あんまよくない!
• オーバヘッドの問題
• たまに形崩れるかもしれない
 
 でも僕はわりとやってしまうことあります。。。
 ごめんなさい、、、、、
お話戻します!
他のレイアウト
他にどんなレイアウトがあるの?
• TableLayout
• FrameLayout
• RelativeLayout
TableLayout
表を作成(HTMLのtableタグとほぼ同じ!)
<TableLayout	
android:layout_width="match_parent"	
android:layout_height="wrap_conten...
FrameLayout
ビューを重ねて配置していく
!
 子ビュー一つずつにレイヤーが割り当てられ
 重ねられていく。
FrameLayout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"	
xmlns:tools="http://schemas.android.c...
RelativeLayout
親または他の子ビューからの相対位置で配置
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"	
xmlns:tools="http://schemas.android.com/tools"...
他のウィジェット
• EditText:テキストボックス
• Spinner:選択ボックス
• RadioButton:ラジオボタン
• CheckBox:チェックボタン
• ListView: リスト
などなど盛りだくさん!!!!!!!逐次検...
ちなみに・・・
ListView
こういうの!
他のパラメータ指定
他にどんなパラメータがあるの??
・Padding、Margin
 ・画像指定
 ・背景色、背景画像
 ・右寄せ、左寄せ
 ・文字色、書体
  などなど盛りだくさん!!!!あとはリファレンス見て!!
演習
(出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」)
https://github.com/mixi-inc/AndroidTraining
演習
(出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」)
https://github.com/mixi-inc/AndroidTraining
参考にするとよいです
Androidアプリ開発入門
http://androidguide.nomaki.jp/html/widget/
widgetMain.html
Android Developers API Reference
http...
参考にするとよいです
OpenGrok(Androidソースコード検索)
http://tools.oesf.biz/android-4.4.2_r1.0/
‒Hiroki Sakamoto
Thank you for listening!!
Upcoming SlideShare
Loading in …5
×

情報理工Android勉強会第一回大将Part

942 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
942
On SlideShare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

情報理工Android勉強会第一回大将Part

  1. 1. 情報理工 Android勉強会 第一回 坂本大将
  2. 2. 最終ゴール • 定期的な個別テーマ発表会 • なんかいっしょにつくれたらいいな、、、 • 突発的な企画実現の場として機能
  3. 3. 今日のゴール 自分で調べて何か作れるくらいのレベル
  4. 4. 今日の流れ • 大将Part 1. 何を学べばアプリを作れるの? 2.開発環境の使い方 3.画面作成(レイアウト)について • 維新Part 1. Activityについて 2.Intentについて • まとめ
  5. 5. 何を学べばいいの?
  6. 6. 何を学べばいいの? アプリ実装に必要なこと • UI • 画面遷移、アプリ間連携 • DB処理(SQLite)、データ処理 • ネットワーク通信 • 非同期処理 • ハードウェア、センサー • バッチ処理、バックグラウンド処理 アプリの品質向上に必要なこと • オブジェクト指向 • アーキテクチャ設計 • テスト技法、TDD ! !
  7. 7. まずはこっち! アプリ実装に必要なこと • UI • 画面遷移、アプリ間連携 • DB処理(SQLite)、データ処理 • ネットワーク通信 • 非同期処理 • ハードウェア、センサー • バッチ処理、バックグラウンド処理
  8. 8. まずはこっち! 今日の分! アプリ実装に必要なこと • UI • 画面遷移、アプリ間連携 • DB処理(SQLite)、データ処理 • ネットワーク通信 • 非同期処理 • ハードウェア、センサー • バッチ処理、バックグラウンド処理
  9. 9. 単語だけ聞いても・・・ 正直良くわかんない・・・
  10. 10. みんなだいすきLIN○の挙動を 追ってみよう!
  11. 11. ※あくまでイメージです。 実在のシステムや団体などとは (ry
  12. 12. UI レイアウト ボタンタップ 検知 ボタン 画像 上部ヘッダー タブメニュー アニメーション
  13. 13. 画面遷移 タップ 遷移
  14. 14. アプリ間連携(Intent) タップ 呼び出し
  15. 15. DB処理(SQLite) ローカルのDBへ 会話ログの保管
  16. 16. コンテントプロバイダ 電話帳アプリ が保持する 連絡先DBに アクセス 外部アプリDB と連携!
  17. 17. ネットワーク通信 タップ サーバー 非同期処理で 送信
  18. 18. バックグラウンド処理 (Service) サーバーから受信 バックグラウンドで 受信処理
  19. 19. バックグラウンド処理 (Service) 表示!!
  20. 20. この他に・・・ • 決められた時間に決まった処理 AlarmManager • 地磁気センサー、加速度センサー、GPS
  21. 21. つまり! ! • これらの仕組みを上手く組み合わせれば・・・ なんでも作れる!!!!
  22. 22. 開発を開始しよう!
  23. 23. 最初に・・・ ごめんなさい! ぼくもAndroidStudio初心者です><
  24. 24. 最初に・・・ AndroidStudio勉強会も 別途やりたい。。。
  25. 25. プロジェクト作成 ・MinimumRequiredSDK  実行できる最小のAndroidバージョン ・TargetSDK ・Compile with
  26. 26. ディレクトリ,ファイル • drawable • menu • values • layout • manifest
  27. 27. 画面構成について
  28. 28. アプリの画面構成 画面=ビューの組み合わせ
  29. 29. ビューって? 画面を構成する二種類の要素の集合 • レイアウト ウィジェットを置く領域。種類によって置かれ方が違う! • ウィジェット ボタン、チェックボックス、テキストボックス、etc
  30. 30. たとえば・・・
  31. 31. こんな感じ! ウィジェットを 縦に並べる 領域を設置 =レイアウト レイアウトの中に ボタン配置 階層構造!
  32. 32. さらに・・・
  33. 33. こんな感じ! ウィジェットを 縦に並べる レイアウト ウィジェット を横に並べる レイアウト レイアウトの中に レイアウト
  34. 34. つまり! ∼画面の作り方∼ 1. 画面全体のレイアウトを作る 2. その中にウィジェットまたはレイアウトを置い ていく。 以上!
  35. 35. とっても簡単!
  36. 36. 実際に作ってみる どうやって作るの?  →XMLに記述していく 何学べばXMLに記述して画面作れるの?  ・レイアウト、ウィジェットの種類  ・サイズ指定などのパラメータ設定
  37. 37. 実際に作ってみる まずはこの画面を作成しつつ 説明します!
  38. 38. 実際に作ってみる ・上から順にボタンを置く ・ボタンを中心寄せ ! この二点で作れそう!
  39. 39. まずは画面全体のレイアウト 今回は  LinearLayout(縦または横に順に並べる)使用
  40. 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. 41. ビューサイズ指定 ビューは必ずwidthとheightを持つ! ☆指定方法 •   wrap_content • match_parent • dp指定
  42. 42. ビューサイズ指定 wrap_content 表示に必要最低限なサイズに自動調整 match_parent 画面をフルに使う
  43. 43. dpによるサイズ指定!
  44. 44. px指定だと・・・ Androidには多様な解像度の機種が存在! →機種によって見た目が大きく変動する
  45. 45. そこで! ! ! 1dp = 160dpi(dot per inch)の機種で1px →320dpiなら1dp=2pxとなる
  46. 46. 解像度に合わせてサイズを調整!!!
  47. 47. 今回は・・・・ Layoutの配置なので画面全体を使いたい! →match_parent
  48. 48. ビューの位置 gravity  ビューが内部に持っているビューを  どの位置に寄せるか。 layout_gravity ビュー自体が親ビューに対してどこに寄るか。
  49. 49. どういうこと? サンプル LinearLayoutLinearLayout TextView こういう画面が あったとする
  50. 50. どういうこと? サンプル 内部のLinearLayoutに android:gravity= right を設定
  51. 51. どういうこと? サンプル TextViewが右による!
  52. 52. どういうこと? サンプル 内部のLinearLayoutに android:layout_gravity= right を設定
  53. 53. どういうこと? サンプル Layoutそのものが右による!
  54. 54. 今回は・・・ 最上階層のLayoutの子の配置を中央寄せ →gravity= center を設定
  55. 55. 向きの指定 android:orientation ! vertical: 縦に並べる ! horizontal: 横に並べる
  56. 56. 今回は・・・ 縦に順に並べたい→verticalを設定
  57. 57. ボタンを置く <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“@string/start_text" />
  58. 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. 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. 60. 完成!!
  61. 61. 話はそれますが・・・ drawableフォルダ、たくさんあります。 なぜでしょうか・・・・?
  62. 62. 話はそれますが・・・ 100dp 100dp こんな画像を 表示する画面 を考えてください
  63. 63. dpをpxに直すと・・・ • 160dpiでは、 100px 100px ! • 320dpiでは、 200px 200px
  64. 64. つまり 自動的に拡大、縮小を行う →画像の品質が劣化する
  65. 65. そこで・・・ 端末解像度に合わせて画像を用意する!   drawable-ldpi : 120dpi drawable-mdpi : 160dpi drawable-hdpi : 240dpi drawable-xhdpi : 320dpi
  66. 66. 端末に合わせて適切なフォルダから 画像を選択してくれます!
  67. 67. あれ・・・? 一番dpi高い端末用に作っておけば 縮小されるだけだしよくね・・・?
  68. 68. あんまよくない! • オーバヘッドの問題 • たまに形崩れるかもしれない    でも僕はわりとやってしまうことあります。。。  ごめんなさい、、、、、
  69. 69. お話戻します!
  70. 70. 他のレイアウト 他にどんなレイアウトがあるの? • TableLayout • FrameLayout • RelativeLayout
  71. 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. 72. FrameLayout ビューを重ねて配置していく !  子ビュー一つずつにレイヤーが割り当てられ  重ねられていく。
  73. 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. 74. RelativeLayout 親または他の子ビューからの相対位置で配置
  75. 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. 76. 他のウィジェット • EditText:テキストボックス • Spinner:選択ボックス • RadioButton:ラジオボタン • CheckBox:チェックボタン • ListView: リスト などなど盛りだくさん!!!!!!!逐次検索して!!
  77. 77. ちなみに・・・ ListView こういうの!
  78. 78. 他のパラメータ指定 他にどんなパラメータがあるの?? ・Padding、Margin  ・画像指定  ・背景色、背景画像  ・右寄せ、左寄せ  ・文字色、書体   などなど盛りだくさん!!!!あとはリファレンス見て!!
  79. 79. 演習 (出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」) https://github.com/mixi-inc/AndroidTraining
  80. 80. 演習 (出典:Github mixi-inc / AndroidTraining 「レイアウトの作成」) https://github.com/mixi-inc/AndroidTraining
  81. 81. 参考にするとよいです Androidアプリ開発入門 http://androidguide.nomaki.jp/html/widget/ widgetMain.html Android Developers API Reference http://developer.android.com/reference/ packages.html
  82. 82. 参考にするとよいです OpenGrok(Androidソースコード検索) http://tools.oesf.biz/android-4.4.2_r1.0/
  83. 83. ‒Hiroki Sakamoto Thank you for listening!!

×