Step3 新しいアクティビティを作って、画面間を行き来してみよう
Step2では、すでに用意された「Hello World, HelloWorld!」という文字列が、どのように管理されているか確認しました。
Step3では逆に、こちら側でアクティビティとリソースを追加し、レイアウトを決め、実行する、という一連の作業を通して仕組みの理解を深めていってもらえればと思います。具体的には、HelloWorldとは別の新しいアクティビティを製作し、互いに行き来できるようにしたいと思います！
今後は説明を簡単にするために、HelloWorldアクティビティを「メイン画面」、新たに作成するアクティビティを「サブ画面」と呼びます。
1.新しいアクティビティの作成
今回は画面を行ったり来たりするだけの機能をもったアクティビティです。
メイン画面とサブ画面を行き来するには、
サブ画面には...
メイン画面とは違うアクティビティですという表示
メイン画面にを呼び出すボタン
メイン画面には...
サブ画面を呼び出すボタン
が必要ですね。まずはサブ画面を作っていきましょう！
まずはレイアウトをXMLで創りだしていきます。
[ファイル]→[新規]→[その他]とクリックすると「新規」ダイアログが出ますので、[Android]→[Android XML ファイル]を選択して[次へ]をクリックします。次に出てくる「新規Android XML ファイル」ダイアログで、細かくサブ画面ののレイアウトを決めていきます。
「プロジェクト」欄は変更せずHelloWorldのまま、「ファイル」の欄は「hello_sub_screen.xml」と設定しましょう。そしてレイアウトのXMLであることを示すために「レイアウト」のチェックボックスにチェックを入れます。
ダイアログ中央の右左に分かれている一覧はアクティビティの詳細の設定です。画面の大きさや解像度からハードキーボードが備わっているかどうか、タッチは指で行うかスタイラスペンで行うかまで設定できます。今回は以下のように設定します。
| Size（画面サイズ） | Normal（普通） |
| Ratio（画面の縦横比率） | NotLong（長くしない） |
| Orientation（画面の向き） | Portrait（縦向き） |
| Pixel Density（ピクセル密度） | MediumDensity（中程度）。 |
| Touch Screen（タッチ方法） | Finger（指） |
| Keyboard（ハード、ソフトキーボードの有無） | Soft（ソフトキーボードあり） |
| Text Input（12キーかQwertyキーボードか） | Qwerty（Qwertyキーボード） |
| Navigation Method（画面移動方法） | Trackball（トラックボール） |
| Dimension（画面の寸法） | 480×320 |
因みに、SoftBankから発売されている端末「003SH(SHARP製)」に合わせた画面設定を行う場合は...
| Dimension（画面の寸法） | 480×800 |
と指定することで、「003SH」の解像度をエミュレータ上で再現することが出来ます。 「003SH」の他詳しい設定値や、他の端末の設定値を調べる際には、是非「端末情報検索画面」も利用してみて下さい。
最後の項目でLinearLayoutを選択します。これはリソースを縦または横一線に並べるレイアウトですね。
設定が終わったら、[OK]を押します。
すると[res]→[layout-normal-notlong-port-mdpi-finger-keysoft-qwerty-trackball-480x320]に「hello_sub_screen.xml」が生成されます。
[hello_sub_screen.xml]は、分かりやすいように[res]→[layout]にドラッグして移動しておきましょう。
[layout-normal-notlong-port-mdpi-finger-keysoft-qwerty-trackball-480x320]フォルダは不要ですので、右クリックから「Delete」で削除してしまってかまいません。
先ほどのXMLの生成と同時に編集画面が表示されますので、早速リソースを追加していきましょう！
（編集画面が表示されない場合はhello_sub_screen.xmlをダブルクリックして開きましょう）
Graphical Layoutでは直感的にリソースを追加、配置することができます。
左側に用意されている、TextViewやButton、星のマークやシークバーなど様々なリソースを種類ごとに追加できます。
まずは「TextView」をドラッグアンドドロップして、タイトルバーの下に配置しましょう。
そしてその後で図のように「Button」も追加してみましょう。
どうでしょうか？かなり直感的にリソースを追加することができるのではないでしょうか。
しかしこのままTextViewに「サブ画面です」と文字列を入れてしまうと、Buttonの位置が安定しません。
この場合はOutlineとPropertiesを利用してレイアウトを変更します。
Outlineはメニューバーの[ウインドウ]→[ビューの表示]→[アウトライン]をクリックすることで表示できます。
Propertiesは[ウインドウ]→[ビューの表示]→[その他]をクリックし、「ビューの表示」ダイアログを表示させてから[一般]→[プロパティー]をクリックすることで表示できます。
この二つを表示させたら、まずアウトラインタブで「LinearLayout]を選択し、プロパティータブのOrientationを「vertical」に設定しましょう。
するとTextViewとButtonが縦に配置されます。
これでひとまずサブ画面のレイアウトは終了です。
以上のGraphical Layoutでのレイアウトが、実際のXML、hello_sub_screen.xmlではどう記述されているか確認してみましょう。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:="http://schemas..com/apk/res/"
:layout_width="fill_parent"
:layout_height="fill_parent" :orientation="vertical">
<TextView :text="TextView" :id="@+id/textView1"
:layout_width="wrap_content"
:layout_height="ap_content"></TextView>
<Button :text="Button" :id="@+id/button1"
:layout_width="wrap_content"
:layout_height="wrap_content"></Button>
</LinearLayout> |
LinearLayoutのorientationがverticalに設定され、TextViewとButtonが追加されていますね。ここで注目したいのは、TextViewとButtonにそれぞれtextView1、button1というidが与えられていることです。
例えば、アクティビティからアクティビティに数値や文字列を受け渡すことがあります。その時にこれらのidをもとにリソースを判別します。
サブ画面のレイアウトはこれくらいにして、今度は文字列のリソースを追加していきましょう。
まずはTextViewの文字列を編集してみます。
[res]→[values]→[string.xml]を開きます。ここには「Hello World, HelloWorld!」の文字列が記述されていましたね。
ここに先ほど追加したTextViewの欄に表示する文字列を追加します。
リソースタブをひらいて、[追加]ボタンを押すとリソースの種類を選択するウインドウが出てくるので、[String]を選択して[OK]をクリックします。
右側に空のフォームが表示されるので、
| Name | sub_screen |
| Value | これはサブ画面です。 |
と設定しましょう。strings.xmlを確認してもリソースが追加されたのがわかると思います。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, HelloWorld!</string>
<string name="app_name">Hello,World</string>
<string name="sub_screen">これはサブ画面です。</string>
</resources> |
string.xmlをせっかく開いたので、今まで「Hello World, HelloWorld!」と表示されていた部分を「これはメイン画面です」という文字列に変えておきましょう。
今度はXMLを直接書き換えてみます。string.xmlのHello World, HelloWorld!の文字列を下記のように編集します。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">これはメイン画面です。</string>
<string name="app_name">Hello,World</string>
<string name="sub_screen">サブ画面です</string>
</resources> |
これをResourcesタブの方から確認してみると
このようになっていれば成功です。
文字列の追加がひとまず終了したので、レイアウトから設定する必要があります。
もう一度[res]→[layout]→[hello_sub_screen.xml]を開きます。Graphical Layoutタブの「TextView」を一度クリックして選択してから、右クリックして「Edit Text...」をクリックします。
すると「Resource Chooserダイアログ」が表示されますので、「sub_screen」を選択して[OK]をクリックします。
するとレイアウトに文字列が設定されます。
同じ方法で、ボタンにも文字列を設定しましょう。
[string.xml]で下記のように設定し、[hello_sub_screen.xml]でボタンに文字列を設定します。
| Name | go_to_main_screen |
| Value | Go to Main Screen |
設定されました。
メイン画面にはサブ画面を呼び出すボタンが必要です。[res]→[layout]→[main.xml]を開いて、Graphical Layoutにてボタンを追加し、[string.xml]に文字列を以下のように設定、[main.xml]に戻りボタンと文字列をつなげましょう。
| Name | go_to_sub_screen |
| Value | Go to Sub Screen |
文字列を設定したところです。
図のようになれば成功です。
2.クラスの作成とコードの追加
この状態で、まずボタンや文字列の設定は終了しました。しかしこのままでボタンを押したところで何も起こりません。そうです、「ボタンを押すとサブ（メイン）画面を呼び出す」というコードを書き加えなければならないのです。
最初に[HelloSubScreen.java]の作成、次に[HelloWorld.java]と[HelloSubScreen.java]の編集を行います。コード自体は長くないですし、最初の方はコピーアンドペーストで書き足して構いません。あまり構えずにトライしましょう！
早速[HelloSubScreen.java]を作成します！
[ファイル]→[新規]→[クラス]と選択していくと、「新規 Java クラス」ダイアログが表示されます。
下記のように設定します。
| ソース・フォルダー | [参照...]から[HelloWorld]→[src]を選択 |
| パッケージ | [参照...]から[com.example.helloworld]を選択 |
| 名前 | HelloSubScreen |
| スーパークラス | .app.Activity |
[Finish]を押すと[src]フォルダ内に「HelloSubScreen.java」が作成されます。初期状態では
| public class HelloSubScreen extends Activity { } |
このような状態で生成されていると思います。[HelloWorld.java]でXMLレイアウトを設定していたのと同じように、[HelloSubScreen.java]でも先ほど製作した[hello_sub_screen.xml]を設定しましょう！
以下のようなコードになります。
| public class HelloSubScreen extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.hello_sub_screen); } } |
これで[HelloSubScreen.java]を開いたときに[hello_sub_screen.xml]が表示されるようになりました。
onCreateはアクティビティ起動時に行う処理でしたね。
次に[HelloWorld.java]を編集します。
[HelloWorld.java]には今のところonCreateでレイアウトが選択されているのみです。
ボタンを実際に使うためには、読み込んだレイアウトの中にあるリソースをボタンとして再び定義しなければいけません。そこで使うコードは
findViewById()
というコードです。字面を読めばわかるかもしれませんが、これは「()内に指定したid名でView(レイアウト)内のリソースを探す」というコードです。
ここで、リソースを追加した際にXMLに記述してあったidの事を思い出してください。ボタンのidはbutton1とされていましたね。実際にはR.id.button1と記述します。これはレイアウトから読み込むのではなくリソースを管理している[R.java]内から読み込むためです。
さらに今回は定義したボタンに役割を与えるので、
setOnClickListener()
というコードも加えます。これはOnClick、つまりボタンがクリックされたときの動作を指定するコードとリソースをつなげるような記述です。()内に直接動作を書くこともできますが、今回は分けて書くことにします。目印のためにbutton1としておきます。
以上のコードをまとめると、次のようになります。
| public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); findViewById(R.id.button1).setOnClickListener( button1); }; |
.(ドット)でつなぐことと;(セミコロン)を最後に加えることを忘れないでくださいね。
次はOnClickListenerの中身を書きこんでいきます。
OnClickListenerは今まで編集してきたonCreateとは違う新しいクラスを作ることになります。
まずは追加するソースを見てみましょう。
| OnClickListener button1 = new OnClickListener() { public void onClick(View v) { Intent intent = new Intent( HelloWorld.this, HelloSubScreen.class ); startActivity( intent ); } } |
最初の行で、button1を指定します。これはonCreateで付けた目印でしたね。
この目印に=(イコール)で代入しているのが、new OnClickListener()以下のonClickクラスです。
新しいアクティビティを呼び出すには、Intentクラスを使います。今回は「intent」という名前で新しく作成しています。Intentの第一引数には呼び出す元のクラス名、第二引数には呼び出す先のクラス名を記述します。第一引数の方は、自身のクラスを指定しているため、.classではなく.thisと記述しています。
最終行では、startActivity()を記述しています。()の中に先ほど作成したIntentクラス名を記述することによって、Android™ OSにインテントを投げる(=インテントを実行する)ことができます。
それでは改めてHelloWorldクラス全体を確認してみましょう。
| public class HelloWorld extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); findViewById(R.id.button1).setOnClickListener(button1); } OnClickListener button1 = new OnClickListener() { public void onClick(View v) { Intent intent = new Intent( HelloWorld.this, HelloSubScreen.class ); startActivity( intent ); } } } |
ところで、BundleやOnClickListenerなどの記述を追加した際、下図のようにコードに赤い波線と左端に電球マークが表示されると思います。
赤い波線は基本的にコード段階でのエラーを示します。
今回「Intent」や「View」などに波線が表示されているのはクラス名が簡易の方法で記述しているためです。
本来クラス名はもっと長いものなのですが、Javaファイルの冒頭に「import」という形であらかじめクラス名を定義することで、実際に呼び出すときに長いクラス名を省略できる仕組みになっています。
importせずにアクティビティを実行しても、エラーダイアログが立ち上がってしまい実行させてもらえません。
Eclipseには簡単にクラス名をインポートする機能があります。波線がかかっている文字列にマウスカーソルを移動するとそのコードを解決するいくつもの解決策がEclipse側から提示されます。ほとんどの解決策は新しくクラスを作成したり、タイプミス（似たような文字列を教えてくれる）なので文頭が「インポートします」とあるものを選択すれば間違いありません。
ただし今回OnClickListenerだけは二種類の「Import」が提示されるので気をつけましょう。今回利用するのは「(.view.View)」というクラス名です。
その他の赤い波線で提示されるインポートは一種類ですのでそれを選択すれば大丈夫です。
赤い波線がすべてなくなるまで「Intent」や「View」にも同じ作業を続けましょう。
ちなみにbutton1の波線はViewをインポートすると同時に解決されます。
以上で[HelloWorld.java]の編集は終了しました！
最後に[HelloSubScreen.java]の編集です。
「findViewById()」「setOnClickListener()」「onClick」などのコードを足します。以下のようになります。
| public class HelloSubScreen extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.hello_sub_screen); findViewById(R.id.button1).setOnClickListener(button1); } OnClickListener button1 = new OnClickListener() { public void onClick(View v) { Intent intent = new Intent( HelloSubScreen.this, HelloWorld.class ); startActivity( intent ); } }; } |
[HelloWorld.java]とほとんど同じコードなのであまり説明は必要ないと思いますが、一点だけ注意するとすれば、Intentの引数HelloWorldとHelloSubScreenが逆になっていますね。
以上でコードの編集はすべて終了です！
3.AndroidManifest.xmlとは？
コードの作業が終わり、いよいよ実行！と行きたいところですが、最後にAndroidManifestというものを編集しなければなりません。これはいわばアプリケーションの仕様書のようなもので、すべてのアプリケーションにひとつ付随し、コードが実行される前にAndroid™ 端末側にその実行されようとしているアプリケーションの仕様を確認させる役目があります。
例えばAndroid™ 端末をすでにお持ちで、アプリケーションをマーケットからインストールしたことがある人は分かるあるかもしれませんが、以下のような表示は全てAndroidManifestに記述してあるデータによるものです。
今回は新しいアクティビティを作成したので、その旨をAndroidManifestに登録しなければなりません。
まずAndroidManifest.xmlを開き、下のタブより「アプリケーション」タブを選択します。するとHelloWorldがアクティビティとして登録されているのがわかりますね。
ここにHelloSubScreenも追加します。
[追加]を押すとダイアログが出てきますので、上の「Create a new element at the top level, in Application.」のチェックボックスをクリックして、下の一覧から[Activity]を選択します。
左の欄に[Activity]が追加されました。右側の[Name]の[参照...]を押すとダイアログが出てきますので、「HelloSubScreen」を選択して[OK]を押しましょう。
左の欄に「HelloSubScreen」が登録されていれば完了です！
4.いよいよ実行！
それでは実行してみましょう。実行の方法は、[実行]→[実行]をクリックでしたね！
[Go to Sub Screen]ボタンと[Go to Main Screen]ボタンを押すことによって互いにアクティビティを呼び出すことができることを確認出来れば、今回の作業はすべて成功です！
いかがでしたでしょうか？
リソースの作成、文字列の作成、クラスの作成と基本的なことはほとんど今回の章で勉強できたと思います！
今後はカメラやセンサーを使ったアプリケーションの記事が追加されていく予定ですので楽しみにしていてくださいね！お疲れさまでした！
今回コラムで使用したプログラムはこちらからダウンロード出来ます。
第2回 Android™ 向けアプリの基礎をマスターしよう
Step1 アクティビティとは一体？
Step2 ファイル構成とJavaの仕組み
Step3 新しいアクティビティを作って行き来してみよう
（文責:株式会社ベストクリエイト）
■免責事項
第1回 リファレンスコード(文字列編) |  |
第2回 リファレンスコード2（グラフィックス編） | |
第3回 リファレンスコード3（タッチイベント編） | |
第4回 リファレンスコード4（チェックボックス/ラジオグループ編） | |
第5回 リファレンスコード5（スピナー編） | |
第6回 リファレンスコード6（サウンド/ムービー編） | |
第7回 リファレンスコード7（トースト編） | |
第8回 リファレンスコード8（Google Maps API利用編） | |
第9回 リファレンスコード9（SQLite編） | |
第10回 リファレンスコード10（音声認識編） | |
第11回 リファレンスコード11（日付/時刻ダイアログ編） | |
第12回 リファレンスコード12（Bluetooth編） | |
