Tableview/list Inside Scrollview

Getting Started Newbie Questions
#1

I’m just learning LUA/Corona and am wondering if it is possible to have a tableView inside of a ScrollView?

I’ve got the below scroller to enable everything below the navbar to become scrollable.

[lua]

–Setup the nav bar

local navBar = display.newImageRect(“assets/images/navbar.png”, display.contentWidth + 15, 44)

navBar.x = display.contentWidth*.5

navBar.y = math.floor(display.screenOriginY + navBar.height*0.5)

local navHeader = display.newText(“My Game”, 0, 0, “Handlee”, 36)

navHeader:setTextColor(255, 255, 255)

navHeader.x = display.contentWidth*.5

navHeader.y = navBar.y

local scroller = widget.newScrollView

{

top = 44,

width = display.contentWidth,

height = 568,

scrollWidth = display.contentWidth,

scrollHeight = display.contentHeight,

hideBackground = true,

horizontalScrollDisabled = true,

maskFile = “assets/images/mask-320x568.png”

}

[/lua]

I’m trying to add tables to this ScrollView. Is it possible to simply use widget.newTableView? the only issue I have is that the table will be dynamic in the number of rows that it could contain. It will retrieve JSON data from a API call. So i won’t be able to define the height of the table, as their could be 0 rows or 10. I would want the tableView to be static within the ScrollView, so you can scroll the entire view rather than just the table.

Essentially I’m trying to re-create something like this:  (the right image - where it says waiting for opponent)
 

I do have a custom background image that I want to assign to each row. So i was thinking simply render an image for each row of data then render the text etc on top of each image, however i’d won’t to have the onRowTouch events and i’d want to assign each row an id which i believe is only possible with TableView?

#2

Let me see if I can get an answer on this for you.

#3

I’ve tried something like this

[lua]

        for i = 1, 3 do

          local row = display.newImage(“assets/images/ipad-list-element.png”) 

          row.id = i 

          row.y = (row.height * i) + createButton.y

          row:setReferencePoint(display.TopLeftReferencePoint)

            local rowTxt = display.newText(“Row #” … i,0,0,native.systemFont,15)

          rowTxt:setTextColor(0,136,204)

          rowTxt.x = 80

          rowTxt.y = row.y + 20

          scroller:insert(row)

          scroller:insert(rowTxt)

        end

[/lua]

maEF14g.png

It does give me the effect i want, how would i go-about making each ‘row’ selectable?

#4

Let me see if I can get an answer on this for you.

#5

I’ve tried something like this

[lua]

        for i = 1, 3 do

          local row = display.newImage(“assets/images/ipad-list-element.png”) 

          row.id = i 

          row.y = (row.height * i) + createButton.y

          row:setReferencePoint(display.TopLeftReferencePoint)

            local rowTxt = display.newText(“Row #” … i,0,0,native.systemFont,15)

          rowTxt:setTextColor(0,136,204)

          rowTxt.x = 80

          rowTxt.y = row.y + 20

          scroller:insert(row)

          scroller:insert(rowTxt)

        end

[/lua]

maEF14g.png

It does give me the effect i want, how would i go-about making each ‘row’ selectable?

#6

Rob, did you get any response on this question? I am wondering the same. Any problems? Thanks

#7

I have re-asked.  Both depend on touch events to work though I know it was a goal to allow it to work. 

#8

Hi Rob,

Thanks. I was able to insert a tableView into the ScrollView without any trouble. Now the questions is how to get tableView to pass control back to scrollView when I scroll through all the table rows and reach the top or the bottom end of the table. My desired behavior is when I tap on the tableView and pull down I see my rows until I reach the top (ie row 1) and then as I pull down more the tableView hands control back to scrollView and the scrollView scrolls down revealing what has been placed above the tableView inside the scrollView (ie a button etc). Does this make sense? Thanks much for your help.

Regards

Kerem

#9

Hi tamoor666,

What you show in the display capture is a grouped tableView. No scrollview involved there.

Regarding the effective case of a tableView inside a scrollView, that’s something we don’t support for now. You can however think about a custom tableView implementation, with transparent PNGs, based on types of rows being rendered (header, content rows, etc), that will render very close to what you display in the capture.

Alex

#10

Alex, if I understand this correctly, you’re suggesting to ditch scrollview and place the buttons etc in say the first row of the tableview with appropriate formatting elements all going there. Is that right? Thanks for your input.

#11

Rob, did you get any response on this question? I am wondering the same. Any problems? Thanks

#12

I have re-asked.  Both depend on touch events to work though I know it was a goal to allow it to work. 

#13

Hi Rob,

Thanks. I was able to insert a tableView into the ScrollView without any trouble. Now the questions is how to get tableView to pass control back to scrollView when I scroll through all the table rows and reach the top or the bottom end of the table. My desired behavior is when I tap on the tableView and pull down I see my rows until I reach the top (ie row 1) and then as I pull down more the tableView hands control back to scrollView and the scrollView scrolls down revealing what has been placed above the tableView inside the scrollView (ie a button etc). Does this make sense? Thanks much for your help.

Regards

Kerem

#14

Hi tamoor666,

What you show in the display capture is a grouped tableView. No scrollview involved there.

Regarding the effective case of a tableView inside a scrollView, that’s something we don’t support for now. You can however think about a custom tableView implementation, with transparent PNGs, based on types of rows being rendered (header, content rows, etc), that will render very close to what you display in the capture.

Alex

#15

Alex, if I understand this correctly, you’re suggesting to ditch scrollview and place the buttons etc in say the first row of the tableview with appropriate formatting elements all going there. Is that right? Thanks for your input.