2013年9月30日 星期一

Table View Library -- 表格選單

通例該該
有的程式真是有夠神，看到了網路設計系統不過目前還用不上（路都不會走還妄想飛啊我）只能先從小程式看起，不過邊看很多想法都會冒出來，不過時間也過得好快。

這篇翻譯一篇，可以同是製作多個按鈕的清單程式（有的遊戲按鈕選項功能多，如果功能類似或是按鈕圖片相同，可以省下大量的程式碼以及編寫時間）
除了官網原文之外，作者的部落格說明圖片其實更清晰明瞭，唯一缺點就是全英文（诶）

圖片引用製作者部落格

這是這篇程式要製作出的成品版面，五個選項按鈕，需要載入的是這個tableView.lua檔。
（似乎有更新版XL，提供了新的畫面設置以及更快速，大家可以參考著使用）

1

local tableView = require("tableView")


第一步，先設定每個按鈕。設定按鈕項目、跟接續清單的標題、還有圖片（可設可無）
（這邊可使用for迴圈，特別在多個按鈕時）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35



–setup the table 
local data = {}

–setup each row as a new table, 

-then add title, subtitle, and image
data[1] = {}
data[1].title = "Hot Coffee"
data[1].subtitle = "Grounds brewed in hot water"
data[1].image = "coffee1.png"

data[2] = {}
data[2].title = "Iced Coffee"
data[2].subtitle = "Chilled coffee with ice"
data[2].image = "coffee2.png"

data[3] = {}
data[3].title = "Espresso"
data[3].subtitle = "Concentrated by forcing hot water"
data[3].image = "coffee3.png"

data[4] = {}
data[4].title = "Cappuccino"
data[4].subtitle = "Espresso with frothy milk"
data[4].image = "coffee4.png"

data[5] = {}
data[5].title = "Latte"
data[5].subtitle = "More milk and less froth"
data[5].image = "coffee5.png"

data[6] = {}
data[6].title = "Americano"
data[6].subtitle = "Espresso with hot water"
data[6].image = "coffee6.png"

以上設定完之後開始設定清單功能，先設定背景，程式碼如下：
2行是將上方的陣列套入程式，兩個data意義不同，這部分別搞混。

1
2
3
4

local myList = tableView.newList{
data = data,
default = "listItemBg.png"
}

之後要增加如果選項被觸發時（被點按）時新的清單出現方式（設定是右方，程式6行）如下：

1
2
3
4
5
6

local myList = tableView.newList{
data = data,
default = "listItemBg.png",
callback = function( row )
end
}

接著增加觸發選項後出現新的畫面，使用group（6、7行）以及設置回到原始清單的程式。
（此外背景無圖可以預設底色，第4行）

1
2
3
4
5
6
7
8
9

local myList = tableView.newList{
data = data,
default = "listItemBg.png",
backgroundColor = {255,2552,255},
callback = function( row )
local g = display.newGroup()
return g
end
}

目前設置已經可以顯示出的畫面

接著就是要將每個按鈕的資訊加入（就是文章最開頭那一串data陣列資料）
新增8至19行，分別是小圖示（可有可無）、大標題、副標題三個項目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

local myList = tableView.newList{
data = data,
default = "listItemBg.png",
backgroundColor = {255,2552,255},
callback = function( row )
local g = display.newGroup()

local img = display.newImage(row.image)
g:insert(img)

local title = display.newText( row.title, 0, 0, native.systemFontBold, 14 )
title:setTextColor(0,0,0)
g:insert(title)

local subtitle = display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
subtitle:setTextColor(80,80,80)
g:insert(subtitle)

return g
end
}


以上程式顯示畫面

看圖會發現主標題跟副標題的文字位置重疊，與圖片其實皆設定在初始位置，所以之後要增加每個項目的顯示位置。（粗體為新增位置設定的程式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

local img = display.newImage(row.image)
g:insert(img)
img.x = math.floor(img.width*0.5 + 6)
img.y = math.floor(img.height*0.5)

local title = display.newText( row.title, 0, 0, native.systemFontBold, 14 )
title:setTextColor(0,0,0)
g:insert(title)
title.x = title.width*0.5 + img.width + 6
title.y = 30

local subtitle = display.newText( row.subtitle, 0, 0, native.systemFont, 12 )
subtitle:setTextColor(80,80,80)
g:insert(subtitle)
subtitle.x = subtitle.width*0.5 + img.width + 6
subtitle.y = title.y + title.height + 6

完成展示頁面

也可以自訂整個清單背景，以及按鈕文字標題的設定，這部分在原作者部落格中最後也有教學，大部分設定雷同Corona基礎設定，這些就不贅述。

另外在官網原文那篇，另外提供了分隔線功能、還有右邊的捲動軸（我想不起來那東西叫啥英文是scroll bar）

以下是增加捲軸跟消除捲軸的函式（在螢幕範圍內部消除卷軸的話會預設一直存在）

1
2

myList:addScrollBar()
myList:removeScrollBar()


而要將按鈕分大標題（圖中灰色橫條）只要在一開始data陣列設置即可，程式如下：
只要事先將每個按鈕的category項給歸類，在顯示的時候自動會分類到屬於的大標題之下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

data[1].title = "Pizza"
data[1].category = "Dinner"
data[2].title = "Coffee"
data[2].category = "Breakfast"
data[3].title = "Cheese"
data[3].category = "Lunch"
data[4].title = "Chicken Pot Pie"
data[4].category = "Dinner"
data[4].title = "Bagel"
data[4].category = "Breakfast"
data[5].title = "Apple Pie"
data[5].category = "Dinner"
 
local headers = { "Breakfast", "Lunch", "Dinner" }
 
myList = tableView.newList{
        data = data, 
        default = "listItemBg.png",
        over = "listItemBg_over.png",按鈕按下時會出現的圖示
        onRelease = listButtonRelease,感應到接觸點離開時觸發的函式
        top = 60,清單的上邊界
        bottom = 1,最後一個按鈕與清單的下邊界
        cat = "category",
        order = headers,管理cat的陣列
        categoryBackground = "catBg.png",
        backgroundColor = { 255, 255, 255 },
        callback = function(item) 按下按鈕後出現在右方的東西

local t = display.newText(item.title, 0, 0, 
                          native.systemFontBold, textSize)
 t:setTextColor(0, 0, 0)
 t.x = math.floor(t.width/2) + 20
 t.y = 46 
 return t
end


官方程式載點：Download
下載內容包含主程式、副程式及素材圖片（tableView.lua, ui.lua, main.lua）
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)