Delphi XE5實作仿Facebook Slide Menu

螢幕快照 2013-10-01 上午9.30.24

既然Delphi XE5可以開發Android、iOS的程式,那可不可以設計像Facebook一樣的選單呢(如上圖)?答案是可以的!

接下來就手把手教大家操作。

1首先開一個空的Mobile Project,在上面放一個ListBox元件,將Aligh設定為alClient

螢幕快照 2013-10-01 上午8.55.27

2接下來回到ListBox元件按右鍵進入 Item Editor,建立如下圖的選單

螢幕快照 2013-10-01 上午8.59.12

3.接下來再放上一個Panel,一樣把Aligh設定成alClient,接著在上面放一個ToolBar

螢幕快照 2013-10-01 上午9.01.41

螢幕快照 2013-10-01 上午9.02.01

4.在ToolBar上放一個SpeedButton,設定StyleLookup為detailstoolbuttonbordered

螢幕快照 2013-10-01 上午9.02.45

螢幕快照 2013-10-01 上午9.03.18

5.回到Panel元件,設定Position的X ,下拉選擇 Create New TFloatAnimation

螢幕快照 2013-10-01 上午9.49.49

6.接著在SpeedButton 的 OnClick事件

var
  FloatAnimationX: single;
begin
  FloatAnimationX:=Self.ClientWidth - 60;

  if (panel1.Position.X=FloatAnimationX) then begin
    FloatAnimation1.StartValue:= FloatAnimationX;
    FloatAnimation1.StopValue:= 0;
  end
  else begin
    FloatAnimation1.StartValue:= 0;
    FloatAnimation1.StopValue:= FloatAnimationX;
  end;

  <del datetime="2013-10-01T09:44:53+00:00">AnimateDrawer</del>FloatAnimation1.Start;
end;

結果就會變成如下圖了!

螢幕快照 2013-10-01 上午9.27.52
如果你要在Panel加上陰影的話,只要在Panel加上即可
螢幕快照 2013-10-01 上午9.28.40

螢幕快照 2013-10-01 上午9.29.30

螢幕快照 2013-10-01 上午9.30.24

 

GitHub原始碼 https://github.com/superlevin/delphixe5facebookslidemenu

我要留言

留言

關於 林壽山

林壽山 資深系統分析師,擅長PHP網頁設計(CodeIgniter、Laravel)框架、Delphi程式設計、資料庫設計、C# WinForm/WebForm程式設計
本篇發表於 Android程式設計, Delphi, iOS程式設計 並標籤為 , , , , , , 。將永久鏈結加入書籤。

5 則回應給 Delphi XE5實作仿Facebook Slide Menu

  1. 吳世宏 說道:

    林大師您好:
    看了您這個範例, 感覺很棒, 自己也跟著實作一遍, 但是, AnimateDrawer.Start; 這句話編譯失敗, 不知是否有用到
    其他的uses, 若忽略AnimateDrawer.Start; 程式啟動, speedbutton click ,沒有反應, 另外, 在ListBox, 您有add item,
    其中, “最愛”這個item,底色有點不一樣, 不知是如何設定出來的, 不好意思擔誤您保貴的時間, 希望您能不吝指教

  2. 林壽山 說道:

    1.AnimateDrawer.Start;這行是錯的!
    改成FloatAnimation1.Start; (因為程式我是直接在上面打的XDDD)
    2.最愛的設定在Item Editor先下拉成TListBoxGroupHeader

  3. 引用通告: 終於讓手上的HTC EVO 4G可以跑Delphi XE5開發的Android程式了! | Levin's Blog-林壽山

  4. 說道:

    您好 我想請問一下XE5 for android是否可以建立一個服務(service)?
    我想讓他每10分鐘在後台取得網頁資訊
    但似乎他們官網都找不到範例

  5. 林壽山 說道:

    試了一下~好像也找不到!
    建議可以直接問原廠或是捷康

發表迴響

你的電子郵件位址並不會被公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料