2022年5月3日 星期二

Andriod 使用 WebView 內嵌網頁簡易範例

  1. 新增一個 Empty Activity 專案


  2. AndroidManifest.xml 加網路權限
    <uses-permission android:name="android.permission.INTERNET" />
    最終 AndroidManifest.xml  內容：
    <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.testwebview">
    <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:theme="@style/Theme.TestWebView">
        <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>
    </application>

</manifest>

  3. 開啟 layout 檔案 activity_main.xml，刪掉預設的 TextView(Hello World!)，放一個 WebView
    設定 id 為「myWebView」，layout_width、layout_height 屬性設為「0dp」
    (使用專案預設的 ConstraintLayout)


    WebView 屬性設定往下拉，找到 All Attributes 裡的 layout_constraints 設定
    layout_constraintBottom_toBottomOf、layout_constraintEnd_toEndOf、layout_constraintStart_toStartOf、layout_constraintTop_toTopOf 都設為「parent」

    最終 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:context=".MainActivity">

    <WebView
        android:id="@+id/myWebView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

  4. MainActivity.java 內容
    package com.example.testwebview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    WebView mWebView;
    WebSettings mWebSettings;
    //Android 9 (API level 28) 後，預設只能開啟 https 網站
    String url = "https://google.com/";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //mWebView = (WebView) findViewById(R.id.myWebView);
        mWebView = findViewById(R.id.myWebView);
        mWebSettings = mWebView.getSettings();
        //mWebSettings.setUserAgentString("app");
        mWebSettings.setJavaScriptEnabled(true);//開啟JS
        mWebSettings.setDomStorageEnabled(true);//開啟localStorage
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        //若沒設定setWebViewClient()，則點WebView頁面的連結會呼叫系統瀏覽器開啟，不會保留在APP中
        mWebView.setWebViewClient(new WebViewClient());
        mWebView.loadUrl(url);
    }
}

  5. 去除 APP 上方的 ActionBar 標題列，修改 res\values\themes.xml、res\values-night\themes.xml，改成 NoActionBar
    themes.xml
    <resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TestWebView" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
    themes.xml(night)
    <resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TestWebView" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_200</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_200</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>




[其他修改]






參考：

張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)