1. 程式人生 > >android中WebView載入網頁設定進度條

android中WebView載入網頁設定進度條

我們平時在進行安卓開發使用到webview載入網頁時,我們不能準確瞭解網頁的載入進度,因此為了提高使用者體驗,我們在webview中加入進度條顯示載入進度。

程式預覽介面:

一、主介面xml佈局檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
   >
    <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#1B9A16"
        
        />
        

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="3dip"
        android:progressDrawable="@drawable/pg"
        android:visibility="gone"
   
        />

    <WebView
        android:id="@+id/webview1"
        android:layout_below="@id/progressBar1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

   
</LinearLayout>

二、ProgressBar樣式佈局檔案(pg.xml放在drawable下面)
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="2dp" />
            <gradient
                android:angle="270"
                android:centerColor="#E3E3E3"
                android:endColor="#E6E6E6"
                android:startColor="#C8C8C8" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <gradient
                    android:centerColor="#4AEA2F"
                    android:endColor="#31CE15"
                    android:startColor="#5FEC46" />
                
            </shape>
        </clip>
    </item>

</layer-list>

三、邏輯程式碼:
package com.example.webview;

import android.os.Bundle;
import android.app.Activity;
import android.transition.Visibility;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.Window;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends Activity {
    
	private WebView webView;
	private ProgressBar pg1;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);
		init();
		webView.loadUrl("http://www.baidu.com");
	}

	private void init() {
		// TODO 自動生成的方法存根
		webView=(WebView) findViewById(R.id.webview1);
		pg1=(ProgressBar) findViewById(R.id.progressBar1);
		
		webView.setWebViewClient(new WebViewClient(){
			//覆寫shouldOverrideUrlLoading實現內部顯示網頁
			@Override
			public boolean shouldOverrideUrlLoading(WebView view, String url) {
				// TODO 自動生成的方法存根
			    view.loadUrl(url);
				return true;
			}
		});
		WebSettings seting=webView.getSettings();
		seting.setJavaScriptEnabled(true);//設定webview支援javascript指令碼
		webView.setWebChromeClient(new WebChromeClient(){
			@Override
			public void onProgressChanged(WebView view, int newProgress) {
				// TODO 自動生成的方法存根
				
				if(newProgress==100){
					pg1.setVisibility(View.GONE);//載入完網頁進度條消失
				}
				else{
					pg1.setVisibility(View.VISIBLE);//開始載入網頁時顯示進度條
					pg1.setProgress(newProgress);//設定進度值
				}
				
			}
		});
		
	}

	
    //設定返回鍵動作(防止按返回鍵直接退出程式)
	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// TODO 自動生成的方法存根
		if(keyCode==KeyEvent.KEYCODE_BACK) {
			if(webView.canGoBack()) {//當webview不是處於第一頁面時,返回上一個頁面
				webView.goBack();
				return true;
			}
			else {//當webview處於第一頁面時,直接退出程式
				System.exit(0);
			}
			
		
		}
		return super.onKeyDown(keyCode, event);
	}
	
	
	



}
整體流程就這樣。

程式碼下載