Image Buttons layout replicating iOS "home" app icon pages

techpulsesoftware · June 19, 2014, 6:42pm

I need to display images so that they mimic the layout of iOS app icons on the various “home” pages. I have the code written to display the various images; however, I cannot figure out how to return a value which corresponds with each individual image on a click event. So basically, when a user clicks an image, an alert should popup and say: "You clicked: "…imageNumber. The problem is, how do I get the value of the clicked image (i.e. imageNumber)? The image file links will be in the form of a json table, so the number of images is unknown.

Here’s my code so far:

&nbsp; &nbsp; &nbsp; &nbsp; plates = { "fat-burning-foods.jpg", "fresh\_food.jpg", "fat-burning-foods.jpg", "star.png", "fat-burning-foods.jpg", "star.png", "fat-burning-foods.jpg", "fresh\_food.jpg", "fat-burning-foods.jpg", "star.png", "fat-burning-foods.jpg", "fresh\_food.jpg", "fat-burning-foods.jpg", "star.png" } &nbsp; &nbsp; -- The PlateId will have corosponding indexes with the plates array. It will be used to query plate information&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plateId = {1,2,3,4} &nbsp; &nbsp; plateIdRef = {} &nbsp; &nbsp; index = 1 &nbsp; &nbsp; platesIsh = {1,2,3,4,5,6,7,8} &nbsp; &nbsp; local anX = 20 &nbsp; &nbsp; local anY = 120 &nbsp; &nbsp; for i=1, #plates do &nbsp; &nbsp; &nbsp;local bufferY = 20 &nbsp; &nbsp; &nbsp;if index == 4 then bufferY = 110 anX = 20 elseif index \> 4 then bufferY = 110 end if index == 7 then bufferY = 200 anX = 20 elseif index \> 7 then bufferY = 200 if index == 10 then bufferY = 290 anX = 20 elseif index \> 10 then bufferY = 290 &nbsp; &nbsp; end end &nbsp; &nbsp; &nbsp; &nbsp; local dummyVar = math.random() &nbsp; &nbsp; dummyVar = display.newImageRect(plates[index],80, 80) &nbsp; &nbsp; sceneGroup:insert(dummyVar) &nbsp; &nbsp; dummyVar.x = anX + 30 &nbsp; &nbsp; dummyVar.y = anY + bufferY &nbsp; &nbsp; table.insert(plateIdRef, index) &nbsp; &nbsp; function dummyVar:touch( event ) &nbsp; &nbsp; if event.phase == "began" then local alert = native.showAlert( "Corona", event.target, { "OK", "Learn More" } ) &nbsp; &nbsp; &nbsp; &nbsp; --print( "You touched "..dummyVar) &nbsp; &nbsp; &nbsp; &nbsp; return true &nbsp; &nbsp; end &nbsp; &nbsp; &nbsp; &nbsp; end &nbsp; &nbsp; &nbsp; &nbsp; dummyVar:addEventListener( "touch", dummyVar ) &nbsp; &nbsp; anX = anX + 110 &nbsp; &nbsp; index = index + 1 &nbsp; &nbsp; end

Any ideas?

bjsorrentino · June 19, 2014, 9:32pm

Hi @techpulsesoftware,

The following guide should help you on this topic. Basically, when detecting a tap or touch, you can read the “event.target” in the listener function, which is a reference to the display object that was tapped. So, you can simply assign a property (variable) to each specific image, like “thisImage.imageNumber = 3” and then, when tapped, you just read “event.target.imageNumber” to get the corresponding number or any other custom property you’ve assigned to it.

http://docs.coronalabs.com/guide/events/touchMultitouch/index.html

Hope this helps,

Brent

ksan · June 19, 2014, 10:19pm

Take a look at the Business App Sample published on Corona Labs GitHub page. There is a neat Photo Viewer built into that sample. It presents thumbnail images for the photos in the library and when you tap on a thumbnail it brings you to a full page image display. So in your application the icons are the thumbnails in the Business App Sample. I think you can use the code in that app almost as is for your purposes or it should get you very close to where you need to be. Hope this helps.

bjsorrentino · June 19, 2014, 9:32pm