1 / 44

PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回

PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回. 前回行ったこと. Android アプリケーションの開発準備 簡単なアプリケーションの実行. 今回行うこと. 画面を設計. 前回の画面. 今回の目標画面. 画面のデザイン. Android では， 主に XML という言語を使ってデザインする. XML を説明する前に･･･ 実際にどういうものか見てみよう！！. XML の説明 (1 / 3). main.xml とは 画面のレイアウトを決めるファイル. ダブルクリック. main.xml をクリック.

nolan-house
Download Presentation

PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PBL -ソフトウェア班-組み込みソフトウェアの開発第二回

  2. 前回行ったこと • Android アプリケーションの開発準備 • 簡単なアプリケーションの実行

  3. 今回行うこと • 画面を設計 前回の画面 今回の目標画面

  4. 画面のデザイン Android では， 主に XML という言語を使ってデザインする XML を説明する前に･･･ 実際にどういうものか見てみよう！！

  5. XML の説明 (1 / 3) • main.xml とは • 画面のレイアウトを決めるファイル ダブルクリック main.xml をクリック

  6. <LinearLayout> <TextView> XML の説明 (2 / 3) 構造を 表すと…

  7. XML の説明 (3 / 3) <LinearLayout> <TextView> <LinearLayout> xmlns:android=… android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent " </LinearLayout> XMLで 表すと… <TextView android:layout_width="fill_parent" android:layout_height=“wrap_parent" android:text="@string/hello" /> • res/values/strings.xml の文字列を参照する

  8. strings.xml の説明 (1 / 2) ダブルクリック strings.xml をクリック

  9. strings.xml の説明 (2 / 2) • 3行目の「Hello World, Hello!」に注目 • @string/hello で参照される部分 @string/hello strings.xml 1: <?xml version="1.0" encoding="utf-8"?> 2: <resources> 3: <string name="hello">Hello World, Hello!</string> 4: <string name="app_name">sample</string> 5: </resources>

  10. 忘れた人のために (実行方法) 「Hello」 で右クリック エミュレータは自動的に 起動してくれる！！ 「Android アプリケーション」 をクリックで実行

  11. 実際に変更してみよう • 問題 • 「Hello World. Hello!」を変更して，実際に出力される文字が変わるか確かめてみよう！ • 変更後は左上の をクリックで保存 • もしくは Ctrl + s でも保存

  12. ボタンを追加してみよう

  13. ボタンの追加 (未来予想図) • About ボタンを追加

  14. ボタンの追加 (構造の説明) <LinearLayout> <Button> <TextView> 構造を 表すと…

  15. ボタンの追加 (main.xml を変更) 1: <?xml version="1.0" encoding="utf-8"?> 2: <LinearLayout xmlns:android="http://…" 3: android:orientation="vertical" 4: android:layout_width="fill_parent" 5: android:layout_height=“fill_parent"> 6: <TextView 7: android:layout_width="fill_parent" 8: android:layout_height="wrap_content" 9: android:text="@string/hello"/> 10: <Button 11: android:layout_width="fill_parent" 12: android:layout_height="wrap_content" 13: android:text="About"/> 14: </LinearLayout> ここを追加 するだけ

  16. ボタンの追加 (動かしてみよう) • ボタンが表示されたかな？ • ボタンを押したときの動作は次回

  17. 例 • 縦にボタンを配置 • 横にボタンを配置 • ボタンをいろいろ配置 • 表組みでいろいろ配置

  18. Eclipse にインポート • 「既存プロジェクトをワークスペースへ」を選択→次へ をクリック • ファイル→インポートをクリック サンプルを使えるようにしよう 18

  19. Eclipse にインポート • 参照をクリック • 解凍したフォルダのSampleを選択→ OK → 完了 19

  20. インポートしたプロジェクトの説明 • // ここはコメントアウト • サンプル ここで実行したいサンプルを切り替えよう！！ 20

  21. 例1 (縦にボタンを配置する) <LinearLayout> <Button> <Button> <Button> 構造を 表すと…

  22. 例1 (縦にボタンを配置する) <LinearLayout> <Button> <Button> <Button> <LinearLayout> xmlns:android=… android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent“ </LinearLayout> XMLで 表すと… <Button android:layout_width= android:layout_height= android:text="Button1“ /> <Button android:layout_width= android:layout_height= android:text="Button1“ /> <Button android:layout_width= android:layout_height= android:text="Button1“ />

  23. 例2 (横にボタンを配置する) <LinearLayout> <Button> <Button> <Button> 構造を 表すと…

  24. 例2 (横にボタンを配置する) <LinearLayout> <Button> <Button> <Button> <LinearLayout> xmlns:android=… android:orientation=“holizontal" android:layout_width="fill_parent" android:layout_height="fill_parent“ </LinearLayout> XMLで 表すと… <Button android:layout_width= android:layout_height= android:text="Button1“ /> <Button android:layout_width= android:layout_height= android:text="Button1“ /> <Button android:layout_width= android:layout_height= android:text="Button1“ />

  25. 例3 (ボタンをいろいろ配置する) <LinearLayout> android.orientation=“vertical" <LinearLayout> android.orientation=“vertical" <Button> <Button> <Button> <LinearLayout> android.orientation=“horizontal" <Button> <Button> <Button>

  26. 例4 (表組みでいろいろ配置してみる) <TableLayout> <TableRow> <Button> <TextView> <TableRow> <EditText> <TextView> <TableRow> <CheckBox> <TextView> <TableRow> <ImageView> <TextView>

  27. 遊んでみよう！ • レイアウトや属性を色々変更してみよう • 3個作ろう！！ • 紙を配るので，そこにまず作りたい画面の構造を書きましょう • 実際に作成しましょう

  28. 作成する際の注意点 • 新たにプロジェクトを1個作ること • プロジェクト名：PBL2 • アプリケーション名：subject2 • パッケージ名：pbl.android.学籍番号 • Activity：Subject • layout フォルダの中に複数 xml ファイルを作る • 新規 xml ファイルの作り方 • layoutフォルダを右クリック→新規→その他→android xml ファイル→好きなファイル名を入力

  29. おわりに 作ったプロジェクトの持ち帰り方

  30. エクスポート (1 / 3) • 作成したプロジェクトを自宅に持って帰れるようにする • 「ファイル・システム」を選択→次へ をクリック • Sample を右クリック • →エクスポートをクリック

  31. エクスポート (2 / 3) • 参照をクリック • デスクトップを選択→OK

  32. エクスポート (3 / 3) • 以上でプロジェクトのエクスポートは完了です • USB に入れて持って帰りましょう

  33. 課題 • 作成したＸＭＬについて説明せよ．(どういう要素を利用したか，どういう属性を指定したか．) • PBL で作りたいアプリケーションを述べよ

  34. 課題 今後の PBL で作りたいアプリケーションを述べよ 1 で述べたアプリケーションに必要だと思われる画面を作成せよ 34

  35. ここから先はボツネタ

  36. そのた：てーぶるれいあうと • TableLayout • 表形式で表示したい場合のレイアウト • 表の列数 • 一番セルの数が多いカラム数が採用される • TODOちぇっくぼっくすもここで説明

  37. てーぶる 3列 2行

  38. てーぶる 1: <?xml version="1.0" encoding="utf-8"?> 2: <TableLayout xmlns:android=http://... 3: android:layout_width="fill_parent“ 4: android:layout_height="fill_parent“ 5: android:stretchColumns=“1"> 6: <TableRow android:background="#696969"> 7: <TextView android:text="選択"/> 8: <TextView android:text="商品名"/> 9: <TextView android:text="数量"/> 9: </TableRow> 10: <TableRow> 11: <CheckBox/> 12: <TextView android:text="商品名"/> 13: <EditText/> 14: </TableRow> ・・・ 21: </TableLayout> 対応

  39. その他 • RelativeLayout • 他のビューとの位置関係を指定することで表示される位置を決めていくレイアウト • EditText • 文字列を入力できる

  40. その他 1: <?xml version="1.0" encoding="utf-8"?> 2: <RelativeLayout xmlns:android=http//… 3: android:layout_width="fill_parent" 4: android:layout_height="fill_parent"> 5: <TextView 6: android:id="@+id/label" 7: android:layout_width="fill_parent" 8: android:layout_height="wrap_content" 9: android:text="Type here:"/> 10: <EditText 11: android:id="@+id/entry" 12: android:layout_width="fill_parent" 13: android:layout_height="wrap_content" 14: android:layout_below="@id/label"/> 15: <Button 16: android:layout_width="wrap_content" 17: android:layout_height="wrap_content" 18: android:layout_below="@id/entry" 19: android:layout_alignParentRight="true" 20: android:text="OK"/> 21: </RelativeLayout> • android:id • ボタンやテキストビューにIDを設定する 対応 右寄せ

  41. その他 入力切り替え

  42. string.xml の変更 • 5行目を追加しよう • ボタンで表示する文字として使用 strings.xml 1: <?xml version="1.0" encoding="utf-8"?> 2: <resources> 3: <string name="hello">Hello World, Hello!</string> 4: <string name="app_name">sample</string> 5: <string name="about">About</string> 6: </resources>

  43. XML の説明 (5 / 5) • @string • res/values/strings.xml の文字列を参照する fill_parent : main.xml 1: <?xml version="1.0" encoding="utf-8"?> 2: <LinearLayout xmlns:android="http://…“ 3: android:orientation="vertical“ 4: android:layout_width="fill_parent“ 5: android:layout_height=“fill_parent”> 6: <TextView 7: android:layout_width="fill_parent" 8: android:layout_height="wrap_content" 9: android:text="@string/hello"/> 10: </LinearLayout> 対応 wrap_content :

More Related