PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回
-
Upload
nolan-house -
Category
Documents
-
view
33 -
download
7
description
Transcript of PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回
![Page 1: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/1.jpg)
PBL - ソフトウェア班 -組み込みソフトウェアの開発
第二回
![Page 2: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/2.jpg)
前回行ったこと
• Android アプリケーションの開発準備• 簡単なアプリケーションの実行
2
![Page 3: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/3.jpg)
今回行うこと
• 画面を設計
3
前回の画面 今回の目標画面
![Page 4: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/4.jpg)
画面のデザイン
XML を説明する前に・・・ 実際にどういうものか見てみよう!!
4
Android では,主に XML という言語を使ってデザインする
![Page 5: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/5.jpg)
XML の説明 (1 / 3)
5
ダブルクリック
• main.xml とは– 画面のレイアウトを決めるファイル
main.xml をクリック
![Page 6: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/6.jpg)
XML の説明 (2 / 3)
6
構造を表すと…
<LinearLayout>
<TextView>
![Page 7: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/7.jpg)
XML の説明 (3 / 3)
XML で表すと…
<LinearLayout>
<TextView>
<LinearLayout> xmlns:android=…
android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent "
</LinearLayout>
<TextView android:layout_width="fill_parent" android:layout_height=“wrap_parent"
android:text="@string/hello" />
res/values/strings.xml の文字列を参照する
![Page 8: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/8.jpg)
strings.xml の説明 (1 / 2)
8
ダブルクリックstrings.xml をクリック
![Page 9: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/9.jpg)
strings.xml の説明 (2 / 2)
9
• 3 行目の「 Hello World, Hello! 」に注目– @string/hello で参照される部分
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>
strings.xml
@string/hello
![Page 10: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/10.jpg)
忘れた人のために ( 実行方法 )
10
「 Hello 」 で右クリック
「 Android アプリケーション」 をクリックで実行
エミュレータは自動的に起動してくれる!!
![Page 11: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/11.jpg)
実際に変更してみよう
• 問題– 「 Hello World. Hello! 」を変更して,実際に
出力される文字が変わるか確かめてみよう!
11
変更後は左上の をクリックで保存
もしくは Ctrl + s でも保存
![Page 12: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/12.jpg)
ボタンを追加してみよう
12
![Page 13: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/13.jpg)
ボタンの追加 ( 未来予想図 )
• About ボタンを追加
13
![Page 14: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/14.jpg)
ボタンの追加 ( 構造の説明 )
構造を表すと…
<LinearLayout>
<Button>
<TextView>
![Page 15: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/15.jpg)
ボタンの追加 (main.xml を変更 )
15
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: <Button11: android:layout_width="fill_parent" 12: android:layout_height="wrap_content" 13: android:text="About"/>14: </LinearLayout>
ここを追加するだけ
![Page 16: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/16.jpg)
ボタンの追加 ( 動かしてみよう )
• ボタンが表示されたかな?• ボタンを押したときの動作は次回
16
![Page 17: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/17.jpg)
例
17
1.縦にボタンを配置2.横にボタンを配置3.ボタンをいろいろ配
置4.表組みでいろいろ配
置
![Page 18: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/18.jpg)
Eclipse にインポート• サンプルを使えるようにしよう
18
ファイル→インポートをクリック
「既存プロジェクトをワークスペースへ」を選択→次へ をクリック
![Page 19: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/19.jpg)
Eclipse にインポート
19
参照をクリック
解凍したフォルダの Sample を選択→ OK → 完了
![Page 20: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/20.jpg)
インポートしたプロジェクトの説明
20
サンプル
// ここはコメントアウト
ここで実行したいサンプルを切り替えよう!!
ここで実行したいサンプルを切り替えよう!!
![Page 21: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/21.jpg)
例 1 ( 縦にボタンを配置する )
構造を表すと…
<LinearLayout>
<Button>
<Button>
<Button>
![Page 22: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/22.jpg)
例 1 ( 縦にボタンを配置する )
XML で表すと…
<LinearLayout>
<Button>
<Button>
<Button>
<LinearLayout> xmlns:android=…
android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent“
</LinearLayout>
<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“ />
![Page 23: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/23.jpg)
例 2 ( 横にボタンを配置する )
構造を表すと…
<LinearLayout>
<Button> <Button> <Button>
![Page 24: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/24.jpg)
例 2 ( 横にボタンを配置する )
XML で表すと…
<LinearLayout> xmlns:android=…
android:orientation=“holizontal" android:layout_width="fill_parent" android:layout_height="fill_parent“
</LinearLayout>
<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“ />
<LinearLayout>
<Button> <Button> <Button>
![Page 25: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/25.jpg)
<LinearLayout> android.orientation=“vertical"
<LinearLayout> android.orientation=“horizontal"
例 3 ( ボタンをいろいろ配置する )
<Button> <Button> <Button>
<LinearLayout> android.orientation=“vertical"
<Button>
<Button>
<Button>
![Page 26: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/26.jpg)
<TableLayout>
例 4 ( 表組みでいろいろ配置してみる )
<TableRow><TextView> <Button>
<TableRow><TextView> <EditText>
<TableRow><TextView> <CheckBox>
<TableRow><TextView> <ImageView>
![Page 27: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/27.jpg)
遊んでみよう!
• レイアウトや属性を色々変更してみよう– 3 個作ろう!!
1.紙を配るので,そこにまず作りたい画面の構造を書きましょう
2.実際に作成しましょう
27
![Page 28: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/28.jpg)
作成する際の注意点
• 新たにプロジェクトを 1 個作ること– プロジェクト名: PBL2– アプリケーション名: subject2– パッケージ名: pbl.android. 学籍番号– Activity : Subject
• layout フォルダの中に複数 xml ファイルを作る– 新規 xml ファイルの作り方
• layout フォルダを右クリック→新規→その他→ android xml ファイル→好きなファイル名を入力
28
![Page 29: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/29.jpg)
おわりに
29
作ったプロジェクトの持ち帰り方
![Page 30: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/30.jpg)
エクスポート (1 / 3)• 作成したプロジェクトを自宅に持って帰
れるようにする
30
Sample を右クリック→ エクスポートをクリック
「ファイル・システム」を選択→次へ をクリック
![Page 31: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/31.jpg)
エクスポート (2 / 3)
31
参照をクリック
デスクトップを選択→ OK
![Page 32: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/32.jpg)
エクスポート (3 / 3)
• 以上でプロジェクトのエクスポートは完了です
• USB に入れて持って帰りましょう
32
![Page 33: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/33.jpg)
33
課題
1. 作成したXMLについて説明せよ. ( どういう要素を利用したか,どういう属性を指定したか. )
2. PBL で作りたいアプリケーションを述べよ
![Page 34: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/34.jpg)
34
課題
1. 今後の PBL で作りたいアプリケーションを述べよ
2. 1 で述べたアプリケーションに必要だと思われる画面を作成せよ
![Page 35: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/35.jpg)
35
![Page 36: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/36.jpg)
ここから先はボツネタ
36
![Page 37: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/37.jpg)
そのた:てーぶるれいあうと
• TableLayout– 表形式で表示したい場合のレイアウト
• 表の列数– 一番セルの数が多いカラム数が採用される
– TODO ちぇっくぼっくすもここで説明
37
![Page 38: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/38.jpg)
てーぶる
38
2 行
3 列
![Page 39: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/39.jpg)
てーぶる
39
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>
対応
![Page 40: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/40.jpg)
その他
• RelativeLayout– 他のビューとの位置関係を指定することで表
示される位置を決めていくレイアウト• EditText
– 文字列を入力できる
40
![Page 41: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/41.jpg)
その他
• android:id–ボタンやテキストビューに ID を設定する
41
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: <EditText11: android:id="@+id/entry"12: android:layout_width="fill_parent"13: android:layout_height="wrap_content"14: android:layout_below="@id/label"/>15: <Button16: 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>
対応
右寄せ
![Page 42: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/42.jpg)
その他
42
入力切り替え
![Page 43: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/43.jpg)
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>
strings.xml
string.xml の変更
• 5 行目を追加しよう– ボタンで表示する文字として使用
43
![Page 44: PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回](https://reader035.fdocument.pub/reader035/viewer/2022062304/5681359d550346895d9d11e7/html5/thumbnails/44.jpg)
XML の説明 (5 / 5)
44
対応
• @string– res/values/strings.xml の文字列を参照する
fill_parent :
wrap_content :
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>
main.xml