Upload
nolan-house
View
33
Download
7
Embed Size (px)
DESCRIPTION
PBL - ソフトウェア班 - 組み込みソフトウェアの開発 第二回. 前回行ったこと. Android アプリケーションの開発準備 簡単なアプリケーションの実行. 今回行うこと. 画面を設計. 前回の画面. 今回の目標画面. 画面のデザイン. Android では, 主に XML という言語を使ってデザインする. XML を説明する前に・・・ 実際にどういうものか見てみよう!!. XML の説明 (1 / 3). main.xml とは 画面のレイアウトを決めるファイル. ダブルクリック. main.xml をクリック. - PowerPoint PPT Presentation
Citation preview
PBL - ソフトウェア班 -組み込みソフトウェアの開発
第二回
前回行ったこと
• Android アプリケーションの開発準備• 簡単なアプリケーションの実行
2
今回行うこと
• 画面を設計
3
前回の画面 今回の目標画面
画面のデザイン
XML を説明する前に・・・ 実際にどういうものか見てみよう!!
4
Android では,主に XML という言語を使ってデザインする
XML の説明 (1 / 3)
5
ダブルクリック
• main.xml とは– 画面のレイアウトを決めるファイル
main.xml をクリック
XML の説明 (2 / 3)
6
構造を表すと…
<LinearLayout>
<TextView>
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 の文字列を参照する
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>
<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“ />
例 2 ( 横にボタンを配置する )
構造を表すと…
<LinearLayout>
<Button> <Button> <Button>
例 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>
<LinearLayout> android.orientation=“vertical"
<LinearLayout> android.orientation=“horizontal"
例 3 ( ボタンをいろいろ配置する )
<Button> <Button> <Button>
<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. 作成したXMLについて説明せよ. ( どういう要素を利用したか,どういう属性を指定したか. )
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
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