Android開發教程：左右滑屏的實現

先上效果圖：

實現“左右滑屏”核心類是Scroller，將View中的內容左右滾動從而實現滑屏效果。關鍵方法有：
scroller.scrollTo(x,y):
直接將View中的內容滾動到指定的(x,y)位置。
scroller.scrollTo(dx,dy):
直接將View中的內容滾動到相對當前狀態的(dx,dy)位置。本例中用於實現手指拖拉移動View的效果。
scroller.startScroll(nowX, nowY, moveX, moveY, duration):
在duration的時間內完成move的位移。配合重寫View.computeScroll()不斷刷新界面從而實現滑屏動畫。

如果當前點擊拖拉的組件是按鈕等自身可處理手勢動作的組件，則重寫ViewGroup.onInterceptTouchEvent(MotionEvent)可攔截此事件並將此事件傳遞至onTouchEvent(MotionEvent)進行處理。從而對如按鈕等即可點擊亦可拖拉。


左右滑屏的指示器位置為SlidingIndicator。在fadeOut()方法中為本組件的動畫設置了延時，體驗上更親近：

1. animFadeout.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay);
2. setAnimation(animFadeout);

代碼如下(Java奉上，XML代碼請各位看官自己實現)：

ActSlidingContainer.java

1. package lab.sodino.sliding;
3. import lab.sodino.sliding.SlidingContainer.OnSlidingListener;
4. import Android.app.Activity;
5. import android.os.Bundle;
6. import android.view.View;
7. import android.view.View.OnClickListener;
8. import android.widget.Button;
10. public class ActSlidingContainer extends Activity implements OnClickListener, OnSlidingListener {
11. private SlidingContainer slidingContainer;
12. private SlidingIndicator slidingIndicator;
13. private Button btnLeft, btnRight, btnMid;
15. @Override
16. public void onCreate(Bundle savedInstanceState) {
17. super.onCreate(savedInstanceState);
18. setContentView(R.layout.main);
19. btnLeft = (Button) findViewById(R.id.left);
20. btnLeft.setOnClickListener(this);
21. btnRight = (Button) findViewById(R.id.right);
22. btnRight.setOnClickListener(this);
23. btnMid = (Button) findViewById(R.id.mid);
24. btnMid.setOnClickListener(this);
26. slidingContainer = (SlidingContainer) findViewById(R.id.slidingContainer);
27. slidingContainer.setOnSlidingListener(this);
28. slidingIndicator = (SlidingIndicator) findViewById(R.id.slidingIndicator);
29. slidingIndicator.setPageAmount(slidingContainer.getChildCount());
30. }
32. @Override
33. public void onClick(View v) {
34. if (v == btnLeft) {
35. slidingContainer.scroll2page(slidingContainer.getCurrentPage() - 1);
36. } else if (v == btnRight) {
37. slidingContainer.scroll2page(slidingContainer.getCurrentPage() + 1);
38. } else if (v == btnMid) {
39. slidingContainer.scroll2page(slidingContainer.getChildCount() >> 1);
40. }
41. }
43. @Override
44. public void onSliding(int scrollX) {
45. float scale = (float) (slidingContainer.getPageWidth() * slidingContainer.getChildCount())
46. / (float) slidingIndicator.getWidth();
47. slidingIndicator.setPosition((int) (scrollX / scale));
48. }
50. @Override
51. public void onSlidingEnd(int pageIdx, int scrollX) {
52. slidingIndicator.setCurrentPage(pageIdx);
53. }
54. }

1. <pre name="code" class="java" style="background-color: rgb(255, 255, 255); "><pre>

SlidingContainer.java

1. package lab.sodino.sliding;
3. import java.util.ArrayList;
5. import android.content.Context;
6. import android.content.res.TypedArray;
7. import android.graphics.Canvas;
8. import android.graphics.Rect;
9. import android.util.AttributeSet;
10. import android.view.MotionEvent;
11. import android.view.View;
12. import android.view.ViewConfiguration;
13. import android.view.ViewGroup;
14. import android.widget.Scroller;
16. /**
17. * @author Sodino E-mail:[email protected]
18. * @version Time：2012-1-18 下午02:55:59
19. */
20. public class SlidingContainer extends ViewGroup {
21. private static final int INVALID_SCREEN = -1;
22. public static final int SCROLL_DURATION = 500;
23. public static final int SPEC_UNDEFINED = ViewGroup.LayoutParams.FILL_PARENT;
24. public static final int SNAP_VELOCITY = 500;
25. private static final int STATE_STATIC = 0;
26. private static final int STATE_SCROLLING = 1;
27. private int pageWidth;
28. /**
29. * 標識是否是第一次布局。<br/>
30. * 第一次布局需要將第一頁調居中顯示在屏幕上。<br/>
31. */
32. private boolean isFirstLayout;
33. private int currentPage, nextPage;
34. private Scroller scroller;
35. /** 手指滑動過程中可理解為拖動的最小長度。 */
36. private int distanceSlop;
37. private int state = STATE_STATIC;
38. private float lastMotionX;
39. private OnSlidingListener slidingListener;
41. public SlidingContainer(Context context, AttributeSet attrs, int defStyle) {
42. super(context, attrs, defStyle);
43. LogOut.out(this, "SlidingContainer() 3");
44. initialization(context, attrs);
45. }
47. public SlidingContainer(Context context, AttributeSet attrs) {
48. super(context, attrs);
49. LogOut.out(this, "SlidingContainer() 2");
50. initialization(context, attrs);
51. }
53. public SlidingContainer(Context context) {
54. super(context);
55. LogOut.out(this, "SlidingContainer() 1");
56. initialization(context, null);
57. }
59. private void initialization(Context context, AttributeSet attrs) {
60. if (attrs != null) {
61. TypedArray typedArr = context.obtainStyledAttributes(attrs, R.styleable.sliding_SlidingContainer);
62. pageWidth = typedArr.getDimensionPixelSize(R.styleable.sliding_SlidingContainer_pageWidth, SPEC_UNDEFINED);
63. typedArr.recycle();
64. }
66. state = STATE_STATIC;
67. isFirstLayout = true;
68. currentPage = 0;
69. nextPage = INVALID_SCREEN;
71. scroller = new Scroller(context);
73. final ViewConfiguration configuration = ViewConfiguration.get(context);
74. distanceSlop = configuration.getScaledTouchSlop();
75. }
77. public int getCurrentPage() {
78. return currentPage;
79. }
81. public int getScrollXByPage(int page) {
82. return (page * pageWidth) - getPagePadding();
83. }
85. public int getPagePadding() {
86. return (getMeasuredWidth() - pageWidth) >> 1;
87. }
89. public int getPageWidth() {
90. return pageWidth;
91. }
93. public boolean scroll2page(int page) {
94. if (page < 0) {
95. return false;
96. } else if (page >= getChildCount()) {
97. return false;
98. } else if (scroller.isFinished() == false) {
99. return false;
100. }
101. enableChildrenCache(true);
102. boolean changingPage = (page != currentPage);
103. nextPage = page;
105. View focusedChild = getFocusedChild();
106. if (changingPage && focusedChild != null && focusedChild == getChildAt(currentPage)) {
107. focusedChild.clearFocus();
108. }
110. final int nowX = getScrollX();
111. final int newX = getScrollXByPage(nextPage);
112. final int move = newX - nowX;
113. final int absMove = Math.abs(move);
114. int duration = SCROLL_DURATION;
115. if (absMove < pageWidth) {
116. duration = SCROLL_DURATION * absMove / pageWidth;
117. }
118. // 啟動左右切屏動畫
119. scroller.startScroll(nowX, 0, move, 0, duration);
120. invalidate();
121. return true;
122. }
124. private void checkScrolling(float x) {
125. float diff = Math.abs(x - lastMotionX);
126. if (diff > distanceSlop) {
127. state = STATE_SCROLLING;
128. enableChildrenCache(true);
129. }
130. }
132. /**
133. * 開始滑動時設置允許使用緩存。<br/>
134. * 結束滑動時設置取消緩存。<br/>
135. */
136. public void enableChildrenCache(boolean enable) {
137. setChildrenDrawingCacheEnabled(enable);
138. setChildrenDrawnWithCacheEnabled(enable);
139. }
141. /** 在正式顯示之前設置才有效。 */
142. public boolean setPageWidth(int width) {
143. if (isFirstLayout) {
144. pageWidth = width;
145. return true;
146. }
147. return false;
148. }
150. public void setOnSlidingListener(OnSlidingListener listener) {
151. slidingListener = listener;
152. }
154. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
155. LogOut.out(this, "onMeasure()");
156. super.onMeasure(widthMeasureSpec, heightMeasureSpec);
158. pageWidth = (pageWidth == SPEC_UNDEFINED) ? getMeasuredWidth() : pageWidth;
159. pageWidth = Math.min(Math.max(0, pageWidth), getMeasuredWidth());
161. final int count = getChildCount();
162. for (int i = 0; i < count; i++) {
163. int childWidthSpec = MeasureSpec.makeMeasureSpec(pageWidth, MeasureSpec.EXACTLY);
164. View view = getChildAt(i);
165. view.measure(childWidthSpec, heightMeasureSpec);
166. }
167. }
169. @Override
170. protected void onLayout(boolean changing, int left, int top, int right, int bottom) {
171. LogOut.out(this, "onLayout");
172. int childLeft = 0;
173. final int count = getChildCount();
174. for (int i = 0; i < count; i++) {
175. final View view = getChildAt(i);
176. if (view.getVisibility() != View.GONE) {
177. int childWidth = view.getMeasuredWidth();
178. view.layout(childLeft, 0, childLeft + childWidth, view.getMeasuredHeight());
179. childLeft += childWidth;
180. }
181. }
183. if (isFirstLayout) {
184. scrollTo(getScrollXByPage(currentPage), 0);
185. isFirstLayout = false;
186. }
187. }
189. public boolean onInterceptTouchEvent(MotionEvent event) {
190. LogOut.out(this, "onInterceptTouchEvent action=" + event.getAction());
191. final int action = event.getAction();
192. if (action == MotionEvent.ACTION_MOVE && state != STATE_STATIC) {
193. // MOVE及非靜止情況下，返回TRUE阻止將此事件傳遞給子組件，
194. // 而是執行onTouchEvent()來實現滑動
195. return true;
196. }
197. final float x = event.getX();
198. switch (action) {
199. case MotionEvent.ACTION_DOWN:
200. lastMotionX = x;
201. // 點擊按鈕時，此處設置狀態為靜止。
202. state = scroller.isFinished() ? STATE_STATIC : STATE_SCROLLING;
203. break;
204. case MotionEvent.ACTION_MOVE:
205. if (state == STATE_STATIC) {
206. // 由於已靜止，在點擊按鈕後進行拖拉，則根據拖拉位移大小決定是否需要改變狀態進而進一步攔截此事件。
207. checkScrolling(x);
208. }
209. break;
210. case MotionEvent.ACTION_UP:
211. case MotionEvent.ACTION_CANCEL:
212. enableChildrenCache(false);
213. state = STATE_STATIC;
214. break;
215. }
216. // 非靜止狀態，將此事件交由onTouchEvent()處理。
217. return state != STATE_STATIC;
218. }
220. public boolean onTouchEvent(MotionEvent event) {
221. LogOut.out(this, "onTouchEvent");
222. super.onTouchEvent(event);
223. final int action = event.getAction();
224. final float x = event.getX();
225. switch (action) {
226. case MotionEvent.ACTION_DOWN:
227. lastMotionX = x;
228. if (scroller.isFinished() == false) {
229. scroller.abortAnimation();
230. }
231. break;
232. case MotionEvent.ACTION_MOVE:
233. if (state == STATE_STATIC) {
234. checkScrolling(x);
235. } else if (state == STATE_SCROLLING) {
236. int moveX = (int) (lastMotionX - x);
237. lastMotionX = x;
238. if (getScrollX() < 0 || getScrollX() > getChildAt(getChildCount() - 1).getLeft()) {
239. // 對於越界的拖拉，則將位移減半。
240. moveX = moveX >> 1;
241. }
242. scrollBy(moveX, 0);
243. }
244. break;
245. case MotionEvent.ACTION_UP:
246. case MotionEvent.ACTION_CANCEL:
247. if (state == STATE_SCROLLING) {
248. final int startX = getScrollXByPage(currentPage);
249. // 默認選擇回到手指滑動之前的當前頁
250. int whichPage = currentPage;
251. int xSpace = getWidth() / 8;
252. if (getScrollX() < startX - xSpace) {
253. whichPage = Math.max(0, whichPage - 1);
254. } else if (getScrollX() > startX + xSpace) {
255. whichPage = Math.min(getChildCount() - 1, whichPage + 1);
256. }
257. scroll2page(whichPage);
258. }
259. state = STATE_STATIC;
260. break;
261. }
262. return true;
263. }
265. /** 讓拖拉、動畫過程中界面過渡順滑。 */
266. protected void dispatchDraw(Canvas canvas) {
267. final long drawingTime = getDrawingTime();
269. final int count = getChildCount();
270. for (int i = 0; i < count; i++) {
271. drawChild(canvas, getChildAt(i), drawingTime);
272. }
274. if (slidingListener != null) {
275. int adjustedScrollX = getScrollX() + getPagePadding();
276. slidingListener.onSliding(adjustedScrollX);
277. if (adjustedScrollX % pageWidth == 0) {
278. slidingListener.onSlidingEnd(adjustedScrollX / pageWidth, adjustedScrollX);
279. }
280. }
281. }
283. /** 與Scroller相匹配，實現動畫效果中每一幀的界面更新。 */
284. public void computeScroll() {
285. if (scroller.computeScrollOffset()) {
286. scrollTo(scroller.getCurrX(), scroller.getCurrY());
287. postInvalidate();
288. } else if (nextPage != INVALID_SCREEN) {
289. currentPage = nextPage;
290. nextPage = INVALID_SCREEN;
291. enableChildrenCache(false);
292. }
293. }
296. public static interface OnSlidingListener {
297. public void onSliding(int scrollX);
299. public void onSlidingEnd(int pageIdx, int scrollX);
300. }
301. }

1. package lab.sodino.sliding;
3. import android.content.Context;
4. import android.content.res.TypedArray;
5. import android.graphics.Canvas;
6. import android.graphics.Paint;
7. import android.graphics.RectF;
8. import android.util.AttributeSet;
9. import android.view.View;
10. import android.view.animation.AlphaAnimation;
11. import android.view.animation.Animation;
12. import android.view.animation.AnimationUtils;
13. import android.view.animation.LinearInterpolator;
15. /**
16. * @author Sodino E-mail:[email protected]
17. * @version Time：2012-1-18 下午03:31:08
18. */
19. public class SlidingIndicator extends View {
20. public static final int BAR_COLOR = 0xaa777777;
21. public static final int HIGHLIGHT_COLOR = 0xaa999999;
22. public static final int FADE_DELAY = 2000;
23. public static final int FADE_DURATION = 500;
25. private int amount, currentPage, position;
26. private Paint barPaint, highlightPaint;
27. private int fadeDelay, fadeDuration;
28. private float ovalRadius;
29. private Animation animFadeout;
30. /** RectF比Rect是精度上更精確。 */
31. private RectF rectFBody, rectFIndicator;
33. public SlidingIndicator(Context context, AttributeSet attrs, int defStyle) {
34. super(context, attrs, defStyle);
35. // 預設值。
36. int barColor = BAR_COLOR, highlightColor = HIGHLIGHT_COLOR;
37. fadeDelay = FADE_DELAY;
38. fadeDuration = FADE_DURATION;
39. if (attrs != null) {
40. TypedArray typedArr = context.obtainStyledAttributes(attrs, R.styleable.sliding_SlidingIndicator);
41. barColor = typedArr.getColor(R.styleable.sliding_SlidingIndicator_barColor, BAR_COLOR);
42. highlightColor = typedArr.getColor(R.styleable.sliding_SlidingIndicator_highlightColor, HIGHLIGHT_COLOR);
43. fadeDelay = typedArr.getInteger(R.styleable.sliding_SlidingIndicator_fadeDelay, FADE_DELAY);
44. fadeDuration = typedArr.getInteger(R.styleable.sliding_SlidingIndicator_fadeDuration, FADE_DURATION);
45. ovalRadius = typedArr.getDimension(R.styleable.sliding_SlidingIndicator_roundRectRadius, 0f);
46. typedArr.recycle();
47. }
48. initialization(barColor, highlightColor, fadeDuration);
49. }
51. public SlidingIndicator(Context context, AttributeSet attrs) {
52. this(context, attrs, 0);
53. }
55. public SlidingIndicator(Context context) {
56. super(context);
57. }
59. private void initialization(int barColor, int highlightColor, int fadeDuration) {
60. barPaint = new Paint();
61. barPaint.setColor(barColor);
63. highlightPaint = new Paint();
64. highlightPaint.setColor(highlightColor);
66. animFadeout = new AlphaAnimation(1f, 0f);
67. animFadeout.setDuration(fadeDuration);
68. animFadeout.setRepeatCount(0);
69. animFadeout.setInterpolator(new LinearInterpolator());
70. // 設置動畫結束後，本組件保持動畫結束時的最後狀態，即全透明不可見。
71. animFadeout.setFillEnabled(true);
72. animFadeout.setFillAfter(true);
74. rectFBody = new RectF();
75. rectFIndicator = new RectF();
76. }
78. public void setPageAmount(int num) {
79. if (num < 0) {
80. throw new IllegalArgumentException("num must be positive.");
81. }
82. amount = num;
83. invalidate();
84. fadeOut();
85. }
87. private void fadeOut() {
88. if (fadeDuration > 0) {
89. clearAnimation();
90. // 設置動畫的延時時間，此時間段內正好指示當前頁位置。
91. animFadeout.setStartTime(AnimationUtils.currentAnimationTimeMillis() + fadeDelay);
92. setAnimation(animFadeout);
93. }
94. }
96. public int getCurrentPage() {
97. return currentPage;
98. }
100. public void setCurrentPage(int idx) {
101. if (currentPage < 0 || currentPage >= amount) {
102. throw new IllegalArgumentException("currentPage parameter out of bounds");
103. }
104. if (this.currentPage != idx) {
105. this.currentPage = idx;
106. this.position = currentPage * getPageWidth();
107. invalidate();
108. fadeOut();
109. }
110. }
112. public void setPosition(int position) {
113. if (this.position != position) {
114. this.position = position;
115. invalidate();
116. fadeOut();
117. }
118. }
120. public int getPageWidth() {
121. return getWidth() / amount;
122. }
124. protected void onDraw(Canvas canvas) {
125. rectFBody.set(0, 0, getWidth(), getHeight());
126. canvas.drawRoundRect(rectFBody, ovalRadius, ovalRadius, barPaint);
127. rectFIndicator.set(position, 0, position + getPageWidth(), getHeight());
128. canvas.drawRoundRect(rectFIndicator, ovalRadius, ovalRadius, highlightPaint);
129. }
130. }