TabBar

Corona SDK和其他開發跨平台遊戲引擎不一樣的強項,就是除了遊戲以外,還可以製作一般的App。其中,TabBar介面在手機程式中常出現。如上圖,就是按下下面任何一顆按鈕,就會跳到不同的畫面。本篇文章就要說明怎麼用Corona SDK製作所謂的TabBar程式。

程式碼下載網址:https://app.box.com/s/djgvbihs0rpbqdkhytgg

 

A.大體架構解說

TabBarExplain

請看上圖,製作TabBar程式包含幾個步驟。

  1. 先要在main.lua把TabBar生成出來,
  2. 而每個Tab按到之後,顯示的畫面則是用Composer API製作出來不同的場景。

 

B.main.lua架構解說

  1. 在main.lua裡,先引入widget與composer程式庫。
  2. 在還沒有產生TabBar之前,先設定Tabbar的各個按鈕。
  3. 用widget.newTabBar產生TabBar
  4. 最後用composer.gotoScene(“tab1”),讓畫面預設顯示tab1.lua的場景。
  5. 之後按下每個按鈕都會到不同的場景。

 

C.main.lua程式碼寫法

瞭解了架構之後,將下載的程式碼打開,來看看真的程式碼如何撰寫。

TabBarCode1

  1. 首先第一行程式碼移除了狀態列
  2. 接下來引入了widget與composer程式庫。稍後要用widget程式庫生成TabBar;要用composer程式庫還轉換場景。
  3. 程式碼6~48行設定了TabBar的四顆按鈕。

(範例是四顆按鈕,如果要做的TabBar有五顆按鈕的話,就自行多加一個按鈕;如果要做三顆按鈕的話,就拿掉一個)

 

TabBarExplainAgain

這邊以第一顆按鈕為例,還沒按下去的時候,要顯示的是home.png的圖;按下去之後,要顯示的是homepressed.png。

TabBar的圖寬度都做30像素,高度都做30像素。

設定label=”Home”,就會在圖示下面顯示出Home字樣,

selected = true代表預設是選取的狀態,

onPressed設定按下這顆按鈕後,畫面要轉換場景顯示tab1.lua的畫面。

其他按鈕都以類似的方法設定。

 

  1. 程式碼51~62行用widget.newTabBar真的生成了TabBar,其中做出各種設定:

TabBarCode2

把buttons設定成上面程式碼的按鈕群組。

把背景設成指定圖片。

用tabSelectedLeftFile、RightFile,與MiddleFile拼出按下去的效果。這邊MiddleFile會隨著按鈕的寬度而去放大。

  1. 最後設定TabBar的高度,用composer.gotoScene,將畫面秀出tab1.lua的場景。

 

D.結論與注意事項

以上就是Corona SDK裡,TabBar的作法。這邊要注意的是,目前用widget函式庫生成的TabBar,都還是必須以320×480的大小製作。以@2x的設定方法,支援高解析的畫面。支援@2x的相關設定,請看[上一篇部落格文章的介紹]。

另外,本範例是以iPhone4做為預設的大小,iPhone5或iPhone6的長型螢幕的話,請依本範例再做後續的設定。

 

相關連結

*****************************************************

一般人也可以寫程式:Corona SDK入門好書介紹 [相關連結]

如何支援@2x的圖片 [頁面連結]

Corona SDK免費嗎?Starter、Basic,與Pro版有什麼不同 [頁面連結]

用Corona SDK來做時鐘 [頁面連結]

 

(1765)

superstardj

been a DJ, a rapper, a musician and a recording artist... a novel-writer, a language-book author, and a chief editor... a painter, a book-cover designer and many more... right now a programmer who designs mobile application, both iOS and Android devices...

6 thoughts on “[Corona SDK] 如何做出TabBar程式 (程式碼分享)

lhwang - | Reply

因为想做个apps(不是游戏),想买本电子书版本的,请问有哪个渠道吗?

google play的显示错误讯息,我在大马也买不到台湾网站的说

谢谢

    superstardj - | Reply

    最近很忙現在才回,真不好意思~

lhwang - | Reply

你好,刚刚已经在udn买到电子版了

写得非常简单易懂,让我读着读着就有恍然大悟的感觉(之前已经困扰了好久的说)

看到你在书里的快乐小钢琴章节里表示有随书附送的光碟里含有cookbook.lua,请问光碟里的资料可以寄我一份吗?

谢谢

    superstardj - | Reply

    OK

lhwang - | Reply

请问光碟里的资料就是范例吗?

刚刚才注意到书里有链接,已经下载,谢谢

    superstardj - | Reply

    OK… 加油~~

Leave a Reply

Your email address will not be published. Required fields are marked *