Skip to Content

使用 Android Webview 建立 App

原本 CBETA 有一個很簡單的 Android APP,就是用 WebView 元件開啟 CBETA 網站,就像一個隱藏版的瀏覽器。

 

不過從 Android 9(API級別28)開始,WebView 默認情況下已停用明文支持,所以程式勢必要修改。於是用 Android Studio + Kotlin 做了一個簡單的版本,同時也處理了明文不支持的問題。

 

1.開啟新專案

 

底下用 Java 版測試,程式的部份也有 Kotlin 的版本,其他都一樣。

 

在 Android Studio 之中開啟一個新專案,選擇 Empty Activity

 

 

開啟專案後,會看到如下結構,紅色是要修改的檔案,藍色最底下會提到。

  • AndroidManifest.xml
  • activity_main.xml
  • MainActivity.java
  • style.xml

 

 

2.加入網路權限

 

在 AndroidManifest.xml 加入藍色這行,以開啟網路權限。

 

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

 

 


 

3.修改 Layout

 

開啟 activity_main.xml,全部清掉,只放上 Webview 物件,XML 如下。

 

我有試過在原始的內容下加入 WebView,結果失敗,所以依網路上的教學,全部都清掉。

 

<?xml version="1.0" encoding="utf-8"?>

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"

   android:id="@+id/webview"

   android:layout_width="fill_parent"

   android:layout_height="fill_parent"

/>

 

4.修改主程式

 

修改 MainActivity.java 檔案,底下藍色是自行加上去的。

 

package org.cbeta;

 

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.webkit.WebView;

import android.webkit.WebSettings;

import android.webkit.WebViewClient;

 

public class MainActivity extends AppCompatActivity {

 

   @Override

   protected void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       setContentView(R.layout.activity_main);

 

       WebView webview = (WebView) findViewById(R.id.webview);

       WebSettings webSettings = webview.getSettings();

       webSettings.setJavaScriptEnabled(true);

       setContentView(webview);

       webview.setWebViewClient(new WebViewClient());

       webview.loadUrl("http://tripitaka.cbeta.org/mobi/");

   }

}

 

Kotlin 版程式如下

 

package org.heavenchou.cbeta

 

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.webkit.WebView

import android.webkit.WebSettings

import android.webkit.WebViewClient

 

class MainActivity : AppCompatActivity() {

 

  override fun onCreate(savedInstanceState: Bundle?) {

      super.onCreate(savedInstanceState)

      setContentView(R.layout.activity_main)

 

      val webview = findViewById(R.id.webview) as WebView

      val webSettings = webview.settings

      webSettings.javaScriptEnabled = true

      setContentView(webview)

      webview.webViewClient = WebViewClient()

      webview.loadUrl("http://tripitaka.cbeta.org/mobile/")

  }

}

 

 

5.移除標題欄

 

style.xml 修改藍色的部份,設定為 NoActionBar,可以移除標題欄。

 

<resources>

   <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">

       <item name="colorPrimary">@color/colorPrimary</item>

       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

       <item name="colorAccent">@color/colorAccent</item>

   </style>

</resources>

 

6.測試結果

 

在 Samsung SM-N900 (Android 5.0, API 21) 測試 OK

 

在虛擬機 Nexus 5X API 82 x86 失敗

 

主要錯誤是 ERR_CLEARTEXT_NOT_PERMITTED

 

主要原因是從 Android 9(API級別28)開始,默認情況下禁用明文支持。

 

網路上有人教導在 AndroidManifest.xml 要加上

 

android:usesCleartextTraffic="true"

 

但實際測試無效,這可能是在 Android 8 和之前的版本有效。

 

<?xml version="1.0" encoding="utf-8"?>

<manifest ...>

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

   <application

       ...

       android:usesCleartextTraffic="true"

       ...>

       ...

   </application>

</manifest>

 

目前已知解法有二:

 

1. 採用 https 安全協議即可。

 

2. 有人教導指定特定來源使用明文。

 

a. 創建文件 res/xml/network_security_config.xml

 

<?xml version="1.0" encoding="utf-8"?> <network-security-config>

 <domain-config cleartextTrafficPermitted="true">

   <domain includeSubdomains="true">Your URL</domain>

 </domain-config>

</network-security-config>

 

因為主要網頁內有 code.jquery.com , 所以我加了這二行

 

<domain includeSubdomains="true">tripitaka.cbeta.org</domain>

<domain includeSubdomains="true">code.jquery.com</domain>

 

b. 在 AndroidManifest.xml 加上

 

android:networkSecurityConfig="@xml/network_security_config"

 

<?xml version="1.0" encoding="utf-8"?>

<manifest ...>

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

   <application

       ...

       android:networkSecurityConfig="@xml/network_security_config"

       ...>

       ...

   </application>

</manifest>

 

結果如下:

 

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo