類似launcher案頭滑動效果

這個例子中涉及到了以下幾個知識點：
1) attrs.xml檔案的使用
2) GestureDetector.OnGestureListener監聽手勢
3) onLayout()、onMeasure()、onTouchEvent()的使用
接下來說一下我實現的思路：
1) 每個案頭就是一個大組件，水平的排列線上性布局檔案中，每個案頭適合螢幕一樣大小，所以要拓展LinearLayout，重寫其中的onMeasure()、onLayout()方法
2) 由於要實現隨手勢滑動，所以只要實現GestureDetector.OnGestureListener介面中的onDown()、onScroll()方法就可以
3) 由於要接收觸屏事件，所以要實現onTouchEvent()
接下來我們來看一下代碼吧：

1. public class ScrollLayout extends LinearLayout implements GestureDetector.OnGestureListener{
2.     private int offset;  //相對距離
3.     private GestureDetector gestureDetector;  //手勢事件
4.     private int childWidth; //子View的寬度
5.     private int childCount; //子視圖的數量
6.     private int defaultWindow; //預設視窗
8.     private boolean setShareWindowFlag=false;    // 保證預設視窗的設定只執行一次
10.     public ScrollLayout(Context context) {
11.         super(context);
12.         init();
13.     }
15.     public ScrollLayout(Context context, AttributeSet attrs) {
16.         super(context, attrs);
17.         init();
18.         //擷取定義的defaultWindow的值
19.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyScrollWindow);
20.         defaultWindow = typedArray.getInteger(R.styleable.MyScrollWindow_defaultWindow,0);
21.     }
23.     private void init(){
24.         gestureDetector = new GestureDetector(this.getContext(),this);
25.     }
27.     //傳回值為true 才能觸發 手勢事件
28.     public boolean onDown(MotionEvent e) {
29.         return true;
30.     }
32.     public void onShowPress(MotionEvent e) { }
34.     public boolean onSingleTapUp(MotionEvent e) {
35.         return false;  
36.     }
37.     //順手勢滑動
38.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
39.         //擷取滑動的距離
40.         offset = (int) (offset - distanceX);
41.         //防止滑出邊界
42.         if(offset>0){
43.             offset=0;
44.         }else if(offset < -1*childWidth*(childCount-1)){
45.             offset= -1*childWidth*(childCount-1);
46.         }
47.         //重繪布局
48.         requestLayout();
49.         return true;
50.     }
52.     public void onLongPress(MotionEvent e) {
53.         
54.     }
56.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
57.         return false;  
58.     }
60.     //設定布局檔案的寬高和每個案頭的寬高
61.     @Override
62.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
63.         super.onMeasure(widthMeasureSpec,heightMeasureSpec);
65.         //給每個案頭設定和螢幕相同的寬度和高度
66.         int childCount = getChildCount();
67.         for(int i=0;i<childCount;i++){
68.             getChildAt(i).measure(widthMeasureSpec,heightMeasureSpec);
69.         }
71.     }
73.     //設定布局
74.     @Override
75.     protected void onLayout(boolean changed, int l, int t, int r, int b) {
77.         childCount = getChildCount();   //擷取子視圖數
78.         childWidth = childCount > 0? getChildAt(0).getMeasuredWidth():0; //擷取位元組點的寬度
79.         if(!setShareWindowFlag&&defaultWindow>=0&&defaultWindow<=childCount-1){
80.             //設定預設視窗的左端距離
81.             offset = -1*defaultWindow*childWidth;
82.             setShareWindowFlag=true;
83.         }
84.         //設定距離(0,0)點X軸方向的初始距離
85.         int left = 0+offset;
86.         for (int i = 0; i < childCount ;  i ++){
87.             //設定每個子視圖在布局中的位置
88.             View child = getChildAt(i);
89.             if(child.getVisibility()!=View.GONE){
90.                 child.layout(left,0,childWidth+left,child.getMeasuredHeight());
91.                 left = left + childWidth;
92.             }
93.         }
94.     }
96.     //觸屏事件
97.     @Override
98.     public boolean onTouchEvent(MotionEvent event) {
99.        boolean result = gestureDetector.onTouchEvent(event);
100.        if(event.getAction()==MotionEvent.ACTION_UP){
101.            //當手指抬起來時 判斷滑動距離顯示整個子視圖
102.            showOneDesktop();
103.        }
104.        return result;
105.     }
107.     //判斷當手指抬起時顯示那個案頭
108.     private void showOneDesktop(){
109.        int index = Math.abs(offset)/childWidth;
110.        if(Math.abs(offset)-index*childWidth>childWidth/2){
111.            index++;
112.        }
113.        offset = offset > 0 ? index*childWidth : -1*index*childWidth;
114.        requestLayout();
115.     }
116. }

複製代碼

在這段代碼中使用到的attrs.xml檔案：

1. <resources>
2.         <declare-styleable name="MyScrollWindow">
3.             <attr name="defaultWindow" format="integer"/>
4.         </declare-styleable>
5. </resources>

複製代碼

可以和系統內建的布局檔案一樣使用

1. <?xml version="1.0" encoding="utf-8"?>
2. <com.wxg.scroll_window.view.ScrollLayout
3.         xmlns:android="http://schemas.android.com/apk/res/android"
4.         xmlns:demo="http://schemas.android.com/apk/res/com.wxg.scroll_window"
5.         android:id="@+id/testLayout"
6.         android:layout_width="fill_parent"
7.         android:layout_height="fill_parent"
8.         demo:defaultWindow="1"
9.         >
10.         <FrameLayout
11.             android:layout_height="fill_parent"
12.             android:layout_width="fill_parent"
13.             android:background="#cccccc">
15.             <Button
16.                     android:layout_height="wrap_content"
17.                     android:layout_width="wrap_content"
18.                     android:text="1"/>
19.             </FrameLayout>
20.         <FrameLayout
21.             android:layout_height="fill_parent"
22.             android:layout_width="fill_parent"
23.             android:background="#ffffff">
25.             <Button
26.                     android:layout_height="wrap_content"
27.                     android:layout_width="wrap_content"
28.                     android:text="2"/>
29.             </FrameLayout>
30.         <FrameLayout
31.             android:layout_height="fill_parent"
32.             android:layout_width="fill_parent"
33.             android:background="#bcbcbc">
35.             <Button
36.                     android:layout_height="wrap_content"
37.                     android:layout_width="wrap_content"
38.                     android:text="3"/>
39.             </FrameLayout>
42.         </com.wxg.scroll_window.view.ScrollLayout>