Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發實例 >> Android簡單實現仿人人客戶端側滑效果

Android簡單實現仿人人客戶端側滑效果

編輯:Android開發實例

人人客戶端有一個特效還是挺吸引人的,在主界面手指向右滑動,就可以將菜單展示出來,而主界面會被隱藏大部分,但是仍有左側的一小部分同菜單一起展示。

據說人人客戶端的這個特效是從facebook客戶端模仿來的,至於facebook是不是又從其它地方模仿來的就不得而知了。好,今天我們就一起來實現這個效果,總之我第一次看到這個特效是在人人客戶端看到的,我也就主觀性地認為我是在模仿人人客戶端的特效了。

雖然現在網上類似這種效果的實現也非常多,可是我發現實現方案大都非常復雜,並不容易理解。但其實這種效果並不難實現,因此我今天給大家帶來的也是史上最簡單的滑動菜單實現方案。

首先還是講一下實現原理。在一個Activity的布局中需要有兩部分,一個是菜單(menu)的布局,一個是內容(content)的布局。兩個布局橫向排列,菜單布局在左,內容布局在右。初始化的時候將菜單布局向左偏移,以至於能夠完全隱藏,這樣內容布局就會完全顯示在Activity中。然後通過監聽手指滑動事件,來改變菜單布局的左偏移距離,從而控制菜單布局的顯示和隱藏。原理圖如下:


 

將菜單布局的左偏移值改成0時,效果圖如下:

好,我們開始用代碼來實現。首先在Eclipse中新建一個Android項目,項目名就叫做RenRenSlideMenuDemo。然後寫一下布局文件,創建或打開layout目錄下的activity_main.xml文件,加入如下代碼:

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     xmlns:tools="http://schemas.android.com/tools" 
  3.     android:layout_width="fill_parent" 
  4.     android:layout_height="fill_parent" 
  5.     android:orientation="horizontal" 
  6.     tools:context=".MainActivity" > 
  7.  
  8.     <LinearLayout 
  9.         android:id="@+id/menu" 
  10.         android:layout_width="fill_parent" 
  11.         android:layout_height="fill_parent" 
  12.         android:background="@drawable/menu" > 
  13.     </LinearLayout> 
  14.  
  15.     <LinearLayout 
  16.         android:id="@+id/content" 
  17.         android:layout_width="fill_parent" 
  18.         android:layout_height="fill_parent" 
  19.         android:background="@drawable/content" > 
  20.     </LinearLayout> 
  21.  
  22. </LinearLayout> 

這個布局文件的最外層布局是一個LinearLayout,排列方向是水平方向排列。這個LinearLayout下面嵌套了兩個子LinearLayout,分別就是菜單的布局和內容的布局。這裡為了要讓布局盡量簡單,菜單布局和內容布局裡面沒有加入任何控件,只是給這兩個布局各添加了一張背景圖片,這兩張背景圖片是我從人人客戶端上截下來的圖。這樣我們可以把注意力都集中在如何實現滑動菜單的效果上面,不用關心裡面各種復雜的布局了。

創建或打開MainActivity,這個類仍然是程序的主Activity,也是這次demo唯一的Activity,在裡面加入如下代碼:

  1. public class MainActivity extends Activity implements OnTouchListener {  
  2.  
  3.     /**  
  4.      * 滾動顯示和隱藏menu時,手指滑動需要達到的速度。  
  5.      */ 
  6.     public static final int SNAP_VELOCITY = 200;  
  7.  
  8.     /**  
  9.      * 屏幕寬度值。  
  10.      */ 
  11.     private int screenWidth;  
  12.  
  13.     /**  
  14.      * menu最多可以滑動到的左邊緣。值由menu布局的寬度來定,marginLeft到達此值之後,不能再減少。  
  15.      */ 
  16.     private int leftEdge;  
  17.  
  18.     /**  
  19.      * menu最多可以滑動到的右邊緣。值恆為0,即marginLeft到達0之後,不能增加。  
  20.      */ 
  21.     private int rightEdge = 0;  
  22.  
  23.     /**  
  24.      * menu完全顯示時,留給content的寬度值。  
  25.      */ 
  26.     private int menuPadding = 80;  
  27.  
  28.     /**  
  29.      * 主內容的布局。  
  30.      */ 
  31.     private View content;  
  32.  
  33.     /**  
  34.      * menu的布局。  
  35.      */ 
  36.     private View menu;  
  37.  
  38.     /**  
  39.      * menu布局的參數,通過此參數來更改leftMargin的值。  
  40.      */ 
  41.     private LinearLayout.LayoutParams menuParams;  
  42.  
  43.     /**  
  44.      * 記錄手指按下時的橫坐標。  
  45.      */ 
  46.     private float xDown;  
  47.  
  48.     /**  
  49.      * 記錄手指移動時的橫坐標。  
  50.      */ 
  51.     private float xMove;  
  52.  
  53.     /**  
  54.      * 記錄手機抬起時的橫坐標。  
  55.      */ 
  56.     private float xUp;  
  57.  
  58.     /**  
  59.      * menu當前是顯示還是隱藏。只有完全顯示或隱藏menu時才會更改此值,滑動過程中此值無效。  
  60.      */ 
  61.     private boolean isMenuVisible;  
  62.  
  63.     /**  
  64.      * 用於計算手指滑動的速度。  
  65.      */ 
  66.     private VelocityTracker mVelocityTracker;  
  67.  
  68.     @Override 
  69.     protected void onCreate(Bundle savedInstanceState) {  
  70.         super.onCreate(savedInstanceState);  
  71.         setContentView(R.layout.activity_main);  
  72.         initValues();  
  73.         content.setOnTouchListener(this);  
  74.     }  
  75.  
  76.     /**  
  77.      * 初始化一些關鍵性數據。包括獲取屏幕的寬度,給content布局重新設置寬度,給menu布局重新設置寬度和偏移距離等。  
  78.      */ 
  79.     private void initValues() {  
  80.         WindowManager window = (WindowManager) getSystemService(Context.WINDOW_SERVICE);  
  81.         screenWidth = window.getDefaultDisplay().getWidth();  
  82.         content = findViewById(R.id.content);  
  83.         menu = findViewById(R.id.menu);  
  84.         menuParams = (LinearLayout.LayoutParams) menu.getLayoutParams();  
  85.         // 將menu的寬度設置為屏幕寬度減去menuPadding  
  86.         menuParams.width = screenWidth - menuPadding;  
  87.         // 左邊緣的值賦值為menu寬度的負數  
  88.         leftEdge = -menuParams.width;  
  89.         // menu的leftMargin設置為左邊緣的值,這樣初始化時menu就變為不可見  
  90.         menuParams.leftMargin = leftEdge;  
  91.         // 將content的寬度設置為屏幕寬度  
  92.         content.getLayoutParams().width = screenWidth;  
  93.     }  
  94.  
  95.     @Override 
  96.     public boolean onTouch(View v, MotionEvent event) {  
  97.         createVelocityTracker(event);  
  98.         switch (event.getAction()) {  
  99.         case MotionEvent.ACTION_DOWN:  
  100.             // 手指按下時,記錄按下時的橫坐標  
  101.             xDown = event.getRawX();  
  102.             break;  
  103.         case MotionEvent.ACTION_MOVE:  
  104.             // 手指移動時,對比按下時的橫坐標,計算出移動的距離,來調整menu的leftMargin值,從而顯示和隱藏menu  
  105.             xMove = event.getRawX();  
  106.             int distanceX = (int) (xMove - xDown);  
  107.             if (isMenuVisible) {  
  108.                 menuParams.leftMargin = distanceX;  
  109.             } else {  
  110.                 menuParams.leftMargin = leftEdge + distanceX;  
  111.             }  
  112.             if (menuParams.leftMargin < leftEdge) {  
  113.                 menuParams.leftMargin = leftEdge;  
  114.             } else if (menuParams.leftMargin > rightEdge) {  
  115.                 menuParams.leftMargin = rightEdge;  
  116.             }  
  117.             menu.setLayoutParams(menuParams);  
  118.             break;  
  119.         case MotionEvent.ACTION_UP:  
  120.             // 手指抬起時,進行判斷當前手勢的意圖,從而決定是滾動到menu界面,還是滾動到content界面  
  121.             xUp = event.getRawX();  
  122.             if (wantToShowMenu()) {  
  123.                 if (shouldScrollToMenu()) {  
  124.                     scrollToMenu();  
  125.                 } else {  
  126.                     scrollToContent();  
  127.                 }  
  128.             } else if (wantToShowContent()) {  
  129.                 if (shouldScrollToContent()) {  
  130.                     scrollToContent();  
  131.                 } else {  
  132.                     scrollToMenu();  
  133.                 }  
  134.             }  
  135.             recycleVelocityTracker();  
  136.             break;  
  137.         }  
  138.         return true;  
  139.     }  
  140.  
  141.     /**  
  142.      * 判斷當前手勢的意圖是不是想顯示content。如果手指移動的距離是負數,且當前menu是可見的,則認為當前手勢是想要顯示content。  
  143.      *   
  144.      * @return 當前手勢想顯示content返回true,否則返回false。  
  145.      */ 
  146.     private boolean wantToShowContent() {  
  147.         return xUp - xDown < 0 && isMenuVisible;  
  148.     }  
  149.  
  150.     /**  
  151.      * 判斷當前手勢的意圖是不是想顯示menu。如果手指移動的距離是正數,且當前menu是不可見的,則認為當前手勢是想要顯示menu。  
  152.      *   
  153.      * @return 當前手勢想顯示menu返回true,否則返回false。  
  154.      */ 
  155.     private boolean wantToShowMenu() {  
  156.         return xUp - xDown > 0 && !isMenuVisible;  
  157.     }  
  158.  
  159.     /**  
  160.      * 判斷是否應該滾動將menu展示出來。如果手指移動距離大於屏幕的1/2,或者手指移動速度大於SNAP_VELOCITY,  
  161.      * 就認為應該滾動將menu展示出來。  
  162.      *   
  163.      * @return 如果應該滾動將menu展示出來返回true,否則返回false。  
  164.      */ 
  165.     private boolean shouldScrollToMenu() {  
  166.         return xUp - xDown > screenWidth / 2 || getScrollVelocity() > SNAP_VELOCITY;  
  167.     }  
  168.  
  169.     /**  
  170.      * 判斷是否應該滾動將content展示出來。如果手指移動距離加上menuPadding大於屏幕的1/2,  
  171.      * 或者手指移動速度大於SNAP_VELOCITY, 就認為應該滾動將content展示出來。  
  172.      *   
  173.      * @return 如果應該滾動將content展示出來返回true,否則返回false。  
  174.      */ 
  175.     private boolean shouldScrollToContent() {  
  176.         return xDown - xUp + menuPadding > screenWidth / 2 || getScrollVelocity() > SNAP_VELOCITY;  
  177.     }  
  178.  
  179.     /**  
  180.      * 將屏幕滾動到menu界面,滾動速度設定為30.  
  181.      */ 
  182.     private void scrollToMenu() {  
  183.         new ScrollTask().execute(30);  
  184.     }  
  185.  
  186.     /**  
  187.      * 將屏幕滾動到content界面,滾動速度設定為-30.  
  188.      */ 
  189.     private void scrollToContent() {  
  190.         new ScrollTask().execute(-30);  
  191.     }  
  192.  
  193.     /**  
  194.      * 創建VelocityTracker對象,並將觸摸content界面的滑動事件加入到VelocityTracker當中。  
  195.      *   
  196.      * @param event  
  197.      *            content界面的滑動事件  
  198.      */ 
  199.     private void createVelocityTracker(MotionEvent event) {  
  200.         if (mVelocityTracker == null) {  
  201.             mVelocityTracker = VelocityTracker.obtain();  
  202.         }  
  203.         mVelocityTracker.addMovement(event);  
  204.     }  
  205.  
  206.     /**  
  207.      * 獲取手指在content界面滑動的速度。  
  208.      *   
  209.      * @return 滑動速度,以每秒鐘移動了多少像素值為單位。  
  210.      */ 
  211.     private int getScrollVelocity() {  
  212.         mVelocityTracker.computeCurrentVelocity(1000);  
  213.         int velocity = (int) mVelocityTracker.getXVelocity();  
  214.         return Math.abs(velocity);  
  215.     }  
  216.  
  217.     /**  
  218.      * 回收VelocityTracker對象。  
  219.      */ 
  220.     private void recycleVelocityTracker() {  
  221.         mVelocityTracker.recycle();  
  222.         mVelocityTracker = null;  
  223.     }  
  224.  
  225.     class ScrollTask extends AsyncTask<Integer, Integer, Integer> {  
  226.  
  227.         @Override 
  228.         protected Integer doInBackground(Integer… speed) {  
  229.             int leftMargin = menuParams.leftMargin;  
  230.             // 根據傳入的速度來滾動界面,當滾動到達左邊界或右邊界時,跳出循環。  
  231.             While (true) {  
  232.                 leftMargin = leftMargin + speed[0];  
  233.                 if (leftMargin > rightEdge) {  
  234.                     leftMargin = rightEdge;  
  235.                     break;  
  236.                 }  
  237.                 if (leftMargin < leftEdge) {  
  238.                     leftMargin = leftEdge;  
  239.                     break;  
  240.                 }  
  241.                 publishProgress(leftMargin);  
  242.                 // 為了要有滾動效果產生,每次循環使線程睡眠20毫秒,這樣肉眼才能夠看到滾動動畫。  
  243.                 Sleep(20);  
  244.             }  
  245.             if (speed[0] > 0) {  
  246.                 isMenuVisible = true;  
  247.             } else {  
  248.                 isMenuVisible = false;  
  249.             }  
  250.             return leftMargin;  
  251.         }  
  252.  
  253.         @Override 
  254.         protected void onProgressUpdate(Integer… leftMargin) {  
  255.             menuParams.leftMargin = leftMargin[0];  
  256.             menu.setLayoutParams(menuParams);  
  257.         }  
  258.  
  259.         @Override 
  260.         protected void onPostExecute(Integer leftMargin) {  
  261.             menuParams.leftMargin = leftMargin;  
  262.             menu.setLayoutParams(menuParams);  
  263.         }  
  264.     }  
  265.  
  266.     /**  
  267.      * 使當前線程睡眠指定的毫秒數。  
  268.      *   
  269.      * @param millis  
  270.      *            指定當前線程睡眠多久,以毫秒為單位  
  271.      */ 
  272.     private void sleep(long millis) {  
  273.         try {  
  274.             Thread.sleep(millis);  
  275.         } catch (InterruptedException e) {  
  276.             e.printStackTrace();  
  277.         }  
  278.     }  
  279. }  

全部的代碼都在這裡了,我們可以看到,加上注釋總共才兩百多行的代碼就能實現滑動菜單的特效。下面我來對以上代碼解釋一下,首先初始化的時候調用initValues方法,在這裡面將內容布局的寬度設定為屏幕的寬度,菜單布局的寬度設定為屏幕的寬度減去menuPadding值,這樣可以保證在菜單布局展示的時候,仍有一部分內容布局可以看到。如果不在初始化的時候重定義兩個布局寬度,就會按照layout文件裡面聲明的一樣,兩個布局都是fill_parent,這樣就無法實現滑動菜單的效果了。然後將菜單布局的左偏移量設置為負的菜單布局的寬度,這樣菜單布局就會被完全隱藏,只有內容布局會顯示在界面上。

之後給內容布局注冊監聽事件,這樣當手指在內容布局上滑動的時候就會觸發onTouch事件。在onTouch事件裡面,根據手指滑動的距離會改變菜單布局的左偏移量,從而控制菜單布局的顯示和隱藏。當手指離開屏幕的時候,會判斷應該滑動到菜單布局還是內容布局,判斷依據是根據手指滑動的距離或者滑動的速度,細節可以看代碼中的注釋。

最後還是給出AndroidManifest.xml的代碼,都是自動生成的,非常簡單:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     package="com.example.renrenslidemenudemo" 
  4.     android:versionCode="1" 
  5.     android:versionName="1.0" > 
  6.  
  7.     <uses-sdk 
  8.         android:minSdkVersion="8" 
  9.         android:targetSdkVersion="8" /> 
  10.  
  11.     <application 
  12.         android:allowBackup="true" 
  13.         android:icon="@drawable/ic_launcher" 
  14.         android:label="@string/app_name" 
  15.         android:theme="@android:style/Theme.NoTitleBar" > 
  16.         <activity 
  17.             android:name="com.example.renrenslidemenudemo.MainActivity" 
  18.             android:label="@string/app_name" > 
  19.             <intent-filter> 
  20.                 <action android:name="android.intent.action.MAIN" /> 
  21.  
  22.                 <category android:name="android.intent.category.LAUNCHER" /> 
  23.             </intent-filter> 
  24.         </activity> 
  25.     </application> 
  26.  
  27. </manifest> 

好了,現在我們運行一下,看一下效果吧,首先是程序剛打開的時候,顯示的是內容布局。用手指在界面向右滑動,可以看到菜單布局出現。

                             
 

而當菜單布局完全展示的時候,效果如下圖:

                                 
 

今天大家看到了史上最簡單的滑動菜單實現方案,確實是非常簡單。那麼有朋友也許會問了,在一個Activity當中這樣實現滑動菜單是很簡單,可是如果我的應用程序有好多個Activity都需要滑動菜單,每個Activity裡都這麼實現一遍,也變得復雜了。好了,今天的講解到此結束,有疑問的朋友可以在下面留言。

源碼下載,請點擊這裡
 

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