Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> 實戰Android仿人人客戶端之采用RelativeLayout做父容器實現左側滑動菜單(一)

實戰Android仿人人客戶端之采用RelativeLayout做父容器實現左側滑動菜單(一)

編輯:Android開發實例

一、滑動效果的實現原理:

      1、采用RelativeLayout作為父容器, 當調用addView(View child)方法向其中添加子View(子View采用FrameLayout),並且其子View的布局參數都設置的是填充整個父容器的大小(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT))。那麼父容器中當前顯示的應該是最後添加的View。

      2、 要實現子View可以在父容器中滑動,那麼我們就得重寫父容器的onInterceptTouchEvent(MotionEvent ev)和onTouchEvent(MotionEvent event)方法,攔截用戶觸屏手勢並作出判斷和事件處理。比如,當前用戶的某個(單擊、向左滑動和向右滑動等)觸屏事件,是否需要響應,若要響應,是父容器自己去處理呢,還是應該交給父容器裡的某個子View去處理。

      3、要做到第2小點中提到的,必須先了解ViewGrop的onInterceptTouchEvent(MotionEvent ev)和onTouchEvent(MotionEvent event)回調方法,在整個View樹(應用框架)中的調用先後順序及其返回值所代表的含義。下面做個小測試,前提:ViewGroup(父容器中的一個子View)有子View,並且子View中的View有事件處理器(比如,子View是Button,事件處理器指的就是Button的點擊事件監聽器中的onClick(View v)方法)或者子View可以獲得焦點(比如選中效果)。

      自定義類繼承RelativeLayout類,如下:

  1. public class ParentContainer extends RelativeLayout {  
  2.  
  3.     private static final String TAG = "ParentContainer";  
  4.  
  5.     public ParentContainer(Context context) {  
  6.         super(context);  
  7.     }  
  8.  
  9.     @Override 
  10.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  11.         Log.e(TAG, "ParentContainer : onInterceptTouchEvent()");  
  12.  
  13.         return super.onInterceptTouchEvent(ev);  
  14.     }  
  15.  
  16.     @Override 
  17.     public boolean onTouchEvent(MotionEvent event) {  
  18.         Log.e(TAG, "ParentContainer : onTouchEvent()");  
  19.  
  20.         return super.onTouchEvent(event);  
  21.     }  
  22.  
  23. }  

        其子View代碼如下:

  1. public class ChildContainer extends FrameLayout {  
  2.  
  3.     private static final String TAG = "ChildContainer";  
  4.  
  5.     public ChildContainer(Context context) {  
  6.         super(context);  
  7.  
  8.         Button btnTest = new Button(context);  
  9.         btnTest.setText("測試按鈕");  
  10.         btnTest.setOnClickListener(new View.OnClickListener() {  
  11.  
  12.             @Override 
  13.             public void onClick(View v) {  
  14.                 Log.i(TAG, "ChildContainer : 我響應了單擊事件");  
  15.             }  
  16.         });  
  17.  
  18.         LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);  
  19.         this.addView(btnTest, params);  
  20.     }  
  21.  
  22.     @Override 
  23.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  24.         Log.i(TAG, "ChildContainer : onInterceptTouchEvent()");  
  25.  
  26.         return super.onInterceptTouchEvent(ev);  
  27.     }  
  28.  
  29.     @Override 
  30.     public boolean onTouchEvent(MotionEvent event) {  
  31.         Log.i(TAG, "ChildContainer : onTouchEvent()");  
  32.  
  33.         return super.onTouchEvent(event);  
  34.     }  
  35.  
  36. }  

     測試Activity代碼:

  1. public class TestActivity extends Activity {  
  2.       
  3.     @Override 
  4.     public void onCreate(Bundle savedInstanceState) {  
  5.         super.onCreate(savedInstanceState);  
  6.           
  7.         ParentContainer mSlideContainer = new ParentContainer(this);  
  8.           
  9.         ChildContainer childContainer = new ChildContainer(this);  
  10.         LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
  11.         mSlideContainer.addView(childContainer, params);  
  12.           
  13.         setContentView(mSlideContainer);  
  14.     }  
  15.       
  16. }  

     a. 默認情況下,單擊子View中的Button按鈕,LogCat打印Log如下:

        修改父容器的onInterceptTouchEvent()返回值為false,單擊子View的按鈕,打印Log與默認值一樣。跟蹤源碼發現其實默認返回值就是false。修改返回值為true,單擊子View的按鈕,LogCat打印Log如下:

       結論:父容器中onInterceptTouchEvent()方法的返回值為true時,表示將事件交給ViewGroup自己的onTouchEvent()去處理;返回值為false時,表示將事件交給ViewGroup的子View的onInterceptTouchEvent()去處理。(默認的處理方式)
      b. 父容器使用默認的值,修改子View的onTouchEvent()方法返回值為false,單擊子View,LogCat打印Log如下:

          修改子View的onTouchEvent()方法返回值為true,單擊子View,LogCat打印Log如下:

      結論:父容器使用默認的值,修改子View的onTouchEvent()方法返回值為false,表示將事件交父View處理;修改子View的onTouchEvent()方法返回值為true,表示該事件子View自己已經處理了,到這裡終止。
         4、在父容器中,攔截用戶觸屏手勢後,想交給父容器自己去處理,或者是想交給父容器裡的某個子View去處理,應該怎麼實現,通過上面的講解,我想大家已經明白了,決定事件的傳遞順序或在那個View裡終止傳遞,是通過ViewGroup中的onInterceptTouchEvent(MotionEvent ev)和onTouchEvent(MotionEvent event)方法的返回值來決定的。接下來開始聊如何實現父容器中的子View的左右滑動(滾動),這裡就用到了Scroller和VelocityTracker兩個類。

       a. 為什麼要用Scroller類? 如果實現想把一個View偏移至指定坐標(x,y)處,利用View類提供的scrollTo()方法直接調用就可以了。但是View類的scrollTo()方法是非常迅速的將View從一個坐標點(20, 0)移到另一個坐標點(300, 0),而沒有對這個偏移過程有任何控制,對用戶而言這件事發生的很突然,用戶體驗不好。而Scroller類提供的startScroll()方法,在偏移過程中添加了動畫,提升了用戶體驗。因此我們選擇使用Scroller類的對象來實現View的偏移。

       b. VelocityTracker類,主要用跟蹤觸摸屏事件(flinging事件和其他gestures手勢事件)的速率。  用addMovement(MotionEvent)函數將Motion event加入到VelocityTracker類實例中。你可以使用getXVelocity() 或getXVelocity()獲得橫向和豎向的速率到速率時,但是使用它們之前請先調用computeCurrentVelocity(int)來初始化速率的單位 。

       關於computeCurrentVelocity(int units, float maxVelocity) 方法的參數列表解釋:

       int  unitis表示速率的基本時間單位。unitis值為1的表示是,一毫秒時間單位內運動了多少個像素, unitis值為1000表示一秒(1000毫秒)時間單位內運動了多少個像素。

       float  maxVelocity表示速率的最大值。

二、按上面的講解思路編碼實現:

       1、滑動方式實現:

                 只在父容器的onInterceptTouchEvent(MotionEvent ev)和onTouchEvent(MotionEvent event)方法中,添加MotionEvent.ACTION_MOVE的事件處理。
          父容器類代碼如下:

  1. package com.everyone.android.widget;  
  2.  
  3. import android.content.Context;  
  4. import android.util.Log;  
  5. import android.util.TypedValue;  
  6. import android.view.MotionEvent;  
  7. import android.view.VelocityTracker;  
  8. import android.view.ViewConfiguration;  
  9. import android.widget.RelativeLayout;  
  10. import android.widget.Scroller;  
  11.  
  12. /**  
  13.  * 功能描述:手指在屏幕上左右滑動時,該類的實例負責其的子View的左右偏移(滾動)  
  14.  * @author android_ls  
  15.  */ 
  16. public class ScrollerContainer extends RelativeLayout {  
  17.  
  18.     private static final String TAG = "ScrollerContainer";  
  19.  
  20.     private Scroller mScroller;  
  21.  
  22.     private VelocityTracker mVelocityTracker;  
  23.  
  24.     /**  
  25.      * 手柄(手把)的寬度  
  26.      */ 
  27.     private int mHandlebarWidth;  
  28.  
  29.     /**  
  30.      * 一秒時間內移動了多少個像素  
  31.      */ 
  32.     private float mVelocityValue;  
  33.       
  34.     /**  
  35.      * 在偏移過程中,動畫持續的時間  
  36.      */ 
  37.     private static final int ANIMATION_DURATION_TIME = 300;  
  38.       
  39.     public ScrollerContainer(Context context) {  
  40.         super(context);  
  41.  
  42.         mScroller = new Scroller(context);  
  43.         mHandlebarWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 70, getResources().getDisplayMetrics());  
  44.     }  
  45.  
  46.     @Override 
  47.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  48.         Log.e(TAG, "ParentContainer : onInterceptTouchEvent()");  
  49.  
  50.         mVelocityTracker = VelocityTracker.obtain();  
  51.         mVelocityTracker.addMovement(ev);  
  52.           
  53.         switch (ev.getAction()) {  
  54.         case MotionEvent.ACTION_DOWN:  
  55.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_DOWN");  
  56.               
  57.             break;  
  58.  
  59.         case MotionEvent.ACTION_MOVE:  
  60.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_MOVE");  
  61.               
  62.             mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity());  
  63.             mVelocityValue = Math.abs(mVelocityTracker.getXVelocity()) ;  
  64.             Log.d(TAG, "onInterceptTouchEvent():  mVelocityValue = " + mVelocityValue);  
  65.               
  66.             if (mVelocityValue > 300) {  
  67.                 return true;  
  68.             }  
  69.               
  70.             break;  
  71.  
  72.         case MotionEvent.ACTION_UP:  
  73.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_UP");  
  74.             break;  
  75.         case MotionEvent.ACTION_CANCEL:  
  76.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_CANCEL");  
  77.             break;  
  78.         default:  
  79.             break;  
  80.         }  
  81.           
  82.         return super.onInterceptTouchEvent(ev);  
  83.     }  
  84.  
  85.     @Override 
  86.     public boolean onTouchEvent(MotionEvent event) {  
  87.         Log.e(TAG, "ParentContainer : onTouchEvent()");  
  88.  
  89.         float x = event.getX();  
  90.           
  91.         switch (event.getAction()) {  
  92.         case MotionEvent.ACTION_DOWN:  
  93.             Log.i(TAG, "onTouchEvent():  ACTION_DOWN");  
  94.               
  95.             break;  
  96.  
  97.         case MotionEvent.ACTION_MOVE:  
  98.             Log.i(TAG, "onTouchEvent():  ACTION_MOVE");  
  99.               
  100.             getChildAt(1).scrollTo(-(int)x, 0);  
  101.             break;  
  102.  
  103.         case MotionEvent.ACTION_UP:  
  104.             Log.i(TAG, "onTouchEvent():  ACTION_UP");  
  105.               
  106.            
  107.            float width = getWidth();  
  108.            float halfWidth = width / 2;  
  109.              
  110.            Log.i(TAG, "onTouchEvent():  ACTION_UP x = " + x + "\t halfWidth = " + halfWidth);  
  111.              
  112.            int scrollX = getChildAt(1).getScrollX();  
  113.              
  114.            if ( x < halfWidth) {  
  115.                Log.i(TAG, "onTouchEvent():  ACTION_UP 向左滑動");  
  116.                  
  117.                 mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);  
  118.                 invalidate();  
  119.             } else if ( x > halfWidth){  
  120.                 Log.i(TAG, "onTouchEvent():  ACTION_UP 向右滑動");  
  121.                 
  122.                 int toX = (int)(width - Math.abs(scrollX) - mHandlebarWidth);  
  123.                 mScroller.startScroll(scrollX, 0, -toX, 0, ANIMATION_DURATION_TIME);  
  124.                 invalidate();  
  125.             }  
  126.               
  127.             break;  
  128.         case MotionEvent.ACTION_CANCEL:  
  129.             Log.i(TAG, "onTouchEvent():  ACTION_CANCEL");  
  130.             break;  
  131.         default:  
  132.             break;  
  133.         }  
  134.           
  135.         return super.onTouchEvent(event);  
  136.     }  
  137.  
  138.     @Override 
  139.     public void computeScroll() {  
  140.         // super.computeScroll();  
  141.           
  142.         if(mScroller.computeScrollOffset()){  
  143.             this.getChildAt(1).scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
  144.             this.postInvalidate();  
  145.         }  
  146.     }  
  147.  
  148. }  
  149.  

         子容器就是兩個繼承自FrameLayout的Layout,源碼就不貼了。

        測試類代碼如下:

  1. package com.everyone.android.ui;  
  2.  
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.ViewGroup.LayoutParams;  
  6.  
  7. import com.everyone.android.widget.FreshNewsLayout;  
  8. import com.everyone.android.widget.LeftPanelLayout;  
  9. import com.everyone.android.widget.ScrollerContainer;  
  10.  
  11. public class TestActivity extends Activity {  
  12.  
  13.     /**  
  14.      * 左側面板  
  15.      */ 
  16.     private LeftPanelLayout mLeftPanelLayout;  
  17.  
  18.     /**  
  19.      * 新鮮事  
  20.      */ 
  21.     private FreshNewsLayout mFreshNewsLayout;  
  22.  
  23.     @Override 
  24.     public void onCreate(Bundle savedInstanceState) {  
  25.         super.onCreate(savedInstanceState);  
  26.  
  27.         ScrollerContainer mSlideContainer = new ScrollerContainer(this);  
  28.         LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
  29.  
  30.         mLeftPanelLayout = new LeftPanelLayout(this.getApplicationContext());  
  31.         mFreshNewsLayout = new FreshNewsLayout(this.getApplicationContext());  
  32.  
  33.         mSlideContainer.addView(mLeftPanelLayout, params);  
  34.         mSlideContainer.addView(mFreshNewsLayout, params);  
  35.  
  36.         setContentView(mSlideContainer);  
  37.     }  
  38.  
  39. }  

         運行效果圖如下:

        2、單擊方式實現:

       左右滑動實現子View的滾動,有一個臨界值,一秒時間內移動了的像素數要大於某個預設的值,才會觸動相應事件處理器。那麼為了用戶體驗好點,我們提供另外一種操作方式,那就是單擊事件。假設ViewGroup中有兩個子View A和B,B處於A上面,兩個子View是疊在一起的。默認顯示的是B,並占據著整個手機屏幕,A是看不見的。為了能看見A,並且可以操作,我們需要把B視圖(子View)移動一定單位,可以在B視圖中添加子View(Button)並綁定事件監聽器。當用戶點擊B視圖中的特定子View(Button)時,讓B視圖偏移一定單位,我麼就能看見A視圖;當B處於A上並偏移了一定的單位,這時單擊B,實現B視圖移動到回去(恢復默認顯示)。

       a. 單擊B,實現B視圖移動到回去(恢復默認顯示),代碼如下:

  1. @Override 
  2. public boolean onInterceptTouchEvent(MotionEvent ev) {  
  3.     Log.e(TAG, "ParentContainer : onInterceptTouchEvent()");  
  4.  
  5.     mVelocityTracker = VelocityTracker.obtain();  
  6.     mVelocityTracker.addMovement(ev);  
  7.       
  8.     switch (ev.getAction()) {  
  9.     case MotionEvent.ACTION_DOWN:  
  10.         Log.i(TAG, "onInterceptTouchEvent():  ACTION_DOWN");  
  11.           
  12.         int x = (int) ev.getX();  
  13.         int width = getWidth();  
  14.         if(x >= (width - mHandlebarWidth)){  
  15.             isClick = true;  
  16.         }  
  17.           
  18.         break;  
  19.  
  20.     case MotionEvent.ACTION_MOVE:  
  21.         Log.i(TAG, "onInterceptTouchEvent():  ACTION_MOVE");  
  22.           
  23.         mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity());  
  24.         mVelocityValue = Math.abs(mVelocityTracker.getXVelocity()) ;  
  25.         Log.d(TAG, "onInterceptTouchEvent():  mVelocityValue = " + mVelocityValue);  
  26.           
  27.         if (mVelocityValue > 300) {  
  28.             return true;  
  29.         }  
  30.           
  31.         break;  
  32.  
  33.     case MotionEvent.ACTION_UP:  
  34.         Log.i(TAG, "onInterceptTouchEvent():  ACTION_UP");  
  35.           
  36.         if (isClick) {  
  37.             isClick = false;  
  38.              int scrollX = getChildAt(1).getScrollX();  
  39.              mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);                                                        invalidate();  
  40.         }  
  41.           
  42.         break;  
  43.     case MotionEvent.ACTION_CANCEL:  
  44.         Log.i(TAG, "onInterceptTouchEvent():  ACTION_CANCEL");  
  45.         break;  
  46.     default:  
  47.         break;  
  48.     }  
  49.       
  50.     return super.onInterceptTouchEvent(ev);  
  51. }  


         b. 當用戶點擊B視圖中的特定子View(Button)時,讓B視圖偏移一定單位。在父容器中添加滑動事件監聽器和向右滑動的實現,代碼如下:

  1. /**  
  2.    * 向右滑動View,讓左側操作面飯可見  
  3.    */ 
  4.   public void slideToRight() {  
  5.       float width = getWidth();  
  6.       int scrollX = getChildAt(1).getScrollX();  
  7.       int toX = (int)(width - Math.abs(scrollX) - mHandlebarWidth);  
  8.       mScroller.startScroll(scrollX, 0, -toX, 0, ANIMATION_DURATION_TIME);  
  9.       invalidate();  
  10.   }  
  11.     
  12.   /**  
  13.    * View滑動事件監聽器  
  14.    * @author android_ls  
  15.    */ 
  16.   public interface OnSlideListener {  
  17.       /**  
  18.        * 向做滑動View  
  19.        */ 
  20.       public abstract void toLeft();  
  21.         
  22.       /**  
  23.        * 向右滑動View  
  24.        */ 
  25.       public abstract void toRight();  
  26.   }  

         子視圖FreshNewsLayout的源碼:

  1. package com.everyone.android.widget;  
  2.  
  3. import android.content.Context;  
  4. import android.util.AttributeSet;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.widget.FrameLayout;  
  8. import android.widget.LinearLayout;  
  9.  
  10. import com.everyone.android.R;  
  11. import com.everyone.android.widget.ScrollerContainer.OnSlideListener;  
  12.  
  13. /**  
  14.  * 功能描述:新鮮事視圖  
  15.  * @author android_ls  
  16.  */ 
  17. public class FreshNewsLayout extends FrameLayout {  
  18.  
  19.     public LinearLayout llBack;  
  20.       
  21.     private OnSlideListener mOnSlideListener;  
  22.       
  23.     public FreshNewsLayout(Context context) {  
  24.         super(context);  
  25.         setupViews();  
  26.     }  
  27.  
  28.     public FreshNewsLayout(Context context, AttributeSet attrs) {  
  29.         super(context, attrs);  
  30.         setupViews();  
  31.     }  
  32.  
  33.     public void setOnSlideListener(OnSlideListener onSlideListener) {  
  34.         mOnSlideListener = onSlideListener;  
  35.     }  
  36.       
  37.     private void setupViews() {  
  38.         final LayoutInflater mLayoutInflater = LayoutInflater.from(getContext());  
  39.         LinearLayout rlTopNavbar = (LinearLayout) mLayoutInflater.inflate(R.layout.fresh_news, null);  
  40.         addView(rlTopNavbar);  
  41.  
  42.         llBack = (LinearLayout) rlTopNavbar.findViewById(R.id.ll_back);  
  43.         llBack.setOnClickListener(new OnClickListener() {  
  44.  
  45.             public void onClick(View v) {  
  46.                 if (mOnSlideListener != null) {  
  47.                     mOnSlideListener.toRight();  
  48.                 }  
  49.             }  
  50.         });  
  51.           
  52.     }  
  53.  
  54. }  
  55.  

         測試類代碼如下:

  1. package com.everyone.android.ui;  
  2.  
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.ViewGroup.LayoutParams;  
  6.  
  7. import com.everyone.android.widget.FreshNewsLayout;  
  8. import com.everyone.android.widget.LeftPanelLayout;  
  9. import com.everyone.android.widget.ScrollerContainer;  
  10. import com.everyone.android.widget.ScrollerContainer.OnSlideListener;  
  11.  
  12. public class TestActivity extends Activity implements OnSlideListener {  
  13.  
  14.     /**  
  15.      * 左側面板  
  16.      */ 
  17.     private LeftPanelLayout mLeftPanelLayout;  
  18.  
  19.     /**  
  20.      * 新鮮事  
  21.      */ 
  22.     private FreshNewsLayout mFreshNewsLayout;  
  23.  
  24.     /**  
  25.      * 滾動(滑動)容器  
  26.      */ 
  27.     private ScrollerContainer mSlideContainer;  
  28.  
  29.     @Override 
  30.     public void onCreate(Bundle savedInstanceState) {  
  31.         super.onCreate(savedInstanceState);  
  32.  
  33.         mSlideContainer = new ScrollerContainer(this);  
  34.         LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
  35.  
  36.         mLeftPanelLayout = new LeftPanelLayout(this.getApplicationContext());  
  37.         mFreshNewsLayout = new FreshNewsLayout(this.getApplicationContext());  
  38.         mFreshNewsLayout.setOnSlideListener(this);  
  39.  
  40.         mSlideContainer.addView(mLeftPanelLayout, params);  
  41.         mSlideContainer.addView(mFreshNewsLayout, params);  
  42.  
  43.         setContentView(mSlideContainer);  
  44.     }  
  45.  
  46.     @Override 
  47.     public void toLeft() {  
  48.         // TODO Auto-generated method stub  
  49.  
  50.     }  
  51.  
  52.     @Override 
  53.     public void toRight() {  
  54.         mSlideContainer.slideToRight();  
  55.     }  
  56.  
  57. }  


轉自:http://blog.csdn.net/android_ls/article/details/8756059

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved