2011年4月28日 星期四

Corona SDK -- Button Event 程式架構

Button的基本操作,是基於Corona SDK裡面的ui.lua這個Button物件來架構。Button物件裡面的設定參數也很簡單,主要參數與設定方法如下:
首先,要先include這個ui物件(要將ui.lua複製到您專案資料夾下):
        local ui = require("ui")

然後,建立一個新button_A:
-----------------------------------------
        local button_A = ui.newButton{
                default = "image/default.png",
                over = "image/over.png",
                x=100, y=100,
                onPress=A_Press,
                onRelease=A_Release,
                text = "Button A Label",
                font = "Trebuchet-BoldItalic",
                textColor = { 51, 51, 51, 255 },
                size = 28,
                emboss = true,
                id=1
                }
-----------------------------------------
其中:
default        按鈕未被按下的圖案,可自行選擇您所設計的圖片
over            按鈕被按下的圖案,亦可自行選擇您所設計的圖片
                 (設定此兩個圖案,他會自動做按下以及放開按鈕時更換圖檔的動作,
                  且當滑鼠移開按鈕也會換圖。)
x, y             按鈕擺放的位置
onPress       當按鈕被按下的時候,去執行哪一個function
                  上面範例使用A_press,就必須要有function A_press()之存在
onRelease    當按鈕按下後被釋放的時候,去執行哪一個function
                  上面範例使用A_release,就必須要有function A_release()之存在
text            輸入您希望在圖片上顯示的文字
font            字型
textColor     字的顏色與透明度alpha (R, G, B, alpha)
size             字的大小
emboss        是否需要將文字製作成浮水的感覺(true or false)
id               這個按鈕的標籤,可以是number或string(這很好用,稍後我會多做介
                  紹)
以上參數,可以自由選擇輸入,不一定要全部都一定要輸入,例如您設計的圖片已經包含文字了,就可以把 text、font、textColor、size、emboss拿掉。
至於onPress與onRelease這兩個function,也可以擇一選擇,這要視您想要的動作而定。例如:您的動作設定,是按鈕按下後放開才動作,那就選擇onRelease即可。在此,必須要有一個對應的function給此按鈕呼叫:
        local A_Release = function(event)
                print(“This is button A event with onRelease.”)
        end
或者
        local A_Press = function(event)
                print(“This is button A event with onPress.”)
        end
除了onPress、onRelease以外,也可以用onEvent來設定要執行的動作,範例如下:
-----------------------------------------
        local buttonA_Handle = function(event)
                print(“This is button A event with onEvent.”)
                if “press” == event.phase then
                        print(“Button A is pressed.”)
                elseif “release” == event.phase then
                        print(“Button A is released.”)
                end
        end
        local button_A = ui.newButton{
                default = "image/default.png",
                over = "image/over.png",
                x=100, y=100,
                onEvent=buttonA_Handle,
                id=1
                }
-----------------------------------------
以上就可以設計出您所有想要的按鈕與執行動作。

來討論一下,按鈕內的id是幹嘛的。id可以想像為”按鈕的標籤”,也就是,利用此來知道,哪一個按鈕被按下了。可是,上面設定不是每一個按鈕都對應到自己的一個onEvent的function嗎?不是就知道哪一個按鈕被按下了嗎?
沒錯,但是如果你有100個按鈕,而且每一個按鈕都做幾乎相同的事情,只是設定參數不同,難道你要寫出100個按鈕,100個對應的onEvent function嗎?這樣太累了,所以可以利用id這個標籤簡化程式。而id可以是數字(number)也可以是文字(string),是你需要而定。
範例如下:
-----------------------------------------
        local button_Handle = function(event)
                print(“This is button event with onEvent.”)
                if “A” == event.id then
                        print(“Button A is pressed.”)
                elseif “B” == event.id then
                        print(“Button B is pressed.”)
                elseif “C” == event.id then
                        print(“Button C is pressed.”)
                end
        end
        local creat_button = function(x, y, id)
                local button = ui.newButton{
                        default = "image/default.png",
                        over = "image/over.png",
                        x=x, y=y,
                        onEvent=button_Handle,
                        id=id
                        }
        end
        local buttonA = creat_button(50, 50, “A”)
        local buttonB = creat_button(50, 150, “B”)
        local buttonC = creat_button(50, 250, “C”)
-----------------------------------------
因此,透過id的設定,只需要設定一次button以及相對應的onEvent function,透過id標籤的選擇,去執行不同的程式即可。例如以上範例,假設你需要100個按鈕,你也只需要透過for迴圈去creat 100個按鈕,然後在onEvent function裡面透過id去辨識哪一個按鈕被按下就可以了。輕鬆又方便!!

最後,由於這樣建立的是一個Button的物件,因此也可以透過物件的一些function來控制,
例如:
        buttonA:scale(0.35,0.35)
        buttonb.isVisible = false
等等來做一些基本的控制

2 則留言:

  1. Local button = ui.newButton{ default = "image/default.png", over = "image/over.png", x=x, y=y, onEvent=buttonA_Handle, id=id }, 这里的onevent要修正下。

    回覆刪除
  2. Wow~~ 感謝告知~~ 我多打一個A了~~ 謝謝喔

    回覆刪除