使用Webview實現app啟動引導頁

石曼迪發表於2016-08-21
原文網址 : https://www.cnblogs.com/madyina/p/5793592.html
WebViewAPP

效果如下：

imageimageimageimage

首先需要一個html頁面及相應的js和css支援放在assets目錄下（如果沒有這個目錄請專案上右鍵-new-folder-assets）

image

配置許可權：

<uses-permission android:name="android.permission.INTERNET"/>
新建一個類：WebViewLoadHtml，程式碼如下： 
package com.example.webviewnavigate;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class WebViewLoadHtml extends Activity {
    private String url;
    WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //將螢幕設定為全屏
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        //去掉標題欄
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.webview);
        webView = (WebView)findViewById(R.id.wv_webview);
        url = "file:///android_asset/index.html";
        loadLocalHtml(url);
    }

    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
    public void loadLocalHtml(String url){
        WebSettings ws = webView.getSettings();
        ws.setJavaScriptEnabled(true);//開啟JavaScript支援
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //重寫此方法，用於捕捉頁面上的跳轉連結
                if ("http://start/".equals(url)){
                    //在html程式碼中的按鈕跳轉地址需要同此地址一致
                    Toast.makeText(getApplicationContext(), "開始體驗", Toast.LENGTH_SHORT).show();
                    finish();
                }
                return true;
            }
        });
        webView.loadUrl(url);
    }
}
View Code

然後在MainActivity中呼叫如下： 

package com.example.webviewnavigate;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {
    Intent intent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        intent = new Intent(this, WebViewLoadHtml.class);
        startActivity(intent);
    }

    public void onClickLoadHtml(View v){
        intent = new Intent(this, WebViewLoadHtml.class);
        startActivity(intent);
    }




}
View Code

新建一個空的view佈局檔案，名為webview，如： 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>
View Code

主頁按需求設計： 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="這是主頁"
        android:id="@+id/textView" />
</LinearLayout>
View Code

全部程式碼下載

 
 
 
 
 
 
 
 

相關文章