I want to add multiple images in table rows 3 images each row and when i click on an image it should be displayed in fullscreen please help me how can i do this using tableview, imageView and tableViewRow. I am targeting Android 2.1 or above. Working on windows 7 x64. Many thanx in Advance it would be very kind if someone ans me..
3 Answers
Accepted Answer
Hi Nadeem, this example will help you a lot
// to fit in a 320-wide space var cellWidth = 92; var cellHeight = 92; var xSpacer = 10; var ySpacer = 10; var xGrid = 3; var yGrid = 12; var tableData = []; var colorSet = [ "#D44646", "#46D463", "#46D4BE", "#C2D446", "#D446D5", "#4575D5", "#E39127", "#879181", "#E291D4" ]; var colorSetIndex = 0; var cellIndex = 0; for (var y=0; y<yGrid; y++){ var thisRow = Ti.UI.createTableViewRow({ className: "grid", layout: "horizontal", height: cellHeight+(2*ySpacer), selectedBackgroundColor:"red" }); for (var x=0; x<xGrid; x++){ var thisView = Ti.UI.createView({ objName:"grid-view", objIndex:cellIndex.toString(), backgroundColor: colorSet[colorSetIndex], left: ySpacer, height: cellHeight, width: cellWidth }); var thisLabel = Ti.UI.createLabel({ color:"white", font:{fontSize:48,fontWeight:'bold'}, text:cellIndex.toString(), touchEnabled:false }); thisView.add(thisLabel); thisRow.add(thisView); cellIndex++; colorSetIndex++; if( colorSetIndex === colorSet.length ){ colorSetIndex = 0; } } tableData.push(thisRow); } var tableview = Ti.UI.createTableView({ data:tableData }); tableview.addEventListener("click", function(e){ if(e.source.objName){ Ti.API.info("---> " + e.source.objName+e.source.objIndex + " was clicked!"); } }); var win = Ti.UI.createWindow({ backgroundColor:"black", navBarHidden:false, title:"Main Window" }); win.add(tableview); win.open();
When creating your rows, if you set the layout property of each row view to horizontal, the images will stack from left to right. Each image will be its own image view, so you can listen for click events on each image to display the fullscreen version of that image.
HI Here is the link which will guide you to build custom rows. and you can modified it to achieve your goal hope that helps. http://iosmuncher.blogspot.in/2012/04/learning-commonjs-building-custom.html
Your Answer
Think you can help? Login to answer this question!