使ViewFlipper中的WebView實現手勢效果 – Android移動開發技術文章_手機開發 Android移動開發教學課程

 

 

 

今天寫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>

 

手勢打印結果:

 

 

 


 

  作者 那瞬間

發佈留言