1. 程式人生 > >Android studio 混合程式設計(二)

Android studio 混合程式設計(二)

Android studio 混合程式設計(一)裡面講的是直接載入了百度的首頁,現在繼續講如何加入自己的Html 5 頁面。

一、首先匯入Html 5 專案檔案

選擇 app\src\main 選單,右鍵選擇New->Folder->Assets Folder 建立一個assets 資料夾,然後把所有html 5 相關的網頁拷到這個資料夾裡面。
這裡寫圖片描述

二、新增支撐程式碼

開啟MainActivity.java檔案(位置:詳見Android studio 混合程式設計(一)),設定Assets 訪問許可權。

 //允許訪問assets 目錄
     webview.getSettings().setAllowFileAccess(true
);

設定載入assets的路徑,files後面是有三個斜槓的。index.html 指向的是html 5 專案檔案的主網頁,這裡可以根據具體的檔名字做修改。

//指向assets檔案路徑的index.html
  String path = "file:///android_asset/index.html";

載入後html 5 網頁的程式碼

 // 載入HTML頁面
        webview.loadUrl(path);

Mainactivity.java 整體程式碼如下:

public class MainActivity extends AppCompatActivity {
    private
WebView webview; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webview =(WebView)findViewById(R.id.webview); //設定WebView 屬性,能夠執行Javascript指令碼 webview.getSettings().setJavaScriptEnabled(true
); //允許訪問assets 目錄 webview.getSettings().setAllowFileAccess(true); //指向assets檔案路徑的index.html String path = "file:///android_asset/index.html"; // 載入HTML頁面 webview.loadUrl(path); //設定字型不隨系統設定變化 // webview.getSettings().setTextZoom(100); //WebViewClient類 作用:處理各種通知 和請求事件 webview.setWebViewClient(new HelloWebViewClient()); } //Web檢視 private class HelloWebViewClient extends WebViewClient { @Override //這個方法,在web頁面開啟連結時,自動呼叫android自帶的瀏覽器開啟連結 public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }

修改完程式碼後,執行。在模擬機上檢視效果。怎麼執行模擬機?請檢視Android studio 混合程式設計(一)。

執行的結果:這個h5專案是我模仿建設銀行app寫的練手專案,所以在一些小細節上不會太精細。
這裡寫圖片描述

圖片上顯示有 My Application 這個app的action bar,很不好看。要取消這個action bar。可以修改AndroidManifest.xml 裡面的設定。

把 android:theme="@style/AppTheme" 改成:android:theme="@style/Theme.AppCompat.NoActionBar"

AndroidManifest.xml 整體程式碼如下:

 <?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.xxx.myapplication"
    android:versionCode="1"
    android:versionName="1.0"
    >
    <uses-sdk android:minSdkVersion="23" />
    <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.AppCompat.NoActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

改完後再次執行,看下效果。

這裡寫圖片描述