WebViewを使用してWeb siteのページを表示することができます。
JavaScriptとAndroidの連携もできます。
先ず一つ簡単なアプリを紹介します。
このアプリの機能はGoogleのタップページを表示します。
以下は作る流れです。
1. Permissionの加入。Activityはネットを繋がられるため、AndroidManifest.xmlの中でandroid.permission.INTERNETを加入します。
2. WebViewの生成。
3. WebSettingsを取って設定してから、WebView.loadUrlを利用してWeb siteのPathを
読み込みます。
さて、流れのプログラムを一つずつで紹介しましょう。
1. Permissionの加入。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.webviewexa"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.webviewexa.WebViewExa"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
2. WebViewの生成。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".WebViewExa" >
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3. WebSettingsを取って設定してから、WebView.loadUrlを利用してWeb siteのPathを
読み込みます。
mwebView=(WebView) findViewById (R.id.webView);
// Get the WebView's settings
WebSettings settings=mwebView.getSettings();
// Set the JavaScript enable
settings.setJavaScriptEnabled(true);
// Set the Zoom function
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
// For default, if click a link it will open another page to
// connect the web site of the link. If want to use the same
// browser, don't want to open another, can use the setting
// on below.
mwebView.setWebViewClient(new WebViewClient());
mwebView.loadUrl("http://www.google.com");
【補充機能】OptionMenu
ナビを加えます。
ナビの内容はWeb siteの入力、引き返す、前進、再読み込み、閉じなど、
以上の五個機能を表示と作動することです。
Menuボタンを押して、画面の下でナビを現します。
以下は作成の流れです。
1. 新しい/res/menu/menu.xml ファイルを作成。
2. Web siteの入力を表示するLayoutを作成。
3. public boolean onCreateOptionsMenu(Menu menu)
public boolean onPrepareOptionsMenu(Menu menu)
public boolean onOptionsItemSelected(MenuItem item)
三つのメソッドをオーバーライドします。
プログラムは以下です。
1. 新しい/res/menu/menu.xml ファイルを作成
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@+id/gotourl"
android:title="Goto" />
<item android:id="@+id/exit"
android:title="Exit" />
<item android:id="@+id/goback"
android:title="Back" />
<item android:id="@+id/goforward"
android:title="Forward" />
</menu>
2. Web siteの入力を表示するLayoutを作成。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".WebViewExa" >
<RelativeLayout
android:id="@+id/UrlEntry"
android:orientation="horizontal"
android:visibility="gone"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:shrinkColumns="0" >
<Button
android:id="@+id/go"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Go" />
<EditText
android:id="@+id/url"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/go"
android:text="http://"
android:ems="10" />
</RelativeLayout>
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
3. public boolean onCreateOptionsMenu(Menu menu)
public boolean onPrepareOptionsMenu(Menu menu)
public boolean onOptionsItemSelected(MenuItem item)
三つのメソッドをオーバーライドします。
public class WebViewExa extends Activity {
private RelativeLayout urlEntry;
private Button btngo;
private EditText murl;
private WebView mwebView;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_web_view_exa);
urlEntry=(RelativeLayout) findViewById(R.id.UrlEntry);
btngo=(Button)findViewById(R.id.go);
murl=(EditText)findViewById(R.id.url);
mwebView=(WebView) findViewById (R.id.webView);
btngo.setOnClickListener(btngoOnClickListener);
// Get the WebView's settings
WebSettings settings=mwebView.getSettings();
// Set the JavaScript enable
settings.setJavaScriptEnabled(true);
// Set the Zoom function
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
// For default, if click a link it will open another page to
// connect the web site of the link. If want to use the same
// browser, don't want to open another, can use the setting
// on below.
mwebView.setWebViewClient(new WebViewClient());
mwebView.loadUrl("http://www.google.com");
}
private OnClickListener btngoOnClickListener = new OnClickListener(){
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
mwebView.loadUrl(murl.getText().toString());
urlEntry.setVisibility(View.GONE);
}
};
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu, menu);
return true;
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// TODO Auto-generated method stub
if(mwebView.canGoForward())
menu.findItem(R.id.goforward).setEnabled(true);
else
menu.findItem(R.id.goforward).setEnabled(false);
if(mwebView.canGoBack())
menu.findItem(R.id.goback).setEnabled(true);
else
menu.findItem(R.id.goback).setEnabled(false);
urlEntry.setVisibility(View.GONE);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item){
switch(item.getItemId()){
case(R.id.exit):
openExitDialog();
break;
case(R.id.gotourl):
urlEntry.setVisibility(View.VISIBLE);
break;
case(R.id.goback):
mwebView.goBack();
break;
case(R.id.goforward):
mwebView.goForward();
break;
default:
break;
}
return true;
}
private void openExitDialog(){
new AlertDialog.Builder(this)
.setTitle("EXIT")
.setMessage("Exit the browser? ")
.setPositiveButton("YES", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
finish();
}
})
.setNegativeButton("NO",new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
// TODO Auto-generated method stub
}
})
.show();
}
}
参考資料：
http://androidbiancheng.blogspot.jp/2010/01/webview.html
http://androidbiancheng.blogspot.jp/2010/01/webview_11.html
留言
張貼留言