はじめに
WebViewの技術を使って、AndroidのアプリでWebページを表示してみようと思います。
また、webページからAndroidのプログラムのメソッドを呼び出してみたり、Android側のページに戻ったりもしてみようと思います。
プログラムソースがちょっと多めなので、複数回に分けて投稿しようと思います。
第二回目はトップ画面の実装です。
Android Studioで作成していきます。
トップ画面(Android)
フォルダ構成
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.testapp">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:usesCleartextTraffic="true"
android:theme="@style/Theme.TestApp">
<activity
android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".WebViewActivity"/>
</application>
</manifest>
トップ画面のボタンの定義をしています。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ExtraText">
<Button
android:id="@+id/web_view_activity_button"
android:layout_width="190dp"
android:layout_height="48dp"
android:onClick="webViewActivityButton"
android:text="@string/next_activity_button_label"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.452"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.291"
tools:ignore="MissingConstraints" />
</androidx.constraintlayout.widget.ConstraintLayout >
トップ画面のボタンを押したときの処理を定義しています。
ボタンを押下したら、WebView画面を表示するアクティビティに切り替えるようにしています。
MainActivity.java
package com.example.testapp;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView txt;
private TextView nextTxt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
//画面遷移(Activity切り替え chat画面)
public void webViewActivityButton(View view){
Intent intent = new Intent(this, WebViewActivity.class);
startActivity(intent);
}
}
WebView画面の定義です。
activity_webview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MissingConstraints"
tools:layout_editor_absoluteX="1dp"
tools:layout_editor_absoluteY="1dp" />
</LinearLayout>
WebView画面のアクティビティです。
WebView内のJavaScriptを有効する設定や、ベーシック認証の設定が記載されています。
WebViewActivity.java
package com.example.testapp;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.HttpAuthHandler;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
public class WebViewActivity extends AppCompatActivity {
static final String URL = "https://××××";
private WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 画面レイアウトをセット
setContentView(R.layout.activity_webview);
webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true); // JavaScriptを有効にする
webView.addJavascriptInterface(new MainJsInterface(this),"Android");
webView.setWebViewClient(new WebViewClient(){
@Override
public void onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) {
handler.proceed("××", "××");
}
}); // WebViewを設定する
webView.loadUrl(URL); // URLを読み込む
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent e){
if(keyCode == KeyEvent.KEYCODE_BACK){ // 戻るボタンがタップされた時
if(webView != null && webView.canGoBack()){ // WebViewがNULLでなく、閲覧履歴があるなら
webView.goBack(); // 一つ前のウェブページを表示する
}
return true;
}else{
return super.onKeyDown(keyCode, e);
}
}
@Override
protected void onResume() {
super.onResume();// バックグラウンドからフォアグランドに戻った時など
if(webView != null){ // WebViewが空でなければ
String url = webView.getUrl(); // 現在のウェブページを
webView.loadUrl(url); // 再表示する
}
}
}
WebViewから呼びされるメソッドを定義しています。
webページから呼ぶメソッドのことです。
MainJsInterface.java
package com.example.testapp;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.webkit.HttpAuthHandler;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainJsInterface extends AppCompatActivity {
Context context;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
MainJsInterface(Context a){
context = a;
}
@JavascriptInterface
public void showMain(){
Intent intent = new Intent(this.context, MainActivity.class);
context.startActivity(intent);
}
@JavascriptInterface
public int sum(int a,int b){
return a + b;
}
}
以上
第三回ではwebページ側の実装を行っていきます。
関連リンク