标签：
因为使用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>
VS2015 Cordova实现WebView加载页面进度条（Android）
标签：
原文地址：http://www.cnblogs.com/andytan60/p/4694461.html
