ウェブ、ショウジン

Android APIのWebViewを使って超簡易ブラウザを試してみる【その2】

2011-10-9
Category
スマートフォン・アプリ

Android APIのWebViewを使って超簡易ブラウザを試してみる【その1】の続き。

オプション・メニューの追加

アプリを起動させた状態でAndroid端末の「MENU」キーをタップすると表示されるメニューを「オプション・メニュー」というらしい。

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

以下のようにプロジェクトのMyWebView.javaのMyWebViewクラスにコードを追加。

MyWebView/src/com/example/mywebview/MyWebView.java

package com.example.mywebview;


import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView  webView = (WebView)findViewById(R.id.main_webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("http://web.showjin.me/");


    }
}

上記の既存のコードに追記して以下にようにする。

package com.example.mywebview;


import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView  webView = (WebView)findViewById(R.id.main_webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("http://web.showjin.me/");


    }

  // オプション・メニューを作成
    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;
    }
}

電球に赤いバッテンのアイコン部分三箇所を解消していく。

MyWebView2-1

一番上のバッテンアイコンをクリックして「’Menu’ をインポートします」を選択状態にしてReturnキーを叩くと、上二つの電球に赤いバッテンアイコンが灰色のバッテンアイコンに変わるので、そうしたら保存。これで上二つは解消。

MyWebView2-2

残る電球に赤いバッテンアイコンをクリックして、表示される「’MenuItem’ をインポートします」を選択してReturnキーを叩く。

MyWebView2-3

これでこの行の「MenuItem」に出ていたピンクの破線は消えた。残る「menu_item_name_about」部分の破線も消すために、再度電球に赤いバッテンアイコンをクリック。

出てくるダイアログの一番上の「型 ‘string’ のフィールド ‘menu_item_name_about’ を作成します」を選択してReturnキーを叩く。

MyWebView2-4

すると、なんだかよく分からないけど新しく「R.java」というファイルウィンドウが開くので、これを保存する。(public static CharSequence menu_item_name_about;という一行が追加されている)

MyWebView2-5

こうしてもまだMyWebView.javaの電球赤いバッテンアイコンは消えない。でもこのまま次に進む。

次はメニュー・アイテムに編集する文字列(メニュー・アイテム名:この例では「About」)をリソースに設定する。

MyWebView/res/values/string.xmlに、以下の文字列を追加する。

<!-- オプション・メニュー用文字列 -->
<string name="menu_item_name_about">About</string>

▼追加前
MyWebView/res/values/string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MyWebView!</string>
    <string name="app_name">MyWebView</string>
</resources>

▼追加後
MyWebView/res/values/string.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MyWebView!</string>
    <string name="app_name">MyWebView</string>
    <!-- オプション・メニュー用文字列 -->
    <string name="menu_item_name_about">About</string>
</resources>

こうしてstring.xmlを保存すると、MyWebView.javaの電球に赤いバッテンアイコンも消える。

追加したコードについて

1. メニュー・アイテムの識別
ABOUT_MENU_IDがオプション・メニュー内でのメニューアイテムを識別するIDになるらしい。このIDにAndroidの定数Menu.Firstを設定。Androidでは、メニュー・アイテムはこの値以降を使用するよう規定されているらしい。

2. onCreateOptionsMenu
Androidがメニューを作成するために呼び出すメソッド。このメソッドをOverrideすることで、アプリケーション独自のメニューを作成することができるらしい。

3. menu.add
このメソッドでメニュー・アイテムを追加。アイテムを追加する際に「ABOUT_MENU_ID」を指定してIDを設定している。R.string.menu_item_name_aboutは、前述の作業でリソース内に定義された定数。メニュー・アイテムに表示される文字列を指定していることになる。

プログラム内に直接文字列を記述するのではなく、リソースに定義した文字列を読み込むようにすることで、他の言語(英語等)での版を作成する際にプログラム本体を修正する必要がなくなるメリットがある。

4. setIcon
メニュー・アイテムのアイコンを設定。アイコンはAndroid内にいくつか定義済みのものがある。今回は「android.R.drawable.ic_menu_info_details」を使用している。(「i」のアイコン)

ということで、この段階でエミュレーターを起動して確認してみる。

ロック状態の画面で「MENU」ボタンをタップしてロックを解除すると、MyWebViewアプリが起動してWebページが表示される。

MyWebView2-6

この状態で「MENU」キーを押してみる。すると、Aboutアイテムが配置されたオプション・メニューが画面下部からせり上がってきて表示される。この段階ではここまでしか設定していないので、このメニューをタップしても何も反応はなく、ただメニューが隠れるだけという状態。

MyWebView2-7

Activityを追加する

オプション・メニューから呼び出す「About」メニューを追加したので、これを表示するためのActivityを追加する。

*Androidアプリでは画面と処理をセットにしたこの「Activity」が処理の単位となっているらしい。(Activity、超大事ぽい)

Eclipseのパッケージ・エクスプローラー上でMyWebView.javaをコピーして「com.example.mywebview」を選択してそこで「貼付け」し、名前を「AboutActivity.java」に。コードの中身を

package com.example.mywebview;

import android.app.Activity;

public class AboutActivity extends Activity {

}

に変更。

MyWebView2-8

そうしたら、About画面のレイアウトを表示するための処理を追加する。前述のコードに追加して、以下の内容に変更して保存。

package com.example.mywebview;

import android.app.Activity;

public class AboutActivity extends Activity {
     @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.about_activity);
    }
}

すると、電球に赤いバッテンアイコンが出てくる。

MyWebView2-9

先の行のバッテンアイコンをクリックして出てくるダイアログで「’Bundle’ をインポートします」を選択してReturnキーを叩き、保存。

次の行も同じようにしてアイコンをクリック。でてくるダイアログから「型 ‘layout’ のフィールド ‘about_activity’ を作成します」を選択してReturnキーを叩く。

MyWebView2-10

と、新規に「R.java」というファイルウィンドウが出現して、publicstaticfinalclass layoutのブロックに「publicstatic View about_activity;」という一行が追加されている。これをこのまま保存。

MyWebView2-12

それでもまだAboutActivity.javaの電球に赤いバッテンアイコンはそのまま。それでもいいので、このまま続ける。

About画面を定義するレイアウトファイルを作成する

About画面を表示するための新しいレイアウトを「about.activity.xml」で作成する。

既存のres/layout/main.xmlを複製して「about_activity.xml」として保存。この段階で前述のAboutActivity.javaの問題のアイコンは消える。

内容を書き換えて、以下のようにする。

<?xml version="1.0" encoding="utf-8"?>
<linearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  android:gravity="center_horizontal"
  >
    <!-- スペーサー -->
    <linearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="50dip" >
    </linearLayout>
    <!-- // スペーサー -->

    <!-- アプリケーション・タイトル -->
    <linearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >

        <textView
             style="?android:attr/textAppearanceMedium"
             android:layout_height="wrap_content"
             android:layout_width="wrap_content"
             android:text="@string/about_appname"
        />
    </linearLayout>
    <!-- // アプリケーション・タイトル -->

    <!-- スペーサー -->
    <linearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:minHeight="50dip" >
    </linearLayout>
    <!-- // スペーサー -->

    <!-- OKボタン -->
    <button android:id="@+id/button_ok"
        style="?android:attr/textAppearanceMedium"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text=" OK "
    />
    <!-- // OKボタン -->
</linearLayout>

上記のレイアウト・ファイル「about_activity.xml」の内容について。

About画面を「LinearLayout」という形式で作成している。LinearLayoutはレイアウト内の部品を一列に並べる場合に使う。

xmlの一番外側のLinearLayoutに「android:orientation=”vertical”」という設定がされていることにより、このレイアウト内に配置された部品は縦方向に並ぶことになる。

また、android:gravity=”center_horizontal”という指定によって、レイアウト内に配置された部品は水平方向にセンタリングされるようになる。

TextViewはテキストを表示するためのView。今回はTextViewをひとつ配置し、リソースからabout_appnameという文字列を設定している。(リソースにこの文字列を追加するまではこのxmlファイル上では電球に赤いバッテンアイコンが確認される)

MyWebView2-13

OKボタンも配置し、どのボタンが押されたのかをプログラム側で判別できるようにIDをつけておく。android:id=”@+id/button_ok”がそれにあたる。

続けて、画面に表示する文字列をリソースに追加する。

res/values/strings.xmlに以下の一行を追加する。

<string name="about_appname">MyWebView Version.1.0.0</string>

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MyWebView!</string>
    <string name="app_name">MyWebView</string>
    <!-- オプション・メニュー用文字列 -->
    <string name="menu_item_name_about">About</string>
    <string name="about_appname">MyWebView Version.1.0.0</string>
</resources>

すると、about_activity.xmlのバッテンアイコンは消える。

最後にマニフェスト・ファイルにActivityの情報を追加すると、Aboutメニュー用のActivityの追加は完了。アプリケーションが使用するActivityはすべてマニフェスト・ファイルに定義しておく必要がある。これを忘れるとActivity起動時にエラーが発生するので注意。(つい忘れがち、らしい)

以下を追加する。

<activity android:name=".AboutActivity">

</activity>

MyWebView/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.example.mywebview"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="4" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".MyWebView"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".AboutActivity">

        </activity>

    </application>
    <uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

About画面のレイアウトはこれで出来たけれども、この段階ではまだオプション・メニューから呼び出せるようにはなっていない。(エミュレーターで確認することは現時点ではできない)

作成したAbout画面をメニューから呼び出せるようにする

About画面のレイアウトはできたので、これをオプション・メニュー(端末の「MENU」ボタンからアクセス)から呼び出せるようにしていく。

オプション・メニューをユーザーがタップすると、親画面(今回の例では外部Webページを表示するWebView画面)のonMenuItemSelectedが呼び出される。

このメソッド内に自分が定義したメニューに対する処理を追加する。

MyWebView/src/com.example.mywebview/MyWebView.java

package com.example.mywebview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView  webView = (WebView)findViewById(R.id.main_webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("http://web.showjin.me/");
    }

    // オプション・メニューを作成
    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;
    }
}

上記の既存のコード内に追記して、以下のように

package com.example.mywebview;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MyWebView extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        WebView  webView = (WebView)findViewById(R.id.main_webview);
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("http://web.showjin.me/");
    }

    // オプション・メニューを作成
    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;
    }

    public boolean onMenuItemSelected(int featureId,MenuItem item){
        switch (item.getItemId()) {
        case ABOUT_MENU_ID :
            // Intentを作成する
            Intent intentAboutActitvity = new Intent(this,AboutActivity.class);
            startActivity(intentAboutActitvity);
            return true;
        default :
            break;
        }
        return super.onMenuItemSelected(featureId, item);
    }
}

電球に赤いバッテンアイコンが一行でてくるので、アイコンをクリックして出てくるダイアログから「’Intent’ をインポートします」を選んでReturn。

MyWebView2-14

アイコンが灰色のバッテンに変化するので、そしたら保存。これでアイコンは消える。

わたってきたMenuItem内には選択されたメニュー・アイテムの情報が入っているらしい。

メニュー・アイテム(ABOUT_MENU_ID)が選択されると、item.getItemIdはABOUT_MENU_IDを返すらしい。

プログラムはこの値を判定してAboutActivityを開始するためのIntentを作成するらしい。そして、startActivityを使用してActivityを開始するらしい。

ここでエミュレーターを起動して確認してみる。パッケージ・エクスプローラーからMyWebViewプロジェクトを右クリックして「実行>2 Androidアプリケーション」を実行。

MENUボタンをタップしてロック状態を解除し、MyWebViewアプリが起動したら指定したWebページが表示される。この状態でMENUボタンをタップしてオプション・メニューを実行すると下から「About」メニューのボタンがせり上がってくる。

MyWebView2-15

この「About」ボタンをタップすると、新しく用意したActivity(AboutActivity)が表示され、レイアウト・ファイルで定義した内容(OKボタンとか)が表示される。

MyWebView2-16

がしかし、用意したAbout画面ではレイアウト表示以外の処理を何もしていないので「OK」ボタンをタップしても何も起こらない。元の画面(Webページを表示)にもどるには端末の戻るボタン(横になった矢印Uターンボタン)をタップする。

Aboutダイアログの処理を実装する

OKボタンがタップされたときに画面が閉じてアプリの最初の画面に戻れるようにAboutダイアログ側の処理を追加する。

MyWebView/src/com.example.mywebview/AboutActivity.java

package com.example.mywebview;

import android.app.Activity;
import android.os.Bundle;

public class AboutActivity extends Activity {
     @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.about_activity);
    }

}

既存の上記ファイルに追記して以下のようにする。

package com.example.mywebview;

import android.app.Activity;
import android.os.Bundle;

public class AboutActivity extends Activity {
     @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.about_activity);

        // OKボタンの機能
        Button okButton  = (Button)findViewById(R.id.button_ok);
        okButton.setOnClickListener(new View.OnClickListener(){
            public void onClick(View view){
                // 閉じる
                finish();
            }
        });
    }

}

これまた電球に赤いバッテンアイコンが出てくるので、これを解消していく。

MyWebView2-17

一番上の行のアイコンをクリックして「’Button’ をインポートします」を選択してReturn。そして保存。アイコンは消えた。

MyWebView2-18

続いて二行目(okButtonから始まる)のアイコンをクリックして「’View’ をインポートします」を選択してReturn。これで残りのバッテンアイコンも消えた。

MyWebView2-19

OKボタンが機能するようになったか、再度エミュレーターを起動して確認。MyWebViewアプリ起動後、MENUボタンから「About」メニューボタンを出現させ、これをタップして表示されるAbout画面内の「OK」ボタンをタップすると、今度は元の画面(アプリ起動時の)に戻るようになった。

OKボタンが機能するように追加したコードは、ボタンにアクセスするためにidを使ってボタンのクラス(インスタンス)を取得。setOnClickListenter()を使用して、ボタンがタップされた際の処理をボタンに設定。

onClickではfinishを呼び出すことでActivityを終了させている。Activityを終了させることでAbout画面が閉じて、呼び出し元の元の画面に戻るようになっている。

そして、このチュートリアルの実践はもう一回続くのでありました。
Android APIのWebViewを使って超簡易ブラウザを試してみる【その3】

今回もお世話になったチュートリアル記事は
第4回 簡易ブラウザの作成(その2)です。ありがとうございます。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿