Andorid Studioを使ったAndoridアプリの作り方

4．実践（ソースコードの編集）

4.4　オプションメニューの作成

メニューボタンを押した時のオプションメニューの設定をします。
Cordovaを利用した場合とネイティブを利用した場合の2通りのやり方を解説します。
オプションメニューの作成

＜Cordovaを利用＞　※ネイティブを利用はこちら

  1. biorhythm\www の index.html（他にも設定するページがある場合は必要に応じて）を開き、jQuery、jQuery Mobile（ここでは jQuery Mobile を使用してメニューボタンを表示） 及びオプションメニューの設定をする javascriptファイルを（ここでは main.js（cordovaをインストールした時に自動で作成される index.js でも可））を読み込むコードを記述。
    オプションメニューの作成 
    <link rel="stylesheet"  href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="js/main.js"></script>
</head>
  2. biorhythm\www の index.html（他にも設定するページがある場合は必要に応じて）を開きメニューリストのコードを記述。 
    <div id="nav_menu" data-role="footer" data-position="fixed">
  <div data-role="navbar">
    <ul>
      <li><a href="index.html" rel="external" data-icon="home">Home</a>
      <li><a href="info.html" rel="external" data-icon="info">Info</a>
    </ul>
  </div>
</div>
  3. biorhythm\www\js の main.js を開き、メニューボタンを押した時の動作を記述。 
    $(function() {
    $("#nav_menu").hide();
    document.addEventListener('menubutton', function() {　//メニューボタンを押した時に発生
        $("#nav_menu").show();
    }, false);
});
    メニューボタンを押した時の表示
    オプションメニューの作成

＜ネイティブを利用＞

  1. アイコン画像を biorhythm\platforms\android\res\drawable-hdpi に保存する。
    ※アイコンの保存先は解像度に合わせて複数のフォルダが用意されているが、いずれかのフォルダに画像があればデバイス環境に応じて拡大・縮小されるので、ここでは一般的なスマホの大部分が対応している hdpi フォルダ（高解像度）だけに保存。
    オプションメニューの作成
    ※アイコン画像は AndroidSDK\sdk フォルダで 検索（例えばホームアイコンの場合 ic_menu_home ）してコピーしたり、こちらなどからダウンロードする。 オプションメニューの作成
  2. biorhythm\platforms\android\res に menu フォルダを作成し、メニュー定義ファイル（ここでは option_menu.xml ）を作成してメニューに表示する内容のコードを記述。
    オプションメニューの作成 
    <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@+id/item1"　<!--項目を識別するためのid値-->
        android:icon="@drawable/ic_menu_home"　<!--アイコン-->
        android:title="Home"/>　<!--タイトル-->
    <item
        android:id="@+id/item2"
        android:icon="@drawable/ic_menu_info_details"
        android:title="Info"/>

</menu>
  3. biorhythm\platforms\android\src\jp\co\orust\bio の CordovaApp.java を開き、メニューの初期化及び選択時の処理を定義するコードを記述。
    オプションメニューの作成 
    package jp.co.orust.bio;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import org.apache.cordova.*;

public class Biorhythm extends CordovaActivity {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.init();
		// Set by <content src="index.html" /> in config.xml
		loadUrl(launchUrl);

	}
	// メニューの初期化
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.option_menu, menu);
		return true;
	}
	// メニューを選択時の処理
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		WebView webView = new WebView(this);
		setContentView(webView);
		// javascriptを有効化
		webView.getSettings().setJavaScriptEnabled(true);
		switch (item.getItemId()) {
		// item1（option_menu.xmlで設定）が選択されたときの処理
		case R.id.item1:
			webView.loadUrl("file:///android_asset/www/index.html");
			break;
		// item2（option_menu.xmlで設定）が選択されたときの処理
		case R.id.item2:
			webView.loadUrl("file:///android_asset/www/info.html");
			break;
		}
		return true;
	}
}
    メニューボタンを押した時の表示
    オプションメニューの作成