0

我刚刚创建了一个精心生成的图标网格(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();
4

3 回答 3

0

您还可以将事件侦听器应用于“视图”本身。原因是,如果您不断地向每个视图添加相同的事件侦听器,您将导致设备的内存变得越来越小,尤其是在您拥有更大数据集的情况下。

我对您的建议是:将您自己的属性添加到 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 事件的事件侦听器。

于 2011-10-31T16:21:04.247 回答
0

我正在添加一些代码行。我所做的就像创建了图像网格,当您单击时,您将能够看到该图像。

{“正文”:[{“类型”:“照片”,“订单”:1,“照片”:[{“缩略图”:“http://www.flower.com/version_2.0/files/photos/缩略图/745178756-_-1331130219.jpg", "照片": "http://www.flower.com/version_2.0/files/photos/745178756-_-1331130219.jpg" }, { "缩略图": " http://www.flower.com/version_2.0/files/photos/thumbnails/58062938-_-1337463040.jpg", "照片": "http://www.flower.com/version_2.0/files/照片/58062938-_-1337463040.jpg" }, { "缩略图": "http://www.flower.com/version_2.0/files/photos/thumbnails/1368715237-_-1337463149.jpg", "照片": "http://www.flower.comversion_2.0/files/photos/1368715237- _-1337463149.jpg" }, ] }, ], "状态": 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;


}          }   });
于 2012-06-28T07:04:32.493 回答
0

这个在我身上。在我的学习过程中,我经历了几种不同的解决方案来显示图标网格。在早期的一次迭代中,我不得不禁用该行的触摸(这是一种tableView尝试)。几次迭代后,我得到了正确的显示,但是禁用行上的触摸访问会杀死我“单击”图标的能力。

我走得太远了,我什至没有意识到财产仍然存在,直到有一双新的眼睛向我指出。一旦我在 上删除该属性thisRow,事件侦听器就会正确绑定。

于 2011-10-28T17:54:24.963 回答