Android選單側滑特效實現

人人客戶端有乙個特效還是挺吸引人的，在主介面手指向右滑動，就可以將選單展示出來，而主介面會被隱藏大部分，但是仍有左側的一小部分同選單一起展示。在乙個activity的布局中需要有兩部分，乙個是選單(menu)的布局，乙個是內容(content)的布局。兩個布局橫向排列，選單布局在左，內容布局在右。初始化的時候將選單布局向左偏移，以至於能夠完全隱藏，這樣內容布局就會完全顯示在activity中。然後通過監聽手指滑動事件，來改變選單布局的左偏移距離，從而控制選單布局的顯示和隱藏。首先在eclipse中新建乙個android專案，專案名就叫做renrenslidemenudemo。然後寫一下布局檔案，建立或開啟layout目錄下的activity_main.xml檔案，加入如下**：

這個布局檔案的最外層布局是乙個linearlayout，排列方向是水平方向排列。這個linearlayout下面巢狀了兩個子linearlayout，分別就是選單的布局和內容的布局。這裡為了要讓布局盡量簡單，選單布局和內容布局裡面沒有加入任何控制項，只是給這兩個布局各新增了一張背景，這兩張背景是我從人人客戶端上截下來的圖。這樣我們可以把注意力都集中在如何實現滑動選單的效果上面，不用關心裡面各種複雜的布局了。

建立或開啟mainactivity，這個類仍然是程式的主activity，也是這次demo唯一的activity，在裡面加入如下**：

public class mainactivity extends activity implements ontouchlistener 
/*** 初始化一些關鍵性資料。包括獲取螢幕的寬度，給content布局重新設定寬度，給menu布局重新設定寬度和偏移距離等。
*/private void initvalues() 
@override
public boolean ontouch(view v, motionevent event)  else 
if (menuparams.leftmargin < leftedge)  else if (menuparams.leftmargin > rightedge) 
menu.setlayoutparams(menuparams);
break;
case motionevent.action_up:
// 手指抬起時，進行判斷當前手勢的意圖，從而決定是滾動到menu介面，還是滾動到content介面
xup = event.getrawx();
if (wanttoshowmenu())  else 
} else if (wanttoshowcontent())  else 
}recyclevelocitytracker();
break;
}		return true;
}	/**
* 判斷當前手勢的意圖是不是想顯示content。如果手指移動的距離是負數，且當前menu是可見的，則認為當前手勢是想要顯示content。
* * @return 當前手勢想顯示content返回true，否則返回false。
*/private boolean wanttoshowcontent() 
/*** 判斷當前手勢的意圖是不是想顯示menu。如果手指移動的距離是正數，且當前menu是不可見的，則認為當前手勢是想要顯示menu。
* * @return 當前手勢想顯示menu返回true，否則返回false。
*/private boolean wanttoshowmenu() 
/*** 判斷是否應該滾動將menu展示出來。如果手指移動距離大於螢幕的1/2，或者手指移動速度大於snap_velocity，
* 就認為應該滾動將menu展示出來。
* * @return 如果應該滾動將menu展示出來返回true，否則返回false。
*/private boolean shouldscrolltomenu() 
/*** 判斷是否應該滾動將content展示出來。如果手指移動距離加上menupadding大於螢幕的1/2，
* 或者手指移動速度大於snap_velocity， 就認為應該滾動將content展示出來。
* * @return 如果應該滾動將content展示出來返回true，否則返回false。
*/private boolean shouldscrolltocontent() 
/*** 將螢幕滾動到menu介面，滾動速度設定為30.
*/private void scrolltomenu() 
/*** 將螢幕滾動到content介面，滾動速度設定為-30.
*/private void scrolltocontent() 
/*** 建立velocitytracker物件，並將觸控content介面的滑動事件加入到velocitytracker當中。
* * @param event
*            content介面的滑動事件
*/private void createvelocitytracker(motionevent event) 
mvelocitytracker.addmovement(event);
}	/**
* 獲取手指在content介面滑動的速度。
* * @return 滑動速度，以每秒鐘移動了多少畫素值為單位。
*/private int getscrollvelocity() 
/*** **velocitytracker物件。
*/private void recyclevelocitytracker() 
class scrolltask extends asynctask
if (leftmargin < leftedge) 
publishprogress(leftmargin);
// 為了要有滾動效果產生，每次迴圈使執行緒睡眠20毫秒，這樣肉眼才能夠看到滾動動畫。
sleep(20);
}if (speed[0] > 0)  else 
return leftmargin;
}		@override
protected void onprogressupdate(integer... leftmargin) 
@override
protected void onpostexecute(integer leftmargin) 
}	/**
* 使當前執行緒睡眠指定的毫秒數。
* * @param millis
*            指定當前執行緒睡眠多久，以毫秒為單位
*/private void sleep(long millis)  catch (interruptedexception e) 
}}

全部的**都在這裡了，我們可以看到，加上注釋總共才兩百多行的**就能實現滑動選單的特效。下面我來對以上**解釋一下，首先初始化的時候呼叫initvalues方法，在這裡面將內容布局的寬度設定為螢幕的寬度，選單布局的寬度設定為螢幕的寬度減去menupadding值，這樣可以保證在選單布局展示的時候，仍有一部分內容布局可以看到。如果不在初始化的時候重定義兩個布局寬度，就會按照layout檔案裡面宣告的一樣，兩個布局都是fill_parent，這樣就無法實現滑動選單的效果了。然後將選單布局的左偏移量設定為負的選單布局的寬度，這樣選單布局就會被完全隱藏，只有內容布局會顯示在介面上。

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

最後還是給出androidmanifest.xml的**，都是自動生成的，非常簡單：

<?xml version="1.0" encoding="utf-8"?>

好了，現在我們執行一下，看一下效果吧，首先是程式剛開啟的時候，顯示的是內容布局。用手指在介面向右滑動，可以看到選單布局出現。

Android選單側滑特效實現

側滑選單的實現

iOS開發側滑選單的實現

Android 抽屜側滑效果

Android選單側滑特效實現

側滑選單的實現

iOS開發 側滑選單的實現

Android 抽屜側滑效果

相關推薦

iOS開發側滑選單的實現