Прикрепление прослушивателя событий

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

Вы также можете применить прослушиватель событий к самому «представлению».Причина в том, что если вы постоянно добавляете один и тот же прослушиватель событий для каждого отдельного представления, вы заставите память устройства становиться все меньше и меньше, особенно в тех случаях, когда у вас будет больший набор данных.Я предлагаю вам следующее: добавьте свое собственное свойство в imageView, например, «id» или что-то в этом роде.Так что-то вроде:

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

После того, как вы это сделаете, вы можете добавить прослушиватель событий в родительское представление, в данном случае ваше imageView.один прослушиватель событий, который может обрабатывать все события imageView.

Answer 2

Я добавляю некоторую строку кода. То, что я сделал, это как создал сетку изображений, и когда вы нажмете, вы сможете получить это изображение.

{ "тело": [ { "тип": "фото", «заказ»: 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", "фото": "http://www.flower.comversion_2.0/files/photos/1368715237-_-1337463149.jpg" }, ] }, ], «статус»: правда

}

Это был ответ, который я получал от сервера.

Теперь, чтобы сделать это в сетке и для кликабельного изображения, я собираюсь вставить код ниже. Сетка для заметок сделана для ширины 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;


}          }   });

Answer 3

Это на мне.В процессе обучения я использовал несколько различных решений для отображения сетки значков.В одной из ранних итераций мне пришлось отключить касание для строки (это была попытка tableView).Несколько итераций спустя я получил правильное отображение, но отключение сенсорного доступа к строке убило мою способность «щелкать» значки.на месте, пока новый набор глаз не указал мне на это.Как только я удалил это свойство в thisRow, слушатели событий были привязаны правильно.