我的新浪微博
使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是效果对应的文件名
这个功能可以在网上找到好多相关资料，这里不详细说
View Code
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
View Code
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
View Code
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
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="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
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="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>
手势打印结果:
