使ViewFlipper中的WebView实现手势效果

今天写Blog阅读器的时候遇到了这个问题，把它分享给大家，让同样是新手们少走冤枉路

始初写这个功能的时候，用过了好多方法，也耗了不少时间去研究WebView和ViewFlipper的属性

后来知道了WebView本身的onTouchEvent和ViewFlipper有冲突;(WebView表示当然是老大说了算是吧，ViewFlipper表示压力很大,只能靠边站)

那没办法了，我们需要把WebView“修理”一下，重写它的onTouchEvent方法

先来看看ViewFlipper的Activity   TestWebViewFlip.java

创建ViewFlipper，给它添加2个WebView页面

 1 public class TestWebViewFlip extends Activity{

 2

 3     private ViewFlipper flipper;

 4    

 5     //定义类myWebView

 6     //MyWebView类，重写了onTouchEvent方法

 7     MyWebView myWebView;

 8     /** Called when the activity is first created. */

 9     @Override

10     public void onCreate(Bundle savedInstanceState) {

11         super.onCreate(savedInstanceState);

12         setContentView(R.layout.main);

13         flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper);

14

15         //添加第一个alipper 为http://www.baidu.com

16         flipper.addView(addWebView("http://www.baidu.com"));

17         //添加第二个alipper 为http://www.google.com.hk

18         flipper.addView(addWebView("http://www.google.com.hk"));

19     }

20    

21     /**

22      * 往flipper中添加WebView

23      * @param url 网页地址

24      * @return

25 */

26     private View addWebView(String url){

27         myWebView = new MyWebView(this, flipper);

28         //设置WebView属性，能够执行Javascript脚本

29         myWebView.getSettings().setJavaScriptEnabled(true);

30         //加载需要显示的网页

31         //webview.loadUrl("file:///android_asset/index.html");

32         myWebView.loadUrl(url);

33        

34         //使WebView的网页跳转在WebView中进行，而非跳到浏览器

35         myWebView.setWebViewClient(new WebViewClient(){      

36             public boolean shouldOverrideUrlLoading(WebView view, String url) {      

37                 view.loadUrl(url);      

38                 return true;      

39             }      

40         });

41         return myWebView;

42     }

43 }

下面是继承了WebView类，重写onTouchEvent方法  MyWebView.java

setInAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_right_in)); 这个是手势滑动的效果，push_right_in是效果对应的文件名

这个功能可以在网上找到好多相关资料，这里不详细说

 1 public class MyWebView extends WebView {

 2

 3     float downXValue;

 4     long downTime;

 5     private ViewFlipper flipper;

 6

 7     private float lastTouchX, lastTouchY;

 8     private boolean hasMoved = false;

 9

10     public MyWebView(Context context, ViewFlipper flipper) {

11             super(context);

12             this.flipper = flipper;

13     }

14

15     @Override

16     public boolean onTouchEvent(MotionEvent evt) {

17         boolean consumed = super.onTouchEvent(evt);

18         if (isClickable()) {

19             switch (evt.getAction()) {

20             case MotionEvent.ACTION_DOWN:

21                 lastTouchX = evt.getX();

22                 lastTouchY = evt.getY();

23                 downXValue = evt.getX();

24                 downTime = evt.getEventTime();

25                 hasMoved = false;

26                 break;

27             case MotionEvent.ACTION_MOVE:

28                 hasMoved = moved(evt);

29                 break;

30             case MotionEvent.ACTION_UP:

31                 float currentX = evt.getX();

32                 long currentTime = evt.getEventTime();

33                 float difference = Math.abs(downXValue - currentX);

34                 long time = currentTime - downTime;

35                 Log.i("Touch Event:", "Distance: " + difference + "px Time: "+ time + "ms");

36                 /** X轴滑动距离大于100，并且时间小于220ms,并且向X轴右方向滑动   && (time < 220) */

37                 if ((downXValue < currentX) && (difference > 100 && (time < 220))) {

38                     /** 跳到上一页*/

39                     this.flipper.setInAnimation(AnimationUtils.loadAnimation(

40                             this.getContext(), R.anim.push_right_in));

41                     this.flipper.setOutAnimation(AnimationUtils.loadAnimation(

42                             this.getContext(), R.anim.push_right_out));

43                     flipper.showPrevious();

44                 }

45                 /** X轴滑动距离大于100，并且时间小于220ms,并且向X轴左方向滑动*/

46                 if ((downXValue > currentX) && (difference > 100) && (time < 220)) {

47                     /** 跳到下一页*/

48                     this.flipper.setInAnimation(AnimationUtils.loadAnimation(

49                             this.getContext(), R.anim.push_left_in));

50                     this.flipper.setOutAnimation(AnimationUtils.loadAnimation(

51                             this.getContext(), R.anim.push_left_out));

52                     flipper.showNext();

53                 }

54                 break;

55             }

56         }

57         return consumed || isClickable();

58     }

59

60     private boolean moved(MotionEvent evt) {

61         return hasMoved || Math.abs(evt.getX() - lastTouchX) > 10.0

62                 || Math.abs(evt.getY() - lastTouchY) > 10.0;

63     }

64

65 }

复制代码

ViewFlipper的布局文件: main.xml

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 3     android:layout_width="fill_parent"

 4     android:layout_height="fill_parent"

 5 >

 6     <ViewFlipper android:id="@+id/ViewFlipper"

 7         android:layout_width="fill_parent"

 8         android:layout_height="fill_parent"

 9 >

10     </ViewFlipper>

11 </RelativeLayout>

复制代码

手势滑动的4个效果文件:

路径res/anim/

push_left_in.xml

 1 <?xml version="1.0" encoding="utf-8"?>

 2 <set xmlns:android="http://schemas.android.com/apk/res/android">

 3     <translate

 4 android:fromXDelta="30"

 5 android:toXDelta="-80"

 6 android:fromYDelta="30"

 7 android:toYDelta="300"

 8 android:duration="2000"

 9 />

10     <alpha android:fromAlpha="0.1" android:toAlpha="1.0"

11         android:duration="500" />

12 </set>

复制代码

push_left_out.xml

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="500" />

5     <alpha android:fromAlpha="1.0" android:toAlpha="0.1"

6         android:duration="500" />

7 </set>

复制代码

push_right_in.xml

  View Code

1 <?xml version="1.0" encoding="utf-8"?>

2 <set xmlns:android="http://schemas.android.com/apk/res/android">

3     <translate android:fromXDelta="-100%p" android:toXDelta="0"

4         android:duration="500" />

5     <alpha android:fromAlpha="0.1" android:toAlpha="1.0"

6         android:duration="500" />

7 </set>

复制代码

push_right_out.xml

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="500" />

5     <alpha android:fromAlpha="1.0" android:toAlpha="0.1"

6         android:duration="500" />

7 </set>

手势打印结果:

  作者 那瞬间