使ViewFlipper中的WebView实现手势效果
使ViewFlipper中的WebView实现手势效果
今天写Blog阅读器的时候遇到了这个问题,把它分享给大家,让同样是新手们少走冤枉路
始初写这个功能的时候,用过了好多方法,也耗了不少时间去研究WebView和ViewFlipper的属性
后来知道了WebView本身的onTouchEvent和ViewFlipper有冲突;(WebView表示当然是老大说了算是吧,ViewFlipper表示压力很大,只能靠边站)
那没办法了,我们需要把WebView“修理”一下,重写它的onTouchEvent方法
先来看看ViewFlipper的Activity
TestWebViewFlip.java
创建ViewFlipper,给它添加2个WebView页面
public class TestWebViewFlip extends Activity{ private ViewFlipper flipper; //定义类myWebView //MyWebView类,重写了onTouchEvent方法 MyWebView myWebView; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); flipper = (ViewFlipper) this.findViewById(R.id.ViewFlipper); //添加第一个alipper 为 http://www.baidu.com flipper.addView(addWebView("http://www.baidu.com")); //添加第二个alipper 为 http://www.google.com.hk flipper.addView(addWebView("http://www.google.com.hk")); } /** * 往flipper中添加WebView * @param url 网页地址 * @return */ private View addWebView(String url){ myWebView = new MyWebView(this, flipper); //设置WebView属性,能够执行Javascript脚本 myWebView.getSettings().setJavaScriptEnabled(true); //加载需要显示的网页 //webview.loadUrl("file:///android_asset/index.html"); myWebView.loadUrl(url); //使WebView的网页跳转在WebView中进行,而非跳到浏览器 myWebView.setWebViewClient(new WebViewClient(){ public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); return myWebView; } }
下面是继承了WebView类,重写onTouchEvent方法
MyWebView.java
setInAnimation(AnimationUtils.loadAnimation( this.getContext(),
R.anim.push_right_in)); 这个是手势滑动的效果,push_right_in是效果对应的文件名
这个功能可以在网上找到好多相关资料,这里不详细说
public class MyWebView extends WebView { float downXValue; long downTime; private ViewFlipper flipper; private float lastTouchX, lastTouchY; private boolean hasMoved = false; public MyWebView(Context context, ViewFlipper flipper) { super(context); this.flipper = flipper; } @Override public boolean onTouchEvent(MotionEvent evt) { boolean consumed = super.onTouchEvent(evt); if (isClickable()) { switch (evt.getAction()) { case MotionEvent.ACTION_DOWN: lastTouchX = evt.getX(); lastTouchY = evt.getY(); downXValue = evt.getX(); downTime = evt.getEventTime(); hasMoved = false; break; case MotionEvent.ACTION_MOVE: hasMoved = moved(evt); break; case MotionEvent.ACTION_UP: float currentX = evt.getX(); long currentTime = evt.getEventTime(); float difference = Math.abs(downXValue - currentX); long time = currentTime - downTime; Log.i("Touch Event:", "Distance: " + difference + "px Time: "+ time + "ms"); /** X轴滑动距离大于100,并且时间小于220ms,并且向X轴右方向滑动 && (time < 220) */ if ((downXValue < currentX) && (difference > 100 && (time < 220))) { /** 跳到上一页 */ this.flipper.setInAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_right_in)); this.flipper.setOutAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_right_out)); flipper.showPrevious(); } /** X轴滑动距离大于100,并且时间小于220ms,并且向X轴左方向滑动 */ if ((downXValue > currentX) && (difference > 100) && (time < 220)) { /** 跳到下一页 */ this.flipper.setInAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_left_in)); this.flipper.setOutAnimation(AnimationUtils.loadAnimation( this.getContext(), R.anim.push_left_out)); flipper.showNext(); } break; } } return consumed || isClickable(); } private boolean moved(MotionEvent evt) { return hasMoved || Math.abs(evt.getX() - lastTouchX) > 10.0 || Math.abs(evt.getY() - lastTouchY) > 10.0; } }
ViewFlipper的布局文件: main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ViewFlipper android:id="@+id/ViewFlipper" android:layout_width="fill_parent" android:layout_height="fill_parent" > </ViewFlipper> </RelativeLayout>
手势滑动的4个效果文件:
路径res/anim/
push_left_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="30" android:toXDelta="-80" android:fromYDelta="30" android:toYDelta="300" android:duration="2000" /> <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="500" /> </set>
push_left_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="-100%p" android:duration="500" /> <alpha android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="500" /> </set>
push_right_in.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="-100%p" android:toXDelta="0" android:duration="500" /> <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="500" /> </set>
push_right_out.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="500" /> <alpha android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="500" /> </set>
手势打印结果:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。