Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> 實戰Android仿人人客戶端之采用RelativeLayout做父容器實現左側滑動菜單（二）

實戰Android仿人人客戶端之采用RelativeLayout做父容器實現左側滑動菜單（二）

編輯：Android開發實例

        上一篇中，滑動式菜單的初步效果已實現，這篇繼續完善和優化。打個比方：就拿蓋房子來說，上一篇完成的只是毛胚房，這篇要做的就是對毛胚房進行精美裝修，之後才可以使用。好了，進入正題，假設ViewGroup中有兩個子View A和B，B處於A上面，兩個子View是疊在一起的。默認顯示的是B，並占據著整個手機屏幕，A是看不見的。為了能看見A，並且可以操作，我們需要把B視圖（子View）移動一定單位，當A、B均可見並都可以接受事件。此時B視圖可見部分就是手柄的寬度。

存在的問題：

       1、當長按B視圖的可見部分（手柄），會發現會觸發A視圖的事件，這顯然是不行的。用戶明明在B視圖上操作，響應的卻是A視圖中的子View。

       2、當在B視圖的可見部分（手柄）上，用手指向右滑動時，發現B是還可以向右滑動。

       3、當B視圖占據著整個手機屏幕時，在B視圖的任何區域水平滑動都可以讓B向右滑動，也就說觸控區域太大，會引起誤操作。

       4、手指水平滑動，響應很遲鈍，靈敏度問題。

解決辦法：

       添加觸摸事件分發處理回調方法dispatchTouchEvent(MotionEvent ev)，其返回值決定事件的分發給誰處理。當用戶手指在屏幕上按下後，閱讀下面代碼片段：

  1. case MotionEvent.ACTION_DOWN:  
  2.      Log.i(TAG, "dispatchTouchEvent():  ACTION_DOWN");  
  3.        
  4.      mFinished = mScroller.isFinished();  
  5.      if(mFinished){  
  6.          int x = (int) ev.getX();  
  7.          int width = getWidth();  
  8.            
  9.          if(mPanelInvisible)// 左側面板可見  
  10.          {  
  11.              if(x > (width - mHandlebarWidth)){ // 當前手指按下的坐標x值 ，是在手柄寬度范圍內  
  12.                  isClick = true;  
  13.                  mAllowScroll = true;  
  14.                  return true;  
  15.              } else {  
  16.                  isClick = false;  
  17.                  mAllowScroll = false;  
  18.              }  
  19.          } else { // 左側面板不可見  
  20.              if(x < mHandlebarWidth ){ // 當前手指按下的坐標x值 < 手柄寬度 （也就是說在手柄寬度范圍內，是可以相應用戶的向右滑動手勢）  
  21.                  mAllowScroll = true;  
  22.              }else{  
  23.                  mAllowScroll = false;  
  24.              }  
  25.          }  
  26.            
  27.      } else {  
  28.          // 當前正在滾動子View，其它的事不響應  
  29.          return false;  
  30.      }  
  31.        
  32. break;  

         當前手指按下的坐標x值 ，是在手柄寬度范圍內，改變標識值，返回true。表示onInterceptTouchEvent(MotionEvent ev)和onTouchEvent(MotionEvent event)中的MotionEvent.ACTION_DOWN事件不再處理。

       上一個Action down事件處理完後，接下來響應dispatchTouchEvent(MotionEvent ev)的MotionEvent.ACTION_MOVE，代碼如下：

 

  1. case MotionEvent.ACTION_MOVE:  
  2.           Log.i(TAG, "dispatchTouchEvent():  ACTION_MOVE");  
  3.           int margin = getWidth() - (int) ev.getX();  
  4.           if (margin < mHandlebarWidth && mAllowScroll) {  
  5.                 
  6.               Log.e(TAG, "dispatchTouchEvent ACTION_MOVE margin = " + margin + "\t mHandlebarWidth = " + mHandlebarWidth);  
  7.               return true;  
  8.           }  
  9.             
  10.           break;  

        在MotionEvent.ACTION_MOVE代碼塊中，發現條件是滿足的，返回true。表示和MotionEvent.ACTION_DOWN的一樣，在後續的回調方法內Action move將不再處理。最後看當手指抬起，處理的代碼如下：

  1. case MotionEvent.ACTION_UP:  
  2.           Log.i(TAG, "dispatchTouchEvent():  ACTION_UP");  
  3.             
  4.           if (isClick && mPanelInvisible && mAllowScroll) {  
  5.               isClick = false;  
  6.               mPanelInvisible = false;  
  7.                 
  8.               int scrollX = getChildAt(1).getScrollX();  
  9.               mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);  
  10.               invalidate();  
  11.                 
  12.               return true;  
  13.           }  
  14.             
  15.           break;  


      上面的代碼片段含義：當用戶手指在屏幕上按下，當前ViewGroup中沒有子View正在滾動，左側面板處於可見，手指按下的坐標X值是在手柄（B視圖的當前可見部分）的寬度范圍內，則down事件到此處理結束。在move代碼塊裡同樣判斷用戶當前手指按下的坐標X值是在手柄寬度范圍內的，則move事件也到此結束。在手指抬起後，up事件裡判斷在down是事件裡設置的標識，發現條件都滿足，響應用戶在手柄上的單擊事件請求。也就是說父View把用戶的請求已響應了，不用傳遞到子View。子View也不知道發生過這件事。（大概意思就是這樣）


        觸控區域太大的問題，每次都判斷用戶手指按下的坐標x值，是否在手柄寬度范圍內（不管左側面板是否可見）。靈敏度的問題，其實就是響應滾動子View的臨界值的大小問題，值越小靈敏都越高。

ScrollerContainer類，修改後的代碼如下：

 

  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.  *   
  15.  * @author android_ls  
  16.  */ 
  17. public class ScrollerContainer extends RelativeLayout {  
  18.  
  19.     private static final String TAG = "ScrollerContainer";  
  20.  
  21.     private Scroller mScroller;  
  22.  
  23.     private VelocityTracker mVelocityTracker;  
  24.  
  25.     /**  
  26.      * 手柄（手把）的寬度  
  27.      */ 
  28.     private int mHandlebarWidth;  
  29.  
  30.     /**  
  31.      * 在偏移過程中，動畫持續的時間  
  32.      */ 
  33.     private static final int ANIMATION_DURATION_TIME = 300;  
  34.       
  35.     /**  
  36.      * 記錄當前的滑動結束後的狀態，左側面板是否可見  
  37.      * true  向右滑動（左側面板處於可見）  
  38.      * false 向左滑動（左側面板處於不可見）  
  39.      */ 
  40.     private boolean mPanelInvisible;  
  41.       
  42.     /**  
  43.      * 是否已滑動結束  
  44.      */ 
  45.     private boolean mFinished;  
  46.       
  47.     /**  
  48.      * 是否允許滾動  
  49.      * 滿足的條件：  
  50.      *     左側面板可見，當前手指按下的坐標x值 ，是在手柄寬度范圍內；  
  51.      *     左側面板不可見，當前手指按下的坐標x值 < 手柄寬度  
  52.      */ 
  53.     private boolean mAllowScroll;  
  54.       
  55.     /**  
  56.      * 是否滿足響應單擊事件的條件  
  57.      * 滿足的條件：左側面板可見，當前手指按下的坐標x值 ，是在手柄寬度范圍內  
  58.      */ 
  59.     private boolean isClick;  
  60.       
  61.     public ScrollerContainer(Context context) {  
  62.         super(context);  
  63.  
  64.         mScroller = new Scroller(context);  
  65.         mHandlebarWidth = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 70, getResources().getDisplayMetrics());  
  66.     }  
  67.       
  68.     @Override 
  69.     public boolean dispatchTouchEvent(MotionEvent ev) {  
  70.         Log.e(TAG, "dispatchTouchEvent()");  
  71.           
  72.         switch (ev.getAction()) {  
  73.         case MotionEvent.ACTION_DOWN:  
  74.             Log.i(TAG, "dispatchTouchEvent():  ACTION_DOWN");  
  75.               
  76.             mFinished = mScroller.isFinished();  
  77.             if(mFinished){  
  78.                 int x = (int) ev.getX();  
  79.                 int width = getWidth();  
  80.                   
  81.                 if(mPanelInvisible)// 左側面板可見  
  82.                 {  
  83.                     if(x > (width - mHandlebarWidth)){ // 當前手指按下的坐標x值 ，是在手柄寬度范圍內  
  84.                         isClick = true;  
  85.                         mAllowScroll = true;  
  86.                         return true;  
  87.                     } else {  
  88.                         isClick = false;  
  89.                         mAllowScroll = false;  
  90.                     }  
  91.                 } else { // 左側面板不可見  
  92.                     if(x < mHandlebarWidth ){ // 當前手指按下的坐標x值 < 手柄寬度 （也就是說在手柄寬度范圍內，是可以相應用戶的向右滑動手勢）  
  93.                         mAllowScroll = true;  
  94.                     }else{  
  95.                         mAllowScroll = false;  
  96.                     }  
  97.                 }  
  98.                   
  99.             } else {  
  100.                 // 當前正在滾動子View，其它的事不響應  
  101.                 return false;  
  102.             }  
  103.               
  104.             break;  
  105.  
  106.         case MotionEvent.ACTION_MOVE:  
  107.             Log.i(TAG, "dispatchTouchEvent():  ACTION_MOVE");  
  108.             int margin = getWidth() - (int) ev.getX();  
  109.             if (margin < mHandlebarWidth && mAllowScroll) {  
  110.                   
  111.                 Log.e(TAG, "dispatchTouchEvent ACTION_MOVE margin = " + margin + "\t mHandlebarWidth = " + mHandlebarWidth);  
  112.                 return true;  
  113.             }  
  114.               
  115.             break;  
  116.         case MotionEvent.ACTION_UP:  
  117.             Log.i(TAG, "dispatchTouchEvent():  ACTION_UP");  
  118.               
  119.             if (isClick && mPanelInvisible && mAllowScroll) {  
  120.                 isClick = false;  
  121.                 mPanelInvisible = false;  
  122.                   
  123.                 int scrollX = getChildAt(1).getScrollX();  
  124.                 mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);  
  125.                 invalidate();  
  126.                   
  127.                 return true;  
  128.             }  
  129.               
  130.             break;  
  131.         case MotionEvent.ACTION_CANCEL:  
  132.             Log.i(TAG, "dispatchTouchEvent():  ACTION_CANCEL");  
  133.             break;  
  134.         default:  
  135.             break;  
  136.         }  
  137.           
  138.         return super.dispatchTouchEvent(ev);  
  139.     }  
  140.       
  141.     @Override 
  142.     public boolean onInterceptTouchEvent(MotionEvent ev) {  
  143.         Log.e(TAG, "onInterceptTouchEvent()");  
  144.           
  145.         switch (ev.getAction()) {  
  146.         case MotionEvent.ACTION_DOWN:  
  147.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_DOWN");  
  148.             mFinished = mScroller.isFinished();  
  149.             if(!mFinished){  
  150.                 return false;  
  151.             }  
  152.               
  153.             break;  
  154.         case MotionEvent.ACTION_MOVE:  
  155.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_MOVE");  
  156.               
  157.             mVelocityTracker = VelocityTracker.obtain();  
  158.             mVelocityTracker.addMovement(ev);  
  159.               
  160.             // 一秒時間內移動了多少個像素  
  161.             mVelocityTracker.computeCurrentVelocity(1000, ViewConfiguration.getMaximumFlingVelocity());  
  162.             float velocityValue = Math.abs(mVelocityTracker.getXVelocity()) ;  
  163.             Log.d(TAG, "onInterceptTouchEvent():  mVelocityValue = " + velocityValue);  
  164.               
  165.             if (velocityValue > 300 && mAllowScroll) {  
  166.                 return true;  
  167.             }  
  168.               
  169.             break;  
  170.         case MotionEvent.ACTION_UP:  
  171.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_UP");  
  172.               
  173.             if (mVelocityTracker != null) {  
  174.                 mVelocityTracker.recycle();  
  175.                 mVelocityTracker = null;  
  176.             }  
  177.               
  178.             break;  
  179.         case MotionEvent.ACTION_CANCEL:  
  180.             Log.i(TAG, "onInterceptTouchEvent():  ACTION_CANCEL");  
  181.             break;  
  182.         default:  
  183.             break;  
  184.         }  
  185.           
  186.         return super.onInterceptTouchEvent(ev);  
  187.     }  
  188.  
  189.     @Override 
  190.     public boolean onTouchEvent(MotionEvent event) {  
  191.         Log.e(TAG, "onTouchEvent()");  
  192.  
  193.         float x = event.getX();  
  194.           
  195.         switch (event.getAction()) {  
  196.         case MotionEvent.ACTION_DOWN:  
  197.             Log.i(TAG, "onTouchEvent():  ACTION_DOWN");  
  198.             mFinished = mScroller.isFinished();  
  199.             if(!mFinished){  
  200.                 return false;  
  201.             }  
  202.             break;  
  203.  
  204.         case MotionEvent.ACTION_MOVE:  
  205.             Log.i(TAG, "onTouchEvent():  ACTION_MOVE");  
  206.             getChildAt(1).scrollTo(-(int)x, 0);  
  207.             break;  
  208.  
  209.         case MotionEvent.ACTION_UP:  
  210.             Log.i(TAG, "onTouchEvent():  ACTION_UP");  
  211.               
  212.             if(!mAllowScroll){  
  213.                 break;  
  214.             }  
  215.               
  216.            float width = getWidth();  
  217.            // 響應滾動子View的臨界值，若覺得響應過於靈敏，可以將只改大些。  
  218.            // 比如：criticalWidth = width / 3或criticalWidth = width / 2，看情況而定，呵呵。  
  219.            float criticalWidth = width / 5;  
  220.              
  221.            Log.i(TAG, "onTouchEvent():  ACTION_UP x = " + x + "\t criticalWidth = " + criticalWidth);  
  222.              
  223.            int scrollX = getChildAt(1).getScrollX();  
  224.              
  225.            if ( x < criticalWidth) {  
  226.                Log.i(TAG, "onTouchEvent():  ACTION_UP 向左滑動");  
  227.                  
  228.                 mPanelInvisible = false;  
  229.                  
  230.                 mScroller.startScroll(scrollX, 0, -scrollX, 0, ANIMATION_DURATION_TIME);  
  231.                 invalidate();  
  232.             } else if ( x > criticalWidth){  
  233.                 Log.i(TAG, "onTouchEvent():  ACTION_UP 向右滑動");  
  234.                 
  235.                 mPanelInvisible = true;  
  236.                   
  237.                 int toX = (int)(width - Math.abs(scrollX) - mHandlebarWidth);  
  238.                 mScroller.startScroll(scrollX, 0, -toX, 0, ANIMATION_DURATION_TIME);  
  239.                 invalidate();  
  240.             }  
  241.               
  242.             break;  
  243.         case MotionEvent.ACTION_CANCEL:  
  244.             Log.i(TAG, "onTouchEvent():  ACTION_CANCEL");  
  245.             break;  
  246.         default:  
  247.             break;  
  248.         }  
  249.           
  250.         return super.onTouchEvent(event);  
  251.     }  
  252.  
  253.     @Override 
  254.     public void computeScroll() {  
  255.         // super.computeScroll();  
  256.           
  257.         if(mScroller.computeScrollOffset()){  
  258.             this.getChildAt(1).scrollTo(mScroller.getCurrX(), mScroller.getCurrY());  
  259.             this.postInvalidate();  
  260.         }  
  261.     }  
  262.  
  263.     /**  
  264.      * 向右滑動View，讓左側操作面飯可見  
  265.      */ 
  266.     public void slideToRight() {  
  267.         mFinished = mScroller.isFinished();  
  268.         if(mFinished && !mPanelInvisible){  
  269.             mPanelInvisible = true;  
  270.               
  271.             float width = getWidth();  
  272.             int scrollX = getChildAt(1).getScrollX();  
  273.             int toX = (int)(width - Math.abs(scrollX) - mHandlebarWidth);  
  274.               
  275.             mScroller.startScroll(scrollX, 0, -toX, 0, ANIMATION_DURATION_TIME);  
  276.             invalidate();  
  277.         }  
  278.     }  
  279.       
  280.     /**  
  281.      * View滑動事件監聽器  
  282.      * @author android_ls  
  283.      */ 
  284.     public interface OnSlideListener {  
  285.         /**  
  286.          * 向左滑動子View  
  287.          */ 
  288.         public abstract void toLeft();  
  289.           
  290.         /**  
  291.          * 向右滑動子View  
  292.          */ 
  293.         public abstract void toRight();  
  294.     }  
  295.       
  296. }  
  297.  

主應用界面源碼：

  1. package com.everyone.android.ui;  
  2.  
  3. import android.os.Bundle;  
  4. import android.view.ViewGroup.LayoutParams;  
  5.  
  6. import com.everyone.android.AppBaseActivity;  
  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. /**  
  13.  * 功能描述：應用主界面  
  14.  * @author android_ls  
  15.  *  
  16.  */ 
  17. public class EveryoneActivity extends AppBaseActivity implements OnSlideListener {  
  18.  
  19.     /**  
  20.      * 滾動（滑動）容器  
  21.      */ 
  22.     private ScrollerContainer mSlideContainer;  
  23.  
  24.     /**  
  25.      * 左側面板  
  26.      */ 
  27.     private LeftPanelLayout mLeftPanelLayout;  
  28.  
  29.     /**  
  30.      * 新鮮事  
  31.      */ 
  32.     private FreshNewsLayout mFreshNewsLayout;  
  33.  
  34.     @Override 
  35.     public void onCreate(Bundle savedInstanceState) {  
  36.         super.onCreate(savedInstanceState);  
  37.         setContentView(mSlideContainer);  
  38.  
  39.     }  
  40.  
  41.     @Override 
  42.     protected int getLayoutId() {  
  43.         return 0;  
  44.     }  
  45.  
  46.     @Override 
  47.     protected void setupView() {  
  48.         mSlideContainer = new ScrollerContainer(mContext);  
  49.  
  50.         mLeftPanelLayout = new LeftPanelLayout(mContext);  
  51.         mFreshNewsLayout = new FreshNewsLayout(mContext);  
  52.         mFreshNewsLayout.setOnSlideListener(this);  
  53.  
  54.         LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);  
  55.         mSlideContainer.addView(mLeftPanelLayout, layoutParams);  
  56.         mSlideContainer.addView(mFreshNewsLayout, layoutParams);  
  57.  
  58.     }  
  59.  
  60.     @Override 
  61.     protected void initialized() {  
  62.         // TODO Auto-generated method stub  
  63.  
  64.     }  
  65.  
  66.     @Override 
  67.     public void toLeft() {  
  68.         // TODO Auto-generated method stub  
  69.  
  70.     }  
  71.  
  72.     @Override 
  73.     public void toRight() {  
  74.         mSlideContainer.slideToRight();  
  75.     }  
  76.  
  77. }  

AppBaseActivity類的修改部分，在onCreate裡添加的處理：

  1. int layoutId = getLayoutId();  
  2. if(layoutId != 0){  
  3.     setContentView(getLayoutId());  
  4. }  

有關滑動菜單的到這裡就完了，後面在使用過程中遇到什麼問題，再處理。

看下效果圖，還和上一篇一樣，靜態的圖片看不出來優化後的效果，不過還是上傳幾張，有圖有真相。

 

向右滑動或點擊頂部箭頭後

 

 

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

  1. 上一頁:
  2. 下一頁:
Android開發實例
Android編程入門Android技術基礎Android資訊關於Android編程Android開發Android開發環境Android開發實例
相關文章
熱門文章
Android中文API(116)——TableLayout Android 簡單的錄音機 Android中文API（127） —— MessageQueue Android多媒體學習十三：檢索MediaStore中的Video和其對應的縮略圖信息 Android應用中使用Fragment組件的一些問題及解決方案總結 Android加載Spinner
Android MediaPlayer(多媒體播放)

Android提供了許多方法來控制播放的音頻/視頻文件和流。其中該方法是
Android TabWidget切換卡的實現應用

TabWidget類似於Android 中查看電話薄的界面，通過
Android加載Spinner

可以顯示在的Android任務，通過加載進度條的進展。進度條有兩種形狀。
Android示例程序剖析之記事本（一）

    &nb
閱讀排行版
Copyright © Android教程網 All Rights Reserved