Question

我刚刚创建了一个精心生成的图标网格（imageViews），现在我需要能够用它们做点什么。但是，我发现，我正在尝试绑定的事件监听器没有受到限制。窗口加载，我的图标显示得很好，但它们不可点击。

任何人都能看到我错过的东西吗？下面的代码是一个功能齐全的（除了不起作用的部分）文件。您应该能够将其复制到测试应用程序中并将其加载（目前可能仅限iPhone）。

非常感谢任何见解。

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Ti.UI.setBackgroundColor('#000');

//
// create base UI tab and root window
//
var win = Ti.UI.createWindow({  
    backgroundColor:'#fff',
    layout: 'vertical',
    navBarHidden: true,
});

// icon grid
var icons = [
    { image: '/images/ico_generic.png', label: 'Hospital Locations', url: 'http://google.com' },
    { image: '/images/ico_generic.png', label: 'Tobacco Free Campus', url: 'http:://robwilkerson.org' },
    { image: '/images/ico_generic.png', label: 'ER Wait Times', url: 'http://letmegooglethatforyou.com' },
    { image: '/images/ico_generic.png', label: 'Make a Donation', url: 'http://flickr.com/photos/robwilkerson' },
    { image: '/images/ico_generic.png', label: 'Condition Search', url: 'http://facebook.com' },
    { image: '/images/ico_generic.png', label: 'Video Library', url: 'http://google.com/reader' },
    { image: '/images/ico_generic.png', label: 'Financial Help', url: 'http://stackoverflow.com' },
    { image: '/images/ico_generic.png', label: 'Patient Forms', url: 'http://github.com' }
];

// put the grid in a scrollable view
var iconGrid = Ti.UI.createScrollView({
    layout: 'vertical',
});

// incoming properties we want customizable
var cols    = 3;
var icoW    = 57;
var icoH    = 57;

// Grid
var xSpacer    = 10; // horizontal space b/t icons
var ySpacer    = 10; // vertical space b/t icons
var rows       = Math.ceil( icons.length / cols ); // how many rows?
// Container width = 1/3 of the viewport minus the icon widths and spacers
var containerW = Math.floor( ( Ti.Platform.displayCaps.platformWidth - ( xSpacer * ( cols + 1 ) ) ) / 3 );
// Container height = icon height + label spacer + label height
var containerH = icoH + ySpacer + 15;
// Row height = icon height + top spacer + bottom spacer + label spacer + 15 (label height)
var rowH       = containerH + ( 2 * ySpacer );

// Incrementing values
var i = 0;
var viewHeight = 0;

for( var y = 0; y < rows; y++ ) {
    var thisRow = Ti.UI.createView({
        className: 'grid',
        layout: 'horizontal',
        height: rowH,
        touchEnabled: false,
    });

    viewHeight += rowH;

    for( var x = 0; x < cols && i < icons.length; x++ ) {
        var container = Ti.UI.createView({
            left: xSpacer,
            height: containerH,
            top: ySpacer,
            width: containerW,
        });
        var icon = Ti.UI.createImageView({
            left: ( containerW - icoW ) / 2,
            height: icoH,
            image: icons[i].image,
            top: 0,
            width: icoW,
        });
        var label = Ti.UI.createLabel({
            // borderColor: '#00f',
            font: { fontSize: 12 },
            height: 15,
            text: icons[i].label,
            textAlign: 'center',
            top: icoH + ySpacer,
            width: containerW,
        });

        icon.addEventListener( 'click', function( e ) {
            alert( 'Icon ' + i + ' was clicked' );d
        });

        container.add( icon );
        container.add( label );
        thisRow.add( container );
        i++;
    }

    iconGrid.add( thisRow );
    iconGrid.height = viewHeight;
}

win.add( iconGrid );
win.open();

Answer 1

这个是关于我的。在我的学习过程中，我经历了几个不同的解决方案来显示图标网格。在其中一个早期迭代中，我不得不禁用该行的触摸（这是tableView尝试）。几次迭代之后，我得到了正确的显示，但禁用了行上的触摸访问，这使我无法“点击”图标。

我到目前为止，我甚至没有意识到财产仍然存在，直到有一双新的眼睛指向我。一旦我在thisRow上删除了该属性，事件侦听器就会被正确绑定。

Answer 2

您还可以将事件侦听器应用于“视图”本身。原因是，如果你经常为每个视图添加相同的事件监听器，你将导致设备的内存变得越来越小，特别是在你有更大数据集的情况下。

我的建议是：将您自己的属性添加到imageView，如“id”或其他内容。如下所示：

Ti.UI.createImageView({image: 'path/to/image.png', id: 'array_key'});

完成后，您可以向父视图添加事件侦听器，在本例中为imageView。

view.addEventListener('click', function(e) {
   alert(e.source.id + ' was clicked');
});

这样你就有了一个可以处理所有imageView事件的事件监听器。

Answer 3

我正在添加一些代码。我所做的就像创建了图像网格，当你点击时，你就可以看到那个图像。

{       “身体”： [           {               “type”：“photo”，               “订单”：1，               “相片”： [                   {                       “thumbnail”：“http://www.flower.com/version_2.0/files/photos/thumbnails/745178756-_-1331130219.jpg”，                       “照片”：“http://www.flower.com/version_2.0/files/photos/745178756-_-1331130219.jpg”                   }，                   {                       “thumbnail”：“http://www.flower.com/version_2.0/files/photos/thumbnails/58062938-_-1337463040.jpg”，                       “照片”：“http://www.flower.com/version_2.0/files/photos/58062938-_-1337463040.jpg”                   }，                   {                       “thumbnail”：“http://www.flower.com/version_2.0/files/photos/thumbnails/1368715237-_-1337463149.jpg”，                       “photo”：“http：//www.flower.comversion_2.0/files/photos/1368715237-_-1337463149.jpg”                   }，                ]           }，       ]       “status”：true

}

这是我从服务器获得的回复。

现在，为了使它在网格和可点击的图像中，我将粘贴下面的代码。注意网格的宽度为320像素。

var xhr = Ti.Network.createHTTPClient（{ onload：function（e）{

  var response = JSON.parse(this.responseText);
  var myObjectString = JSON.stringify(response);
  Titanium.API.info('myObjectString--->: ' + myObjectString) 
    var myArray = response.body; 
    var objectArray = [];
  var k = 5;  
for (var i = 0; i < myArray[0].photos.length/5; i++)         { 
                  var l = 0+i*5;          var m = 0           for (var j = l; j < k; j++)             {

                  var thumb = Ti.UI.createImageView({  
                      image:myArray[0].photos[j].thumbnail, 
                      largeImage:myArray[0].photos[j].photo,
                      height:60,
                      tag:j,
                      width:60, 
                      top:5*(i+1)+60*i,
                      left:3*(m+1)+60*m, 
                  });
                  objectArray.push(thumb);
                   m++;
                  scroll.add(thumb); 
                  thumb.addEventListener('click' ,function(e)
                   {

                       for(var i =0;i<objectArray.length;i++)
                       {
                          if(e.source.tag==objectArray[i].tag)
                          {

                              var LargeImageView = Ti.UI.createWindow({
                              backButtonTitle:'Image',
                              barColor:'#000',
                              backgroundColor: '#fff',
                              backgroundImage:'./Images/background.png',
                              url:'/More/DetailsImage.js',
                              image:objectArray[i].largeImage,
                              ImageArray:objectArray,
                              index:i,
                              });              
                              Titanium.UI.currentTab.open(LargeImageView,{animated:true,modal:true});
                              break;                                  
                          }
                       }



                  });             }           l=k+5;          k=k+5;


}          }   });

附加事件监听器

3 个答案: