Hi, I am developing an Android application using Titanium. For changing image on click I used following code. But the problem is that when I click on image it will change only 开发者_StackOverflow社区once (on first click), when I click again it won't show changed image. But in alert it shows the image source is changed. (The changes are not reflecting on screen!!??) Another problem is when I click (the image gets changed), then go on child window and come back. It is not retaining the changes.
var feed_table = Ti.UI.createTableView({minRowHeight:5,hasChild:true});
var data = [];
for (var i=0;i<5;i++)
{
var row = Ti.UI.createTableViewRow({height:'auto',className:"row"});
var username = Ti.UI.createLabel(
{
text:'nilkash',
height:'auto',
font:{fontSize:12, fontFamily:'Helvetica Neue'},
width:'auto',
color:'#000',
textAlign:'left',
top:0,
left:35,
});row.add(username);
var doneCheckbox = Titanium.UI.createImageView(
{
id:'image_'+i,
clickName:'ClickName',
image:'../images/finished-work.png',
width:15,
height:15,
top:32,
left:0,
});row.add(doneCheckbox)
data.push(row);
}
feed_table.setData(data);
feedWin.add(feed_table);
feed_table.addEventListener('click',function(e)
{
if (e.source.clickName == 'ClickName' )
{
if(feed_table.data[0].rows[e.index].children[1].image == '../images/work.png')
{
feed_table.data[0].rows[e.index].children[1].image = '../images/finished-work.png';
}
else if (e.source.clickName == 'ClickName' )
{
feed_table.data[0].rows[e.index].children[1].image = '../images/work.png';
}
}
});
I also used another simple solution just toggling two images.But it also not retaining these changes. Whether it required to again push that changes in to table view? Thanks for help in advance.
I had the same problem. In the end I removed the old image and replaced it with a new one on every click event. That's annoying but I found no other solution. The android part of titanium is quite buggy sometimes.
[update] i modified the old code a little bit:
/* creates our imageView with specific url */
createImage = function(url)
{
var imageView = Ti.UI.createImageView(
{
image:url,
left:0,
top:0,
height:25,
width:25
});
return imageView;
};
/* creates our tableview row with imageView */
addRow = function(_args)
{
var row = Ti.UI.createTableViewRow(
{
height:'auto',
className:"row"
});
var username = Ti.UI.createLabel(
{
text: _args.text || 'user name',
height:'auto',
font:{fontSize:12, fontFamily:'Helvetica Neue', color:'#000'},
width:'auto',
color:'#000',
textAlign:'left',
top:0,
left:35,
});
row.add(username);
/* create initial imageview */
var imageView = createImage(_args.image);
row.add(imageView);
/* custom function to set image */
row.setImage = function(image_url)
{
/* remove the old image */
row.remove(imageView);
imageView = null;
/* add new image */
imageView = createImage(image_url);
row.add(imageView);
};
row.addEventListener('click',function(e)
{
/* on click replace the image */
row.setImage('new/image/path');
};
return row;
}
var user_table = Ti.UI.createTableView({minRowHeight:5.length,hasChild:true});
var data = [];
for (var i=0;i<5.length;i++)
{
var newRow = addRow({
text: 'my text',
image: 'my image url'
});
data.push(newRow);
}
feed_table.setData(data);
feedWin.add(feed_table);
I prefer to use use a createView with a background image, it works fine. I use it to simulate CheckBoxes
and I have no problems.
Please remove your Ti.UI.SIZE in TableView and TableViewRow both height and width... It will work.
精彩评论