Android開發實例：如何實現翻書效果

　   我們在Android系統中進行電子書閱讀時，經常見到有翻書效果。那麼在進行電子書等方面的Android開發時，一般也會使用翻書效果。本文就給出一個實例來講解Android翻書效果的實現方法。

      eBook繼承FrameLayout，好處在於FrameLayout有圖層效果，後添加的View類能覆蓋前面的View。

      初始化：定義一個LinearLayout的成員變量mView，將page.xml inflate 成View分別用leftPage，rightPage引用，並初始化其數據，將leftPage，rightPage通過addView添加到mView，然後將mView添加到eBook。在eBook裡定義一個私有類BookView extends View。 並定義成員變量 BookView mBookView; 最後將mBookView添加的eBook中，這樣，mView中的內容為書面內容，mBookView中的內容為特效內容。後續手勢動作：可將各種手勢的特效動作畫於mBookView的畫布中。

1. package eoe.book;    
2.   
3. 　　import Android.app.Activity;    
4.   
5. 　　import android.os.Bundle;    
6.   
7. 　　import android.util.Log;    
8.   
9. 　　import android.view.View;    
10.   
11. 　　import android.widget.ImageView;    
12.   
13. 　　public class Book extends Activity {    
14.   
15. 　　/** Called when the activity is first created. */    
16.   
17. 　　eBook mBook;    
18.   
19. 　　public void onCreate(Bundle savedInstanceState) {    
20.   
21. 　　super.onCreate(savedInstanceState);    
22.   
23. 　　setContentView(R.layout.main);    
24.   
25. 　　mBook = (eBook)findViewById(R.id.my_book);    
26.   
27. 　　mBook.addLayoutRecForPage(R.layout.page,21);    
28.   
29. 　　mBook.setListener(new eBook.Listener() {    
30.   
31. 　　public void onPrevPage() {    
32.   
33. 　　updateContent();    
34.   
35. 　　}    
36.   
37. 　　public void onNextPage() {    
38.   
39. 　　updateContent();    
40.   
41. 　　}    
42.   
43. 　　public void onInit() {    
44.   
45. 　　updateContent();    
46.   
47. 　　}    
48.   
49. 　　});    
50.   
51. 　　}    
52.   
53. 　　private void updateContent(){    
54.   
55. 　　int index = mBook.getIndexForLeftPage();    
56.   
57. 　　View left = mBook.getLeftPage(),right = mBook.getRightPage();    
58.   
59. 　　View next1 = mBook.getNextPage1(),next2 = mBook.getNextPage2();    
60.   
61. 　　View prev1 = mBook.getPrevPage1(),prev2 = mBook.getPrevPage2();    
62.   
63. 　　if(left != null)setImg(left,index);    
64.   
65. 　　if(right != null)setImg(right,index+1);    
66.   
67. 　　if(next1 != null)setImg(next1,index+2);    
68.   
69. 　　if(next2 != null)setImg(next2,index+3);    
70.   
71. 　　if(prev1 != null)setImg(prev1,index-1);    
72.   
73. 　　if(prev2 != null)setImg(prev2,index-2);    
74.   
75. 　　mBook.invalidate();    
76.   
77. 　　}    
78.   
79. 　　private void setImg(View v , int index){    
80.   
81. 　　if(index >= 0 && index < 20){    
82.   
83. 　　ImageView img = (ImageView)v.findViewById(R.id.book_img);    
84.   
85. 　　if(img == null)return;    
86.   
87. 　　Log.d("eBook","set Img");    
88.   
89. 　　switch(index%6){    
90.   
91. 　　case 0:    
92.   
93. 　　img.setImageResource(R.drawable.p1);    
94.   
95. 　　break;    
96.   
97. 　　case 1:    
98.   
99. 　　img.setImageResource(R.drawable.p2);    
100.   
101. 　　break;    
102.   
103. 　　case 2:    
104.   
105. 　　img.setImageResource(R.drawable.p3);    
106.   
107. 　　break;    
108.   
109. 　　case 3:    
110.   
111. 　　img.setImageResource(R.drawable.p4);    
112.   
113. 　　break;    
114.   
115. 　　case 4:    
116.   
117. 　　img.setImageResource(R.drawable.p5);    
118.   
119. 　　break;    
120.   
121. 　　case 5:    
122.   
123. 　　img.setImageResource(R.drawable.p6);    
124.   
125. 　　break;    
126.   
127. 　　default:    
128.   
129. 　　break;    
130.   
131. 　　}    
132.   
133. 　　}    
134.   
135. 　　}    
136.   
137. 　　}   

       我們再來看看main.xml代碼：

1. <?xml version="1.0" encoding="utf-8"?>    
2.   
3. 　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
4.   
5. 　　android：orientation="vertical"    
6.   
7. 　　android:layout_width="fill_parent"    
8.   
9. 　　android:layout_height="fill_parent">    
10.   
11. 　　<com.book.eBook android:id="@+id/my_book"    
12.   
13. 　　android:layout_width="fill_parent"    
14.   
15. 　　android:layout_height="fill_parent"/>    
16.   
17. 　　</LinearLayout>   

       page.xml文件：

1. <?xml version="1.0" encoding="utf-8"?>    
2.   
3. 　　<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
4.   
5. 　　android：orientation="vertical"    
6.   
7. 　　android:layout_width="fill_parent"    
8.   
9. 　　android:layout_height="fill_parent"    
10.   
11. 　　android:padding="20dip"    
12.   
13. 　　android:background="#FFFFDD">    
14.   
15. 　　<ImageView android:layout_width="fill_parent" android:id="@+id/book_img"    
16.   
17. 　　android:layout_height="fill_parent" android:layout_weight="1"    
18.   
19. 　　android:scaleType="fitXY" android:src="@drawable/p1"/>    
20.   
21. 　　<com.book.TelEdit    
22.   
23. 　　android:id="@+id/book_text"    
24.   
25. 　　android:layout_width="fill_parent"    
26.   
27. 　　android:background="#ffffdd"    
28.   
29. 　　android:gravity="top"    
30.   
31. 　　android:typeface="sans"    
32.   
33. 　　android:capitalize="sentences"    
34.   
35. 　　android:lineSpacingExtra="5dip"    
36.   
37. 　　android:textSize="15dip"    
38.   
39. 　　android:textColor="#000000"    
40.   
41. 　　android:layout_height="fill_parent"    
42.   
43. 　　android:paddingTop="30dip"    
44.   
45. 　　android:layout_weight="1"/>    
46.   
47. 　　</LinearLayout>   

       控件TelEdit.java代碼：

1. package eoe.book;    
2.   
3. 　　import android.content.Context;    
4.   
5. 　　import android.graphics.Canvas;    
6.   
7. 　　import android.graphics.Color;    
8.   
9. 　　import android.graphics.Paint;    
10.   
11. 　　import android.util.AttributeSet;    
12.   
13. 　　import android.view.WindowManager;    
14.   
15. 　　import android.widget.EditText;    
16.   
17. 　　public class TelEdit extends EditText {    
18.   
19. 　　Context mContext;    
20.   
21. 　　public TelEdit(Context context) {    
22.   
23. 　　super(context);    
24.   
25. 　　mContext = context;    
26.   
27. 　　}    
28.   
29. 　　public TelEdit(Context context, AttributeSet attrs) {    
30.   
31. 　　super(context, attrs);    
32.   
33. 　　mContext = context;    
34.   
35. 　　}    
36.   
37. 　　public TelEdit(Context context, AttributeSet attrs, int defStyle) {    
38.   
39. 　　super(context, attrs, defStyle);    
40.   
41. 　　mContext = context;    
42.   
43. 　　}    
44.   
45. 　　protected void onDraw(Canvas canvas) {    
46.   
47. 　　WindowManager wm = (WindowManager) mContext.getSystemService("window");    
48.   
49. 　　int windowWidth = wm.getDefaultDisplay().getWidth();    
50.   
51. 　　int windowHeight = wm.getDefaultDisplay().getHeight();    
52.   
53. 　　Paint paint = new Paint();    
54.   
55. 　　paint.setStyle(Paint.Style.FILL);    
56.   
57. 　　paint.setColor(Color.BLACK);    
58.   
59. 　　int paddingTop = getPaddingTop();    
60.   
61. 　　int paddingBottom = getPaddingBottom();    
62.   
63. 　　int scrollY = getScrollY();    
64.   
65. 　　int scrollX = getScrollX() + windowWidth;    
66.   
67. 　　int innerHeight = scrollY + getHeight() - paddingBottom;    
68.   
69. 　　int lineHeight = getLineHeight();    
70.   
71. 　　int baseLine = scrollY+ (lineHeight - ((scrollY - paddingTop) % lineHeight));    
72.   
73. 　　int x = 8;    
74.   
75. 　　while (baseLine < innerHeight) {    
76.   
77. 　　canvas.drawLine(x, baseLine, scrollX - x, baseLine, paint);    
78.   
79. 　　baseLine += lineHeight;    
80.   
81. 　　}    
82.   
83. 　　super.onDraw(canvas);    
84.   
85. 　　}    
86.   
87. 　　}   

       eBook.java文件部分代碼：

1. package eoe.book;    
2.   
3. 　　import java.util.ArrayList;    
4.   
5. 　　import java.util.Date;    
6.   
7. 　　import java.util.List;    
8.   
9. 　　import android.content.Context;    
10.   
11. 　　import android.graphics.Bitmap;    
12.   
13. 　　import android.graphics.Canvas;    
14.   
15. 　　import android.graphics.Color;    
16.   
17. 　　import android.graphics.LinearGradient;    
18.   
19. 　　import android.graphics.Paint;    
20.   
21. 　　import android.graphics.Path;    
22.   
23. 　　import android.graphics.Point;    
24.   
25. 　　import android.graphics.PorterDuffXfermode;    
26.   
27. 　　import android.graphics.Shader;    
28.   
29. 　　import android.graphics.PorterDuff.Mode;    
30.   
31. 　　import android.util.AttributeSet;    
32.   
33. 　　import android.util.Log;    
34.   
35. 　　import android.view.GestureDetector;    
36.   
37. 　　import android.view.LayoutInflater;    
38.   
39. 　　import android.view.MotionEvent;    
40.   
41. 　　import android.view.View;    
42.   
43. 　　import android.view.GestureDetector.OnGestureListener;    
44.   
45. 　　import android.widget.FrameLayout;    
46.   
47. 　　import android.widget.LinearLayout;    
48.   
49. 　　public class eBook extends FrameLayout{    
50.   
51. 　　public static final String LOG_TAG = "eBook";    
52.   
53. 　　List<Integer> myRecPages;    
54.   
55. 　　int totalPageNum;    
56.   
57. 　　Context mContext;    
58.   
59. 　　boolean hasInit = false;    
60.   
61. 　　final int defaultWidth = 600 , defaultHeight = 400;    
62.   
63. 　　int contentWidth = 0;    
64.   
65. 　　int contentHeight = 0;    
66.   
67. 　　View leftPage,rightPage,llPage,lrPage,rrPage,rlPage;    
68.   
69. 　　LinearLayout mView;    
70.   
71. 　　bookView mBookView;    
72.   
73. 　　boolean closeBook = false;    
74.   
75. 　　private enum Corner {    
76.   
77. 　　LeftTop,RightTop,LeftBottom,RightBottom,None    
78.   
79. 　　};    
80.   
81. 　　private Corner mSelectCorner;    
82.   
83. 　　final int clickCornerLen = 250*250; //50dip    
84.   
85. 　　float scrollX = 0,scrollY = 0;    
86.   
87. 　　int indexPage = 0;    
88.   
89. 　　private enum State {    
90.   
91. 　　ABOUT_TO_ANIMATE,ANIMATING,ANIMATE_END,READY,TRACKING    
92.   
93. 　　};    
94.   
95. 　　private State mState;    
96.   
97. 　　private Point aniStartPos;    
98.   
99. 　　private Point aniStopPos;    
100.   
101. 　　private Date aniStartTime;    
102.   
103. 　　private long aniTime = 2000;    
104.   
105. 　　private long timeOffset = 900;    
106.   
107. 　　Listener mListener;    
108.   
109. 　　private GestureDetector mGestureDetector;    
110.   
111. 　　private BookOnGestureListener mGestureListener;    
112.   
113. 　　public eBook(Context context) {    
114.   
115. 　　super(context);    
116.   
117. 　　Init(context);    
118.   
119. 　　}    
120.   
121. 　　public eBook(Context context, AttributeSet attrs) {    
122.   
123. 　　super(context, attrs);    
124.   
125. 　　Init(context);    
126.   
127. 　　}    
128.   
129. 　　}