VS2015 Cordova實現WebView加載頁面進度條（Android）

本文轉載自查看原文 2015-08-01 18:10 2338 cordova/ WebView進度條/ vs2015/ Cordova

因為使用Cordova做app時，加載頁面沒有進度條，用戶無法感知打開進度，故加入進度條，具體實現如下：

1、如果項目沒有生成過apk，需先生成一次，這樣在項目下面才會出現platforms/android的文件夾。

2、進入項目/platforms/android/src文件夾下，在你程序包名目錄下找到你的MainActivity.java文件，增加一個Dialog和ProgressBar用來顯示頁面加載進度，具體代碼實現如下：

  1 /*
  2        Licensed to the Apache Software Foundation (ASF) under one
  3        or more contributor license agreements.  See the NOTICE file
  4        distributed with this work for additional information
  5        regarding copyright ownership.  The ASF licenses this file
  6        to you under the Apache License, Version 2.0 (the
  7        "License"); you may not use this file except in compliance
  8        with the License.  You may obtain a copy of the License at
  9 
 10          http://www.apache.org/licenses/LICENSE-2.0
 11 
 12        Unless required by applicable law or agreed to in writing,
 13        software distributed under the License is distributed on an
 14        "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 15        KIND, either express or implied.  See the License for the
 16        specific language governing permissions and limitations
 17        under the License.
 18  */
 19 
 20 package com.mrboss.customerorder;
 21 
 22 import org.apache.cordova.*;
 23 
 24 import android.app.Dialog;  
 25 import android.graphics.Bitmap;  
 26 import android.os.Bundle;  
 27 import android.util.Log;  
 28 import android.webkit.WebView;
 29 import android.view.*;
 30 import android.widget.*;
 31 
 32 import java.util.Timer;
 33 
 34 import com.mrboss.customerorder.R;
 35 
 36 public class MainActivity extends CordovaActivity {
 37         
 38     private Dialog loadDialog;
 39     private ProgressBar progressBar;
 40 
 41     @Override
 42     public void onCreate(Bundle savedInstanceState) {
 43         super.onCreate(savedInstanceState);
 44         
 45         // 使用自己重載的方法來初始化
 46         init();
 47 
 48         // 啟動界面
 49         super.setIntegerProperty("splashscreen", R.drawable.screen);
 50         
 51         // Dialog
 52         loadDialog = new Dialog(MainActivity.this, R.style.dialog);  
 53         loadDialog.setCancelable(false);
 54         loadDialog.setContentView(R.layout.main);
 55         
 56         // 設置Dialog全屏
 57         Window win = loadDialog.getWindow();
 58         win.getDecorView().setPadding(0, 0, 0, 0);
 59         WindowManager.LayoutParams lp = win.getAttributes();
 60         lp.width = WindowManager.LayoutParams.FILL_PARENT;
 61         lp.height = WindowManager.LayoutParams.FILL_PARENT;
 62         win.setAttributes(lp);
 63         
 64         // 獲取loadDialog里面的進度條
 65         progressBar = (ProgressBar) loadDialog.findViewById(R.id.progressBar5);
 66 
 67         // Set by <content src="index.html" /> in config.xml
 68         loadUrl(launchUrl, 3000);
 69     }
 70     
 71     @Override
 72     public void init() {
 73         CordovaWebView webView = new CordovaWebView(MainActivity.this);
 74         this.init(webView, new CordovaWebViewClient(this, webView) {
 75             // 頁面加載完成事件
 76             @Override
 77             public void onPageFinished(WebView arg0, String arg1) {
 78                 super.onPageFinished(arg0, arg1);
 79                 progressBar.setProgress(100);
 80                 endLoad();
 81             }
 82 
 83             // 頁面開始加載事件
 84             @Override
 85             public void onPageStarted(WebView view, String url, Bitmap favicon) {
 86                 super.onPageStarted(view, url, favicon);
 87                 if (url.equals("about:blank")) {
 88                 } else {
 89                     startLoad();
 90                 }
 91             }
 92         }, new CordovaChromeClient(this, webView) {
 93             // 頁面加載中的事件
 94             @Override
 95             public void onProgressChanged(WebView view, int newProgress) {
 96                 super.onProgressChanged(view, newProgress);                
 97                 progressBar.setProgress(newProgress);
 98             }
 99         });
100     }
101     
102     /** 
103      * 顯示進度界面
104      *  
105      * @param view 
106      * @param url 
107      */  
108     private void startLoad() {  
109         if (loadDialog.isShowing()) {  
110         } else {  
111             loadDialog.show();  
112         }  
113     }  
114   
115     /** 
116      * 關閉進度界面
117      *  
118      * @param view 
119      * @param url 
120      */  
121     private void endLoad() {  
122         if (loadDialog.isShowing()) {  
123             loadDialog.cancel();  
124             loadDialog.dismiss();  
125         }  
126     }  
127 }

3、新建一個Dialog的Style文件，進入/platforms/android/res/values下，新建一個Style.xml，具體代碼實現如下：

 1 <resources>
 2     <color name="VariableLabel">#00000000</color>
 3     <style name="dialog" parent="@android:style/Theme.Dialog">
 4         <item name="android:windowFullscreen">false</item><!-- 全屏 -->
 5         <item name="android:windowFrame">@null</item>
 6         <item name="android:windowIsFloating">true</item><!-- 是否浮現在activity之上 -->
 7         <item name="android:windowIsTranslucent">false</item><!-- 半透明 -->
 8         <item name="android:windowNoTitle">true</item>
 9         <item name="android:backgroundDimEnabled">false</item>
10         <item name="android:windowBackground">@color/VariableLabel</item><!-- 透明白色 -->
11         <item name="android:backgroundDimAmount">1</item>
12         <item name="android:windowAnimationStyle">@style/dialogWindowAnim</item><!-- 動畫 -->
13     </style>
14     <style name="dialogWindowAnim" parent="android:Animation" mce_bogus="1">  
15         <item name="android:windowEnterAnimation">@anim/alphain</item><!-- 打開界面動畫 -->
16         <item name="android:windowExitAnimation">@anim/alphaout</item><!-- 關閉界面動畫 -->
17     </style>
18 </resources>

4、新建動畫文件，這里實現的是淡出淡入，新建文件夾/platforms/android/res/anim，里面再新建alphain.xml，alphaout.xml文件，具體代碼實現如下：

 1 <?xml version="1.0" encoding="utf-8"?>  
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">  
 3    <alpha  
 4    android:fromAlpha="0.0"  
 5    android:toAlpha="1.0"  
 6    android:duration="500"  
 7    />  
 8 </set>
 9 <!--  
10 fromAlpha:開始時透明度  
11 toAlpha：結束時透明度  
12 duration：動畫持續時間  
13  -->

 1 <?xml version="1.0" encoding="utf-8"?>  
 2 <set xmlns:android="http://schemas.android.com/apk/res/android">  
 3    <alpha  
 4    android:fromAlpha="1.0"  
 5    android:toAlpha="0.0"  
 6    android:duration="500"  
 7    />  
 8 </set>  
 9 <!--  
10 fromAlpha:開始時透明度  
11 toAlpha：結束時透明度  
12 duration：動畫持續時間  
13  -->

5、建立Dialog界面的布局文件，新建文件夾/platforms/android/res/layout，里面再新建main.xml，具體代碼實現如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
 3     android:layout_width="fill_parent"  
 4     android:layout_height="fill_parent"  
 5     android:layout_gravity="top|center_vertical"  
 6     android:gravity="top|center_vertical"  
 7     android:orientation="vertical" >  
 8   
 9       <!-- 這個是菊花進度條 -->
10     <!-- <ProgressBar  
11         android:id="@+id/progressBar1"  
12         style="?android:attr/progressBarStyleSmallTitle"  
13         android:layout_width="wrap_content"  
14         android:layout_height="wrap_content"  
15         android:layout_gravity="center|center_vertical"  
16         android:gravity="center|center_vertical" />  -->
17         
18    <!-- 這個是打橫的進度條 -->
19    <ProgressBar  
20     android:id="@+id/progressBar5" 
21     android:layout_width="fill_parent"  
22     android:layout_height="5dp"  
23     android:layout_gravity="top|fill_vertical"  
24     android:progressDrawable="@drawable/progressbar"
25     style="?android:attr/progressBarStyleHorizontal" 
26     android:max="100" 
27     android:progress="0" 
28     android:secondaryProgress="0" /> 
29     
30 </LinearLayout>

6、建立ProgressBar的樣式文件，默認的ProgressBar實在是難看，所有很有必要自己再寫樣式，在/platforms/android/res/drawable下新建文件progressbar.xml，具體代碼實現如下：

 1 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
 2     <!-- 白色背景，支持漸變色 -->
 3     <item android:id="@android:id/background">  
 4         <shape>  
 5             <corners android:radius="5dip" />  
 6             <gradient  
 7                 android:angle="0"  
 8                 android:centerColor="#ffffffff"  
 9                 android:centerY="0.75"  
10                 android:endColor="#ffffffff"  
11                 android:startColor="#ffffffff" />  
12         </shape>  
13     </item>
14     
15     <!-- 進度2樣式 -->
16     <item android:id="@android:id/secondaryProgress">  
17         <clip>  
18             <shape>  
19                 <corners android:radius="5dip" />  
20                 <gradient  
21                     android:angle="0"  
22                     android:centerColor="#80ffb600"  
23                     android:centerY="0.75"  
24                     android:endColor="#a0ffcb00"  
25                     android:startColor="#80ffd300" />  
26             </shape>  
27         </clip>  
28     </item>
29     
30     <!-- 進度樣式 -->
31     <item android:id="@android:id/progress">  
32         <clip>  
33             <shape>  
34                 <corners android:radius="5dip" />  
35                 <gradient  
36                     android:angle="0"  
37                     android:endColor="#ff0cae0a"  
38                     android:startColor="#ff53ff51" />  
39             </shape>  
40         </clip>  
41     </item>  
42 </layer-list>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 頁面加載進度條的實現 vue 實現頁面加載進度條頁面加載進度條 ios開發之--給WebView加載進度條 webview添加網頁加載進度條頁面加載進度條或加載動態圖實現頁面頂部加載頁面時的進度條是如何實現的【Android】帶進度條的WebView Android 三種方式實現自定義圓形頁面加載中效果的進度條 jquery實現頁面加載進度條(轉)