Transcript pptx

レイアウトの基礎
2012/04/27
０．目次

プロジェクトの作り方

アプリの実行

ソースの解説

レイアウト
１．プロジェクトの作り方

ファイル->新規->Androidプロジェクトと選
択します
１－１．プロジェクト名の指定

適当なプロジェクト名を指定して”次へ”を
押します（図ではHelloAndroid）
１－２．SDKの指定

SDKのバージョンを指定します。ここ
では2.3.3にチェックを入れ”次へ”を押
します
１－３．アプリの設定


パッケージ名は、普通は所属する団体のドメイン
を入れますが何でもいいです
アクティビティー名がデフォルトのJavaファイル名
になります
MinimumSDKでは、このアプ
リを実行できるAPIレベルの
下限を指定できます
(前のスライドを参照)

１－３．アプリの設定

完了を押すとプロジェクトができてい
ます
２．アプリの実行(初回設定)

プロジェクトフォルダを右クリック->実行->実行
の構成を選びAndroidアプリケーションをクリック
してから左上のアイコンをクリックします
２－１．実行構成の作成

下のような画面になることを確認して
参照を押します
２－２．実行するプロジェクトの指定

さっき作ったプロジェクトを選びOK
を押します
２－３．実行構成の設定

プロジェクトの欄に表示されたら、わ
かりやすいように名前の欄も同じ名前
を入力します
２－４．AVDの指定

ターゲットタブ
を開き、前回
作ったAVDに
チェックを入れ
実行を押します
２－５．実行

エミュレーター
が起動し、それ
からアプリが実
行されます

何度も言いますが、
エミュレーターの
起動には非常に時
間がかかるので、
不用意に閉じたり
しないようにしま
しょう
２－６．実行状態のチェック

エミュレーターは起動したが、アプリ
が動かない等の状態になった場合はコ
ンソールで状態を見てみましょう
２－６．実行状態のチェック

コンソールの
ウィンドウが
出ていない場
合は
ウィンドウ->
ビューの表示->
コンソール
で出せます
３．ソースの解説

作ったアプリがどのように動いていた
のかを見てみましょう
３－１．プロジェクトの構成
Activity継承クラス。メインプログラム
main.xmlやstrings.xmlに定義した要素を識別
するIDを保存するクラス。
デバイスの解像度毎に画像ファイル格納する場所
レイアウトに関するxmlファイルを格納する場所
各種の値を設定するxmlファイルを格納する場所
androidアプリの実行に必要な情報を設定
コードの難読化設定ファイル
ターゲットのバージョン設定ファイル
３－２．Src/HelloAndroidActivity.java
package jp.ac.hosei.k.cis;
import android.app.Activity;
import android.os.Bundle;
public class HelloAndroidActivity extends Activity {
/* アクティビティが起動された時に実行するメソッド */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 画面に表示するViewの設定をするメソッド
setContentView(R.layout.main);
}
}
※setContentViewに渡しているR.layout.mainはres/layout/main.xmlを指している。
３－３．gen/R.java
/* AUTO-GENERATED FILE. DO NOT MODIFY.*/
package jp.ac.hosei.k.cis;
public final class R {
public static final class attr {
}
public static final class drawable {
public static final int ic_launcher=0x7f020000;
}
public static final class layout {
public static final int main=0x7f030000;
}
public static final class string {
public static final int app_name=0x7f040001;
public static final int hello=0x7f040000;
}
}
画像ファイルやレイアウト
の設定にIDを割り振り、
srcフォルダ内のjavaファイ
ルで呼び出せるようにして
くれるjavaファイル
コメントにあるようにIDを
自動で生成してくれるため
開発者が弄る必要はない
３－４．res/layout/main.xml
レイアウトの設定ファイル
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
縦横共に画面いっぱいに
レイアウトを適用
android:layout_height="fill_parent"
縦方向に並べる
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>
３－５．res/values/string.xml
Valuesフォルダ内のファイルはデータの各種値を設定していく
もので、string.xmlは特に文字列に関する値を設定する
<resources>
<string name="hello">Hello World, HelloAndroidActivity!</string>
<string name="app_name">HelloAndroid</string>
</resources>
３－６．AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="jp.ac.hosei.k.cis"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="10" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".HelloAndroidActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
４．Javaによるレイアウト
androidアプリでは、Javaでプログラムを
書いてxmlでレイアウトや文字などを設
定しないといけない？
xmlを使わずにJavaだけでもレイアウト
を決められます
新しくShowTextというプロジェクトを作って
みましょう
４－１．ShowTextActivity.java
public class ShowTextActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// レイアウトを設定するオブジェクトの作成
LinearLayout ll = new LinearLayout(this);
// レイアウトの指定
setContentView(ll);
// 文字を表示するオブジェクトの作成
TextView tv = new TextView(this);
// 文字列の指定
tv.setText("ようこそアンドロイドへ");
// レイアウトに追加
ll.addView(tv);
}
}
４－２．アプリの実行

一度設定をしたので、プロジェクトを
選択して▷ボタンを押すと実行できま
す
４－２．アプリの実行

うまくいくと→のよう
になります
Waiting for HOME ('android.process.acore')
to be launched...
で止まって動かない人は、エミュレー
ターを起動したまま、再度実行してみま
しょう
４－３．ソースの解説
public class ShowTextActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// レイアウトを設定するオブジェクトの作成
LinearLayout ll = new LinearLayout(this);
// レイアウトの指定
setContentView(ll);
// 文字を表示するオブジェクトの作成
レイアウト
TextView tv = new TextView(this);
ビュー
// 文字列の指定
tv.setText("ようこそアンドロイドへ");
// レイアウトに追加
ll.addView(tv);
}
}
アクティビ
ティ
４－４．アクティビティとは
アクティビティは簡単に言うと”画面”です。
 アクティビティには以下のようなメソッド
が用意され、アプリを管理しています

メソッド名
効果
onCreate
アプリケーション起動時
onResume
他のアプリからこのアプリ
に移った時
onPause
このアプリを起動中に他の
アプリを呼び出した時
onDestroy
アプリケーション終了時
４－５．レイアウトの指定
プログラム中の
// レイアウトを設定するオブジェクトの作成
LinearLayout ll = new LinearLayout(this);
// レイアウトの指定
setContentView(ll);
の部分は文字通りレイアウトの指定をしています。レイアウト
は、配置位置やサイズを管理するためのもので、androidアプリ
ケーションで非常に重要なものです
LinearLayoutとは、レイアウトクラスの一つでビュー（部品）を
一直線に並べます。
※他にも様々なレイアウトクラスがあります
４－６．ビューの指定
プログラム中の
// 文字を表示するオブジェクトの作成
TextView tv = new TextView(this);
// 文字列の指定
tv.setText("ようこそアンドロイドへ");
// レイアウトに追加
ll.addView(tv);
の部分はビューという画面に表示する部品の設定をしています。
中でもTextViewは文字列のビューを扱うクラスで、setText()で文字
列を指定します。
※他にも様々なビュークラスがあります
※ビューは作成しても最後にレイアウトに追加しないと表示され
ません
４－６．レイアウトとビュー
アクティビティ
レイアウト
ビュー
ビュー
※複数のレイアウトを組み合わせて複雑なレイアウトを作成すること
も可能
練習１

ShowTextActivityを書き加えて、もう一
つ文字列を表示してみましょう
ヒント：
文字列を表示するには
1. テキストビューの作成
2. 文字列の指定
3. レイアウトに追加
の３つのステップが必要
練習２
練習１で作ったプログラムに以下の赤文字の部分を書き加えて
実行してみましょう
// レイアウトを設定するオブジェクトの作成
LinearLayout ll = new LinearLayout(this);
ll.setOrientation(LinearLayout.VERTICAL);
// レイアウトの指定
setContentView(ll);
５．様々なレイアウト

1.
2.
3.
先程紹介したLinearLayoutの他に様々
なレイアウトがあります
TableLayout
RelativeLayout
FrameLayout
TableLayout
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TableLayout tl = new TableLayout(this);
setContentView(tl);
TableRow tr1 = new TableRow(this);
TableRow tr2 = new TableRow(this);
TextView tv1 = new TextView(this);
TextView tv2 = new TextView(this);
TextView tv3= new TextView(this);
TextView tv4 = new TextView(this);
tv1.setText("one");
tv2.setText("two");
tv3.setText("three");
tv4.setText("four");
tr1.addView(tv1);
tr1.addView(tv2);
tl.addView(tr1);
tr2.addView(tv3);
tr2.addView(tv4);
tl.addView(tr2);
}
}
実行結果
詳しく知りたい時は…

ネットで調べるか、android-sdk\docsにある
index.htmlを開きReferenceのタブを開くとクラス一
覧の解説があります（ただし英語）
ボタン

ボタンも、テキストビューと同じよう
に生成できます
Button b = new Button(this);
b.setText(“ボタンに表示する文字列”);
li.addView(b);
ボタン
イベントの登録をしていないので押し
ても何も起きません
課題

下の図のような表示するアプリを作っ
てみましょう
補足：XMLによるレイアウト

今日のスライドにあったように、Javaで
Androidアプリのレイアウトを設定可能
なぜxmlでも設定できるようになって
いるのか
エンジニアとデザイナーの共同開発
補足：XMLによるレイアウト

エンジニア

デザイナー
プログラミングは出来 デザインの設計は出来
るが、デザインの設計 るが、プログラミング
は得意ではない
がよくわからない
機能をJavaで書く
xmlでデザインを指定し
たり画像を提供したり