VS2015 Cordova实现WebView加载页面进度条(Android)

12-05 19:00:06   来源:   评论: 点击:

因为使用Cordova做app时,加载页面没有进度条,用户无法感知打开进度,故加入进度条,具体实现如下:1、 如果项目没有生成过apk,需先生成一次,这样在项目下面才会出现platforms an

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

相关热词搜索:

上一篇:android-类HttpURLConnection的使用 下一篇:Error applying BeanValidation relational constraints错误的解决
分享到: 收藏