Tableview overlay when filtered by a searchbar
Recently I've noticed that one my windows, which contained a tableview and a searchbar on top, wasn't working properly.
After some testing and source code commenting, I've realized that a tableview, if the backgroundColor is set to 'transparent', when searching/filtering the rows (with a SearchBar), titanium overlays the table with a new one (filtered), but since its set to be transparent, user sees both tables. The result can be seen on the image and video links below:
And here is the window source:
// set some variables to work with flickr
var api_key = '', // my key => CHANGE TO LMP'S
user_id = '26142469%40N02'; // LMP flickr id
// reference to current window
var win = Titanium.UI.currentWindow;
// create table view
var search = Titanium.UI.createSearchBar({
hintText: "Search album title",
barColor:'#0055ad'
});
var tableview = Titanium.UI.createTableView({
backgroundColor:'transparent',
separatorStyle: Titanium.UI.iPhone.TableViewSeparatorStyle.NONE,
search:search
});
var navActInd = Titanium.UI.createActivityIndicator();
navActInd.show();
win.setRightNavButton(navActInd);
var yql_query = 'select * from xml where url="http://api.flickr.com/services/rest/?method=flickr.photosets.getList&api_key='+api_key+'&user_id='+user_id+'"';
Ti.API.debug(yql_query);
Titanium.Yahoo.yql(yql_query, function(e)
{
var images = [];
var data = e.data;
for (var i=0; i< data.rsp.photosets.photoset.length; i++)
{
var photoset = data.rsp.photosets.photoset[i];
// form the flickr url
var url = 'http://farm' + photoset.farm + '.static.flickr.com/' + photoset.server + '/' + photoset.primary + '_' + photoset.secret + '_m.jpg';
var row = Ti.UI.createTableViewRow({
className: 'pictureRow',
height: 60,
selectedBackgroundColor:'#dddddd',
backgroundImage: '../images/tableviewRow_bg.png',
color:"transparent",
title: photoset.title ? photoset.title : "Untitled",
visible:false,
hasChild: photoset.photos ? true : false,
photoset_id: photoset.id
});
var row_title = Ti.UI.createLabel({
left:70,
right:10,
textAlign:'left',
height:40,
top: 5,
shadowColor:'#555',
shadowOffset:{x:1,y:1},
color:'#fff',
font:{fontWeight:'bold',fontSize:13},
text:photoset.title ? photoset.title : "Untitled"
});
var count = Ti.UI.createLabel({
left:70,
right:10,
textAlign:'left',
height:10,
bottom: 5,
color: '#b40000',
font:{fontSize:10},
amount: photoset.photos,
text: photoset.photos + " pictures"
});
var image;
if (Titanium.Platform.name == 'android')
{
// iphone moved to a single image property - android needs to do the same
image = Ti.UI.createImageView({
url : url,
height:50,
width:50,
left:10,
defaultImage:'../modules/ui/images/photoDefault.png'
});
}
else
{
image = Ti.UI.createImageView({
image : url,
height:50,
width:50,
left:10,
defaultImage:'../modules/ui/images/photoDefault.png'
});
}
row.add(image);
row.add(row_title);
row.add(count);
images.push(row);
Titanium.API.debug('Set: '+i+' Title: '+row_title);
}
tableview.setData(images);
navActInd.hide();
});
// create table view event listener
tableview.addEventListener('click', function(e)
{
Titanium.API.debug(e.row.children[2].amount);
if (e.row.children[2].amount > 0)
{
var winPictures = Titanium.UI.createWindow({
title:'Party Pictures',
backgroundColor:'#000',
barColor:'#000',
extraData: e,
url:'pics_selected.js'
});
Titanium.UI.currentTab.open(winPictures, {animated:true});
}
});
win.add(tableview);
6 Answers
-
Any plan on sharing your solution? I'm having the same problem!
-
I ran into this problem today, the solution is to set a backgroundImage or a backgroundColor of the table you're filtering instead of having it set to 'transparent' to avoid the overlay of tableView rows.
-
i had the same problem wen i used the tableview…
i dont think it might be much of a help to you, However re-initializing will solve the probem.
i've tried this and it worked…..
i mean inside the for loop use:
if(tableview){
window.remove(tableview);tableview = Titanium.UI.createTableView({ backgroundColor:'transparent', separatorStyle: Titanium.UI.iPhone.TableViewSeparatorStyle.NONE, search:search }); }
i hope this helps you !!!!!!
-
This appears to be a bug in the redrawing of TableViews with background images when filtered using a search bar.
Setting the table view backgroundColor:'black' hides the mess, but is there a better workaround?
-
Ola Marco, can you send me an email at : armindodasilva at neuf dot fr
RegardsArmindo
-
Ola Marco,
any plan to share your "selected.js" file?
Thanks
Armindo