2015年8月1日
VS2015 Cordova实现WebView加载页面进度条（Android）

因为使用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>

 

posted @ 2015-08-01 18:10 andytan60 阅读(2671) 评论(1) 推荐(0)
点击右上角即可分享
微信分享提示