Your SlideShare is downloading. ×
情報理工Android勉強会第一回大将Part
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

407
views

Published on

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
407
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 情報理工 Android勉強会 第一回 坂本大将
  • 2. 最終ゴール • 定期的な個別テーマ発表会 • なんかいっしょにつくれたらいいな、、、 • 突発的な企画実現の場として機能
  • 3. 今日のゴール 自分で調べて何か作れるくらいのレベル
  • 4. 今日の流れ • 大将Part 1. 何を学べばアプリを作れるの? 2.開発環境の使い方 3.画面作成(レイアウト)について • 維新Part 1. Activityについて 2.Intentについて • まとめ
  • 5. 何を学べばいいの?
  • 6. 何を学べばいいの? アプリ実装に必要なこと • UI • 画面遷移、アプリ間連携 • DB処理(SQLite)、データ処理 • ネットワーク通信 • 非同期処理 • ハードウェア、センサー • バッチ処理、バックグラウンド処理 アプリの品質向上に必要なこと • オブジェクト指向 • アーキテクチャ設計 • テスト技法、TDD ! !
  • 7. まずはこっち! アプリ実装に必要なこと • UI • 画面遷移、アプリ間連携 • DB処理(SQLite)、データ処理 • ネットワーク通信 • 非同期処理 • ハードウェア、センサー • バッチ処理、バックグラウンド処理
  • 8. まずはこっち! 今日の分! アプリ実装に必要なこと • UI • 画面遷移、アプリ間連携 • DB処理(SQLite)、データ処理 • ネットワーク通信 • 非同期処理 • ハードウェア、センサー • バッチ処理、バックグラウンド処理
  • 9. 単語だけ聞いても・・・ 正直良くわかんない・・・
  • 10. みんなだいすきLIN○の挙動を 追ってみよう!
  • 11. ※あくまでイメージです。 実在のシステムや団体などとは (ry
  • 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. dpによるサイズ指定!
  • 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!!

×