Adding Multiple Images in TableRows in Grid form

You must Login before you can answer or comment on any questions.

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();

— answered 10 months ago by Ashutosh Chaturvedi
answer permalink
2 Comments
  • did this example works for you?

    — commented 10 months ago by Ashutosh Chaturvedi

  • I have also viewed this example and make suitable changes but when I click on a row window on which I have created grid layout is not displayed . I have given my code above

    — commented 10 months ago by Nadeem Mughal

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.

— answered 10 months ago by Anthony Decena
answer permalink
4 Comments
  • Thnx Anthony . I have done as you said but i am not able to see images in grid form. I have created a window in which i have created a table and i m showing the images in that table . but when i click the row in previous window no window opens this is my code. row.addEventListener('click', function(){

            var imgwin=Titanium.UI.createWindow({url:&quot;imagewin.js&quot;});
             imgwin.open();
    
         });
    

    imagewin.js file has following code.

    var imgwin = Ti.UI.currentWindow;

    var cellWidth = 92; var cellHeight = 92; var xSpacer = 10; var ySpacer = 10; var xGrid = 3; var yGrid = 4;

    var tableData = [];

    var cellIndex = 0; var i=0; var controlldemo = [{image:'controlled demolition\Close up photo of pressure pulse'}, {image:'controlled demolition\Close up photo of lateral explosions'}, {image:'controlled demolition\Lateral explosions seen during demolition [2]'}, {image:'controlled demolition\Lateral explosions seen during demolition'}, {image:'controlled demolition\Molten steel appearing minutes before onset of destruction'}, {image:'controlled demolition\Molten Steel Dripping from WTC 2'}, {image:'controlled demolition\WTC 7 Demolition [1]'}, {image:'controlled demolition\WTC 7 Demolition [2]'}, {image:'controlled demolition\WTC 7 Demolition [3]'}, {image:'controlled demolition\WTC 7 Demolition [4]'},

    ];

    for (var y=0; y<yGrid; y++){ var thisRow = Ti.UI.createTableViewRow({ className: "grid", layout: "horizontal", height: cellHeight+(2*ySpacer), backgroundColor:"balck" }); if(y==1){

        xGrid= xGrid+3;
    }
    else if(y==2){
    
        xGrid= xGrid+6;
    }
    for (var x=i; x&lt;xGrid; i++){
        var conimages = Ti.UI.createImageView({
            //objName:&quot;image-grid-view&quot;,
            //objIndex:cellIndex.toString(),
            url: controlldemo[x].image,
            left: ySpacer,
            height: cellHeight,
            width: cellWidth
        });
    
    
        //thisView.add(thisLabel);
        thisRow.add(conimages);
        cellIndex++;
    
    }
    tableData.push(thisRow);
    

    } var tableview = Ti.UI.createTableView({ data:tableData });

    imgwin.add(tableview)

    — commented 10 months ago by Nadeem Mughal

  • You've mentioned a couple times now that you don't see images in grid form, but that can mean so many things. How about posting 2 screenshots. One screenshot of what you are actually seeing and a second screenshot of how you want it to look.

    — commented 10 months ago by Anthony Decena

  • Also, are your images even showing displaying? The images in your array have names with spaces in them, no file extensions, and backslashes instead of forward slashes as the directory separator like a local Windows directory. I've not tested this, but I can't see how any of that would work.

    — commented 10 months ago by Anthony Decena

  • Show 1 more comment

Your Answer

Think you can help? Login to answer this question!