こんにちは、kazuです。
本日はWebViewを表示させる方法を解説していきたいと思います。
WebViewとは
そもそもWebViewとはなにかわかりますか？
WebViewとはブラウザとかで開くWebページをアプリで開くことをWebViewといいます。
実装面で言うとhttps://などのリンクをコード上で指定してあげてアプリで表示させることをいいます。
要件を見ていこう
と言うことでいつも通りアプリ説明をしていこうと思います。
と言ってもあまり説明はありませんが。。
1. WebViewを表示する（今回は https://calnikki.com を表示する）
2. 戻るボタン
戻るボタンは直前に戻ります。
3. 次へボタン
次へボタンは直前の画面に進みます。
4. リロードボタン
リロードを実施します。
５. 閉じるボタン（「×」ボタン）
アプリを閉じます。
ちょっと気にした方がいいのが、WebViewを開いて次のページを開いてそして元のページに戻る時実装をしないと戻れないと言うことです。
え、バックキーで戻れないの？と思いますが、実装すれば戻れるかと思いますが、実装をしないとアプリを閉じてしまいます。
なので2,3,4は必ず実装したほうがいいでしょう（ボタンでなくてもいいですが。。）
つまりブラウザ（Chrome）と別物と考えた方がいいです。
実際にコードを見てみよう！
では実際にコードを見てみましょう。
まず以下が今回の環境です。
OS:Android, macOS
IDE:AndroidStudio
言語:Java, XML
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/back_button"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/close"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/close"
android:layout_marginStart="5dp"
android:layout_marginBottom="10dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="@+id/back_button"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="30dp"
android:textSize="10dp"
android:text="@string/back"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/close" />
<Button
android:id="@+id/next_button"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:textSize="10dp"
android:text="@string/next"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/back_button"
tools:ignore="SpUsage" />
<Button
android:id="@+id/reload_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:textSize="10dp"
android:text="@string/reload"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="@id/next_button"
tools:ignore="SpUsage"/>
</androidx.constraintlayout.widget.ConstraintLayout>@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Binding処理
mBinding = ActivityMainBinding.inflate(getLayoutInflater());
View view = mBinding.getRoot();
setContentView(view);
isButtonVisibility = new ObservableBoolean();
// WebViewClientを設定
mBinding.webView.setWebViewClient(new WebViewClient());
// JavaScriptを有効化
mBinding.webView.getSettings().setJavaScriptEnabled(true);
// 閉じるボタンのクリックイベントを設定
mBinding.close.setOnClickListener(v -> {
// webViewを破棄する
mBinding.webView.clearCache(true);
mBinding.webView.setWebViewClient(null);
mBinding.webView.destroy();
// アプリを終了する
finish();
});
// 戻るボタンのクリックイベントを設定
mBinding.backButton.setOnClickListener(v -> {
// 戻る画面があるなら画面遷移
if (mBinding.webView.canGoBack()) {
mBinding.webView.goBack();
}
});
// 次へボタンのクリックイベントを設定
mBinding.nextButton.setOnClickListener(v -> {
// 次へ画面があるなら画面遷移
if (mBinding.webView.canGoForward()) {
mBinding.webView.goForward();
}
});
// リロードボタンのクリックイベントを設定
mBinding.reloadButton.setOnClickListener(v -> {
// リロードする
mBinding.webView.reload();
});
// urlを読み込む
mBinding.webView.loadUrl("https://calnikki.com");
}デバッグで確認したい場合はAndroidManifest.xmlに以下を追加してください。
以下を入れないとエミュレーターでWebViewが開きませんでした。
<manifest>
・・・
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>最後に
いかがでしたでしょうか？
今回はWebViewについて記載しました。
開発現場では割と使うような気もしています。
特に規模が大きいアプリとかだと、知っているといいと思います。
最後までご覧いただきありがとうございました。