8. 【Android/Kotlin】ウェブビュー（WebView）

#はじめに
DreamHanksのMOONです。

前回は簡単なログイン画面を作り、バリデーションチェックをしました。
7. 【Android/Kotlin】バリデーションチェック

今回はWebViewというViewについて説明していきます。

#WebViewとは
ウェブ アプリケーション（またはウェブページ）をクライアント アプリケーションの一部として提供する場合は、WebView を使用できます。
この意味は簡単にアプリの画面上にウェブページを表示することができます。

#WebView追加

###１．権限設定
ウェブビューでウェブページを表示するためには、まず、そのアプリのインターネットアクセス権限を設定する必要があります。
　・AndroidManifestファイル修正

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.practiceapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".SpinnerActivity"></activity>
        <activity android:name=".ListViewActivity">
        </activity>
        <activity android:name=".WebViewActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".IntentTestActivity" />
        <activity android:name=".MainActivity"></activity>
    </application>

    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

<uses-permission android:name="android.permission.INTERNET" />

AndroidManifestファイルに上記のコードを追加
このコードはインターネットにアクセスするための権限設定

###２．Activity作成

WebViewActivity.kt

package com.example.practiceapplication

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.EditText
import android.widget.TextView

class WebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_webview)

        val url_et = findViewById<EditText>(R.id.url_et)              //URLのEditText（入力エリア）
        val search_btn = findViewById<Button>(R.id.search_btn)        //検索ボタン
        val webView = findViewById<WebView>(R.id.test_wv)             //ウェブビュー

        //検索ボタンのクリックイベントを設定
        search_btn.setOnClickListener {
            //ウェブページがクロム（または、その他の検索アプリ）に開かなくてアプリのwebviewに開かるような設定
            webView.webViewClient = object : WebViewClient(){}
            //webviewに入力された値に対するウェブページを表示
            webView.loadUrl(url_et.text.toString())
        }
    }
}

###３．xml作成

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".WebViewActivity"
    android:gravity="center">

    <WebView
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:id="@+id/test_wv"
        android:layout_weight="1" />

    <EditText
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:id="@+id/url_et"
        android:inputType="text"
        android:hint="URLを入力してください"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/search_btn"
        android:text="検索"/>

</LinearLayout>

#アプリ起動
・URLを入力する前

・URLを入力し、検索ボタンをクリックした場合

#終わりに
今回はWebViewというViewについて説明しました。

次回は動的にViewを追加する方法について説明します。
9. 【Android/Kotlin】動的にView追加

最新内容については下記のリンク（DreamHanksのブログ）で確認することができます。
DreamHanksブログ（Android/Kotlinアプリ開発）