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

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

第二回

前回行ったこと

• Android アプリケーションの開発準備• 簡単なアプリケーションの実行

2

今回行うこと

• 画面を設計

3

前回の画面今回の目標画面

画面のデザイン

XML を説明する前に･･･実際にどういうものか見てみよう！！

4

Android では，主に XML という言語を使ってデザインする

XML の説明 (1 / 3)

5

ダブルクリック

• main.xml とは– 画面のレイアウトを決めるファイル

main.xml をクリック


6

構造を表すと…

<LinearLayout>

<TextView>


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 の文字列を参照する

strings.xml の説明 (1 / 2)

8

ダブルクリックstrings.xml をクリック

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

忘れた人のために ( 実行方法 )

10

「 Hello 」で右クリック

「 Android アプリケーション」をクリックで実行

エミュレータは自動的に起動してくれる！！

実際に変更してみよう

• 問題– 「 Hello World. Hello! 」を変更して，実際に

出力される文字が変わるか確かめてみよう！

11

変更後は左上のをクリックで保存

もしくは Ctrl + s でも保存

ボタンを追加してみよう

12

ボタンの追加 ( 未来予想図 )

• About ボタンを追加

13

ボタンの追加 ( 構造の説明 )


<LinearLayout>

<Button>

<TextView>

ボタンの追加 (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>

ここを追加するだけ

ボタンの追加 ( 動かしてみよう )

• ボタンが表示されたかな？• ボタンを押したときの動作は次回

16

例

17

1.縦にボタンを配置2.横にボタンを配置3.ボタンをいろいろ配

置4.表組みでいろいろ配

置

Eclipse にインポート• サンプルを使えるようにしよう

18

ファイル→インポートをクリック

「既存プロジェクトをワークスペースへ」を選択→次へをクリック

Eclipse にインポート

19

参照をクリック

解凍したフォルダの Sample を選択→ OK → 完了

インポートしたプロジェクトの説明

20

サンプル

// ここはコメントアウト

ここで実行したいサンプルを切り替えよう！！

ここで実行したいサンプルを切り替えよう！！

例 1 ( 縦にボタンを配置する )


<LinearLayout>

<Button>

<Button>

<Button>

例 1 ( 縦にボタンを配置する )

XML で表すと…

<LinearLayout>

<Button>

<Button>

<Button>


android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent“

</LinearLayout>

<Button android:layout_width= android:layout_height=

android:text="Button1“ />





例 2 ( 横にボタンを配置する )


<LinearLayout>

<Button> <Button> <Button>

例 2 ( 横にボタンを配置する )

XML で表すと…


android:orientation=“holizontal" android:layout_width="fill_parent" android:layout_height="fill_parent“

</LinearLayout>







<LinearLayout>


<LinearLayout> android.orientation=“vertical"

<LinearLayout> android.orientation=“horizontal"

例 3 ( ボタンをいろいろ配置する )


<LinearLayout> android.orientation=“vertical"

<Button>

<Button>

<Button>

<TableLayout>

例 4 ( 表組みでいろいろ配置してみる )

<TableRow><TextView> <Button>

<TableRow><TextView> <EditText>

<TableRow><TextView> <CheckBox>

<TableRow><TextView> <ImageView>

遊んでみよう！

• レイアウトや属性を色々変更してみよう– 3 個作ろう！！

1.紙を配るので，そこにまず作りたい画面の構造を書きましょう

2.実際に作成しましょう

27

作成する際の注意点

• 新たにプロジェクトを 1 個作ること– プロジェクト名： PBL2– アプリケーション名： subject2– パッケージ名： pbl.android. 学籍番号– Activity ： Subject

• layout フォルダの中に複数 xml ファイルを作る– 新規 xml ファイルの作り方

• layout フォルダを右クリック→新規→その他→ android xml ファイル→好きなファイル名を入力

28

おわりに

29

作ったプロジェクトの持ち帰り方

エクスポート (1 / 3)• 作成したプロジェクトを自宅に持って帰

れるようにする

30

Sample を右クリック→ エクスポートをクリック

「ファイル・システム」を選択→次へをクリック

エクスポート (2 / 3)

31

参照をクリック

デスクトップを選択→ OK

エクスポート (3 / 3)

• 以上でプロジェクトのエクスポートは完了です

• USB に入れて持って帰りましょう

32

33

課題

1. 作成したＸＭＬについて説明せよ． ( どういう要素を利用したか，どういう属性を指定したか． )

2. PBL で作りたいアプリケーションを述べよ

34

課題

1. 今後の PBL で作りたいアプリケーションを述べよ

2. 1 で述べたアプリケーションに必要だと思われる画面を作成せよ

35

ここから先はボツネタ

36

そのた：てーぶるれいあうと

• TableLayout– 表形式で表示したい場合のレイアウト

• 表の列数– 一番セルの数が多いカラム数が採用される

– TODO ちぇっくぼっくすもここで説明

37

てーぶる

38

2 行

3 列

てーぶる

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>

対応

その他

• RelativeLayout– 他のビューとの位置関係を指定することで表

示される位置を決めていくレイアウト• EditText

– 文字列を入力できる

40

その他

• 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>

対応

右寄せ

その他

42

入力切り替え

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


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

Documents

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

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