List View 3

Features demonstrated:

How to create a list view using the Table View Library.
This example shows the list with a transparent background, allowing an image beneath to show through.

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

--import the table view library
local tableView = require("tableView")
 
--import the button events library
local ui = require("ui")
 
display.setStatusBar( display.HiddenStatusBar ) 
 
--initial values
local screenOffsetW, screenOffsetH = display.contentWidth -  display.viewableContentWidth, display.contentHeight - display.viewableContentHeight
 
local myList, backBtn, detailScreenText
 
local background = display.newImage("bg.png", true)
 
--setup a destination for the list items
local detailScreen = display.newGroup()
 
detailScreenText = display.newText("You tapped item", 0, 0, native.systemFontBold, 24)
detailScreenText:setTextColor(255, 255, 255)
detailScreen:insert(detailScreenText)
detailScreenText.x = math.floor(display.contentWidth/2)
detailScreenText.y = math.floor(display.contentHeight/2)        
detailScreen.x = display.contentWidth
 
--setup functions to execute on touch of the list view items
function listButtonRelease( event )
        self = event.target
        local id = self.id
        print(self.id)
        
        detailScreenText.text = "You tapped item ".. self.id
                        
        transition.to(myList, {time=400, x=display.contentWidth*-1, transition=easing.outExpo })
        transition.to(detailScreen, {time=400, x=0, transition=easing.outExpo })
        transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2) + screenOffsetW*.5 + 6, transition=easing.outExpo })
        transition.to(backBtn, {time=400, alpha=1 })
        
        delta, velocity = 0, 0
end
 
function backBtnRelease( event )
        print("back button released")
        transition.to(myList, {time=400, x=0, transition=easing.outExpo })
        transition.to(detailScreen, {time=400, x=display.contentWidth, transition=easing.outExpo })
        transition.to(backBtn, {time=400, x=math.floor(backBtn.width/2)+backBtn.width, transition=easing.outExpo })
        transition.to(backBtn, {time=400, alpha=0 })
 
        delta, velocity = 0, 0
end
 
local topBoundary = display.screenOriginY + 40
local bottomBoundary = display.screenOriginY + 0
 
-- setup the data
local data = {}
for i=1, 20 do
        data[i] = "List item ".. i
end
 
-- Create a list with no background, allowing the background image to show through 
myList = tableView.newList{
        data=data,
        default="listItemBg_white.png",
        over="listItemBg_over.png",
        onRelease=listButtonRelease,
        top=topBoundary,
        bottom=bottomBoundary,
        callback=function(row) 
                        local t = display.newText(row, 0, 0, native.systemFontBold, textSize)
                        t:setTextColor(255, 255, 255)
                        t.x = math.floor(t.width/2) + 12
                        t.y = 46 
                        return t
                end
}
 
--Setup the nav bar 
local navBar = display.newImage("navBar.png", 0, 0, true)
navBar.x = display.contentWidth*.5
navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)
 
local navHeader = display.newText("My List", 0, 0, native.systemFontBold, 16)
navHeader:setTextColor(255, 255, 255)
navHeader.x = display.contentWidth*.5
navHeader.y = navBar.y
 
--Setup the back button
backBtn = ui.newButton{ 
        default = "backButton.png", 
        over = "backButton_over.png", 
        onRelease = backBtnRelease
}
backBtn.x = math.floor(backBtn.width/2) + backBtn.width + screenOffsetW
backBtn.y = navBar.y 
backBtn.alpha = 0