Android上webview界面切换效果

Android上webview界面切换效果

大家有没有遇到过这种需求，使用Android上的webview控件时需要跳转到下一个html时，要求当前界面缓缓的向左移动，下一个html界面缓缓的从右边出现。

这是当时在公司做基于phonegap的项目时用到的，在extends WebChromeClient的类中实现的方法里加上如下代码：

1. @Override  
2.         public void onProgressChanged(WebView view, int newProgress) {  
3.             if(newProgress==100){  
4.                 if(iamgeView!=null)  
5.                 iamgeView.setVisibility(View.GONE);  
6.                 //view.setVisibility(View.VISIBLE);   
7.               
8.                 //DroidGap.this.root.addView(view);   
9.               
10.                 System.out.println("加载完成");  
11.                 Animation translate_in=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_in);  
12.                   
13.                   
14.                 translate_in.setFillAfter(true);  
15.                 translate_in.setDuration(1000);  
16.                 translate_in.setDetachWallpaper(true);  
17.             //  translate_in.   
18.                 view.setAnimation(translate_in);   
19.                   
20.                   
21.                   
22.     Animation translate_out=AnimationUtils.loadAnimation(DroidGap.this, R.drawable.translate_out);  
23.                   
24.     translate_out.setAnimationListener(new AnimationListener(){  
25.   
26.         @Override  
27.         public void onAnimationEnd(Animation animation) {  
28.             if(null!=iamgeView){  
29.                 DroidGap.this.root.removeView(iamgeView);  
30.                 iamgeView=null;  
31.             }  
32.               
33.         }  
34.   
35.         @Override  
36.         public void onAnimationRepeat(Animation animation) {  
37.             // TODO Auto-generated method stub   
38.               
39.         }  
40.   
41.         @Override  
42.         public void onAnimationStart(Animation animation) {  
43.             // TODO Auto-generated method stub   
44.               
45.         }  
46.           
47.     });  
48.     translate_out.setFillAfter(true);  
49.     translate_out.setDuration(1000);  
50.     translate_out.setDetachWallpaper(true);  
51.             //  translate_in.   
52.     if(null!=iamgeView){  
53.         iamgeView.setAnimation(translate_out);   
54.     }             
55.             }else{  
56.                   
57.                 if(null==iamgeView){  
58.                       
59.                     iamgeView=new ImageView(DroidGap.this);  
60.   
61.                     view.setDrawingCacheEnabled(true);  
62.                     Bitmap bitmap=view.getDrawingCache();  
63.                     if(null!=bitmap){  
64.                         Bitmap b=   Bitmap.createBitmap(bitmap);  
65.                         iamgeView.setImageBitmap(b);  
66.                     }  
67.                             DroidGap.this.root.addView(iamgeView);  
68.                 }  
69.                 }  
70.             super.onProgressChanged(view, newProgress);  
71.         }  

iamgeView：自己定义的ImageView控件。

R.drawable.translate_in：进入的translate动画，

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android" >  
3.      <translate android:fromXDelta="100%" android:toXDelta="0%p"    
4.             android:duration="100" />    
5.       
6. </set>  

R.drawable.translate_out：出的translate动画，

1. <?xml version="1.0" encoding="utf-8"?>  
2. <set xmlns:android="http://schemas.android.com/apk/res/android">  
3.      <translate android:fromXDelta="0%" android:toXDelta="-100%p"    
4.             android:duration="100" />    
5.       
6. </set>  

该代码详细描述：在onProgressChanged方法中，首先判定是否加载进度是否到100，

在没有执行完的情况下，先去new ImageView对象，iamgeView=new ImageView(DroidGap.this);

然后进行设置view.setDrawingCacheEnabled(true);很重要的一句话，

为了下面能够对webview界面截取图片，即 Bitmap bitmap=view.getDrawingCache();

然后添加到当前的Linearlayout布局中即DroidGap.this.root.addView(iamgeView);

如果下面的页面加载完成了，就执行进入动画，即view.setAnimation(translate_in);

同时对该Imageview执行out动画，并且在动画的监听的结束时执行

DroidGap.this.root.removeView(iamgeView);即清除掉当前生成的屏幕截图。

iamgeView=null;

第一次写，因为是一个小功能模块，这里大家可以放到自己的项目里试一下，主要代码就这么多，OK的，有问题的话再交流。