Android開発 簡単なWEBブラウザを作ってみる
こんにちは、熊谷です。
前回はMacでAndroidアプリを開発するための準備について書きました。ということで、今回はその続き、実際に開発をしてみようと言うことで進めたいと思います。
インストールしたSDKだけで開発はできるのですが、少しでも楽 に開発したいと言うことであれば現状Eclipseを使ってということになります。ということで、Eclipseをダウンロードしインストール、Android開発のためのプラグインADT Plugin for Eclipseをインストールします。
このADT PluginをインストールするとAndroidアプリケーション開発のための様々な機能がEclipseに追加されます。設定の中にSDKのPATHを指定する箇所があるので先にインストールしたSDKのPATHが設定されているかどうか、設定されていない場合は設定しておいてください。
では、早速何か作ってみましょう。今回は簡単なWEBブラウザを作ってみたいと思います。
新規プロジェクトで[Android][Android Project]を選択し次へ進みます。
プロジェクトのリソースを作成する画面ではこんな感じに、Project nameやBuild Target、Application name、Package name、Create Activityを入力完了です。
するとこんな感じでProject Explorerにプロジェクトが作成されます。
試しにこの状態でAndroid Applicationとして実行させてみます。
そうすると
こんな感じに表示されます。
では早速ブラウザになるように作ってみましょう。まずは画面周りということでプロジェクト直下のresの中のlayoutにあるmain.xmlを変更します。
先ほど実行したときにHello Worldと文字列が表示されましたがそれはここのTextViewに記述されているためです。
ということで、ここを以下のように変更します。
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
つぎに、MyApp.javaを以下のように変更します。
package com.example.myapp;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
publicclass MyApp extends Activity {
/** Called when the activity is first created. */
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Webビューの作成
WebView webView = (WebView) findViewById(R.id.webview);
webView.setVerticalScrollbarOverlay(true);
webView.setWebViewClient(new WebViewClient());
WebSettings settings = webView.getSettings();
settings.setSupportMultipleWindows(true);
settings.setLoadsImagesAutomatically(true);
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setLightTouchEnabled(true);
webView.loadUrl("http://www.asial.co.jp/");
}
}
また、アプリケーションからネットワークにアクセスするためにはパーミッションを設定する必要があるので、プロジェクト直下にあるAndroidManifest.xmlを開きandroid.permission.INTERNETを追加します。
下にあるタブの中の[Permissions]を選択し、[Add...]から[Uses Permission]でandroid.permission.INTERNETを選択します。
実行してみましょう。
こんな感じに無事指定したWebサイトが表示されると思います。
ただ、これだけでは特定のサイトしか表示されないので、簡単なURLバーを追加します。
まず、main.xmlを以下のように変更します。
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditTextandroid:id="@+id/urlbar"
android:singleLine="true"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</EditText>
<Buttonandroid:text="go"
android:id="@+id/go_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickGoBtn">
</Button>
</LinearLayout>
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
次に、MyApp.javaを以下のように変更します。
package com.example.myapp;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
publicclass MyApp extends Activity {
private WebView mWebView;
/** Called when the activity is first created. */
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Webビューの作成
mWebView = (WebView) findViewById(R.id.webview);
mWebView.setVerticalScrollbarOverlay(true);
mWebView.setWebViewClient(new WebViewClient());
WebSettings settings = mWebView.getSettings();
settings.setSupportMultipleWindows(true);
settings.setLoadsImagesAutomatically(true);
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setLightTouchEnabled(true);
}
publicvoid onClickGoBtn(View v) {
EditText editText = (EditText) findViewById(R.id.urlbar);
String urlString = editText.getText().toString();
mWebView.loadUrl(urlString);
}
}
これで実行すると
こんな感じにURLバーぽいのが表示されます。ここにURLを入力しgoボタンを押すと
サイトが表示されます。
URLを入力して表示するだけのものですが、いかがでしょうか。ページのリロード機能やプログレスバーの表示だったり追加する機能はまだまだありますが、難しくはないので是非あれこれいじってみてください。
