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

これは私にあります。学習プロセスでは、アイコンのグリッドを表示するためにいくつかの異なるソリューションを実行しました。初期の反復の1つで、行のタッチを無効にする必要がありました(これはtableView試みでした)。数回繰り返した後、表示は正しくなりましたが、行のタッチアクセスを無効にすると、アイコンを「クリック」する機能が失われました。

私は道をはるかに下っていたので、新しい目が私にそれを指摘するまで、私は財産がまだ残っていることにさえ気づいていませんでした。でそのプロパティを削除するとthisRow、イベントリスナーは適切にバインドされました。

于 2011-10-28T17:54:24.963 に答える
0

イベントリスナーを「ビュー」自体に適用することもできます。その理由は、すべてのビューに同じイベントリスナーを常に追加すると、特にデータセットが大きい場合に、デバイスのメモリがどんどん小さくなっていくためです。

あなたへの私の提案はこれです:「id」か何かのようなあなた自身のプロパティをimageViewに追加してください。だから次のようなもの:

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

これが完了したら、イベントリスナーを親ビュー(この場合はimageView)に追加できます。

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

このようにして、すべてのimageViewイベントを処理できる1つのイベントリスナーがあります。

于 2011-10-31T16:21:04.247 に答える
0

コードをいくつか追加しています。私がやったことは、画像のグリッドを作成するようなもので、クリックするとその画像を表示できるようになります。

{"body":[{"type": "photo"、 "order":1、 "photos":[{"thumbnail": "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/ photos / 58062938 -_-1337463040.jpg "}、{"サムネイル ":" 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 "}、]}、]、"ステータス ":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 に答える