Dynamically Loading Photos In A Tableview While Scrolling

Solar2D General Questions/Discussion
#1

I have a long tableview with a photo on each row.

Because the photos are on an external server, I want to show the tableview first, then while I allow the user to scroll up and down the tableview, I start loading the photos and make them pop up on the rows as they are downloaded.

In the network listener, when each photo has been received, I redraw the whole scene, then load the next photo. 

The problem is that when redrawing the scene, I call widget.newTableView(), the Y position of the tableview is reset to 0, which will be a constant annoyance to the user for as long as the downloading goes on.

I thought about quickly storing and restoring the Y position when redrawing the scene. But will the scrolling momentum be kept, or will it be reset to zero?

[lua]

local y = list:getContentPosition()

list = widget.newTableView()

list:scrollToY(y, 0)

[/lua]

Is there a way to make the photos pop up on the rows without redrawing the whole scene?

#2

Sure, you do not need to recreate the scene.

Just create a function (like the one below) and call it from network listener passing the index of the row that will receive the photo and the photo filename to be loaded.

The code below is using widget v2.0 and assumes that you have inserted your tableView inside a group display (like the one used in the Storyboard).

[lua]

        local function updateRowImage(rowIndex, photoFilename)

                local tableViewObj = group[“tableView”]

                

                local row = tableViewObj._view._rows[rowIndex]                        

                

                local rowImage = display.newImage(photoFilename, system.TemporaryDirectory)

                rowImage:setReferencePoint(display.CenterLeftReferencePoint)

                

                rowImage.x = row.x - ( rowWidth * 0.5 )

                rowImage.y = rowHeight*0.5

                row:insert(rowImage)

                row[“rowImage”] = rowImage

            end

– you need to create a tableView and insert it in a group as below

local widget = require “widget”

local tblView = widget.newTableView(tblViewOptions)

group:insert(tblView)

group[“tableView”] = tblView

[/lua]

Renato

(http://redbeachgames.com/)’ target=’_blank’]Red Beach Games

Try our new game Cut My Puzzle for free for (https://itunes.apple.com/us/app/cut-my-puzzle/id611051498?ls=1&mt=8)’]iOS or (https://play.google.com/store/apps/details?id=com.redbeachgames.cutmypuzzle)’]Android!

 

#3

Great!

But “_view” and “_rows”… These look like undocumented features. Or where are they documented?

#4

Sure, you do not need to recreate the scene.

Just create a function (like the one below) and call it from network listener passing the index of the row that will receive the photo and the photo filename to be loaded.

The code below is using widget v2.0 and assumes that you have inserted your tableView inside a group display (like the one used in the Storyboard).

[lua]

        local function updateRowImage(rowIndex, photoFilename)

                local tableViewObj = group[“tableView”]

                

                local row = tableViewObj._view._rows[rowIndex]                        

                

                local rowImage = display.newImage(photoFilename, system.TemporaryDirectory)

                rowImage:setReferencePoint(display.CenterLeftReferencePoint)

                

                rowImage.x = row.x - ( rowWidth * 0.5 )

                rowImage.y = rowHeight*0.5

                row:insert(rowImage)

                row[“rowImage”] = rowImage

            end

– you need to create a tableView and insert it in a group as below

local widget = require “widget”

local tblView = widget.newTableView(tblViewOptions)

group:insert(tblView)

group[“tableView”] = tblView

[/lua]

Renato

(http://redbeachgames.com/)’ target=’_blank’]Red Beach Games

Try our new game Cut My Puzzle for free for (https://itunes.apple.com/us/app/cut-my-puzzle/id611051498?ls=1&mt=8)’]iOS or (https://play.google.com/store/apps/details?id=com.redbeachgames.cutmypuzzle)’]Android!

 

#5

Great!

But “_view” and “_rows”… These look like undocumented features. Or where are they documented?