簡易ブラウザの作成（その2）

設計／手法／テスト

技術解説

連載 :

タオの新人研修 Androidプログラミング初めの1歩

2010年5月27日(木)

谷口岳

はじめに

こんにちは。タオソフトウェアの谷口と申します。昨今急速に注目を集めているアンドロイド（Android）。

本稿では、そんなアンドロイド上で動くアプリケーションを書いてみようと考えている方に向けて、アンドロイド・プログラミングの第一歩についてお伝えしたいと思っています。

前回は、 WebViewを使ってGoogleのWebページを表示するところまでを実装しました。

今回は、About画面を追加する作業を通して、画面追加の仕方やメニューの操作方法について説明していきます。

オプションメニューを追加する

アンドロイド端末のmenuキーを押したときに表示されるメニューを「オプション・メニュー」と呼びます。

今回は、About入力画面をオプション・メニューから呼び出せるようにします。

オプションメニューに「About」アイテムを作成するコードを追加しましょう。

MyWebView.javaのMyWebViewクラスに以下のコードを追加します。


public class MyWebView extends Activity {
    ---- 中略 ----
    <i><font color=red>
    //オプション・メニューを作成する
    private static final int ABOUT_MENU_ID = Menu.FIRST;

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);

        //Aboutダイアログ表示メニュー・アイテム
        MenuItem aboutItem = menu.add(0, ABOUT_MENU_ID, 0 ,R.string.menu_item_name_about);
        aboutItem.setIcon(android.R.drawable.ic_menu_info_details);
        
        return true;
    }
    </font></i>
}

同時に、メニュー・アイテムに編集する文字列（メニュー・アイテム名）をリソースに設定しましょう。

MyWebView/res/values/strings.xmlに、以下のように文字列を追加します。


<resources>
    <string name="app_name">MyWebView</string>
    <i><font color=red>
    <!-- オプション・メニュー用文字列 -->

    <string name="menu_item_name_about">About</string>

    </font></i>
</resources>

順に、説明していきます。

メニュー・アイテムの識別
ABOUT_MENU_ID がオプション・メニュー内でのメニュー・アイテムを識別するIDになります。
このIDにAndroidの定数Menu.Firstを設定しています。Androidでは、メニュー・アイテムはこの値以降を使用するように規定されています。
onCreateOptionsMenu
Androidがメニューを作成するために呼び出すメソッドです。
このメソッドをオーバー・ライドすることでアプリケーション独自のメニューを作成できます。
menu.add
このメソッドでメニュー・アイテムを追加しています。
アイテムを追加する際に先ほどの「ABOUT_MENU_ID」を指定してIDを設定しています。
R.string.menu_item_name_about は、先ほどリソース内に定義された定数です。メニュー・アイテムに表示される文字列を指定していることになります。
プログラム内に文字列を直接記述するのではなく、リソースに定義した文字列を読み込むようにすることで、他言語（英語版）などを作成する際にプログラムを修正する必要がなくなるというメリットがあります。
setIcon
メニュー・アイテムのアイコンを設定します。アイコンはAndroid内にいくつか定義済みのものがあります。
今回は「android.R.drawable.ic_menu_info_details（ i のアイコン）」を使用しています。

では、この段階で実行してみましょう。

GoogleのWebページが表示されたら、Menuキーを押してみましょう。Aboutアイテムが配置されたオプション・メニューが表示されるはずです（図1）。今はメニューを選択しても何も反応せずメニューが隠れるだけです。

次ページからは、メニューが選択されたときにAbout画面を表示するように画面と処理を追加していきます。