[TIMOB-27267] iOS: Image tintColor is not always applied if image is remote
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2019-10-04T18:23:34.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 8.2.1 |
Components | iOS |
Labels | n/a |
Reporter | Hans Knöchel |
Assignee | Vijay Singh |
Created | 2019-07-22T16:56:13.000+0000 |
Updated | 2020-10-13T12:41:21.000+0000 |
Description
When caching a remote image to be used inside a listview, the cached image sometimes does not get properly tinted. We noticed that it inside a list-view, but it also occurs in a normal image-view using tinted remote images.
The fix is to always check for the tint-color before setting the image again, moving it to a helper selector.
Test-cases to reproduce:
*1: Basic*:
/* eslint-disable strict */
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var btn = Ti.UI.createButton({
title: 'Load remote image'
});
var image = Ti.UI.createImageView({
top: 60,
width: 90,
height: 90,
tintColor: 'red',
image: Ti.UI.createView({ backgroundColor: 'gray', width: 270, height: 270 }).toImage()
});
btn.addEventListener('click', function () {
var url = 'https://ss3.4sqi.net/img/categories_v2/food/breakfast_90.png';
var client = Ti.Network.createHTTPClient({
onload: function () {
const blob = client.responseData;
const cachedFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationCacheDirectory, 'icon.png');
cachedFile.write(blob);
image.image = cachedFile.nativePath;
},
onerror: function (e) {
Ti.API.error(e.error);
}
});
client.open('GET', url);
client.send();
});
win.add([ btn, image ]);
win.open();
*2: Advanced (list-view)*:
/* eslint-disable strict */
var win = Ti.UI.createWindow({
title: 'TIMOB-27267',
barColor: 'white',
translucent: false,
backgroundColor: '#fff'
});
var nav = Ti.UI.createNavigationWindow({
window: win
})
var myTemplate = {
childTemplates: [
{ // Image justified left
type: 'Ti.UI.ImageView', // Use an image view for the image
bindId: 'pic', // Maps to a custom pic property of the item data
properties: { // Sets the image view properties
width: 60,
height: 60,
tintColor: 'red',
left: 10
}
},
{ // Title
type: 'Ti.UI.Label', // Use a label for the title
bindId: 'info', // Maps to a custom info property of the item data
properties: { // Sets the label properties
left: 75
}
},
]
};
var list = Ti.UI.createListView({
templates: { 'template': myTemplate },
defaultItemTemplate: 'template'
});
var section = Ti.UI.createListSection();
var cell = {
pic: {
image: Ti.UI.createView({ backgroundColor: 'gray', width: 60, height: 60 }).toImage()
},
info: {
text: 'Titanium rocks!'
}
};
section.items = [cell];
list.sections = [section];
win.add(list);
nav.open();
loadImage();
function loadImage() {
var url = 'https://ss3.4sqi.net/img/categories_v2/food/breakfast_90.png';
var cachedFile = Ti.Filesystem.getFile(Ti.Filesystem.applicationCacheDirectory, 'icon.png');
if (cachedFile.exists()) {
console.log('EXISTS');
setImage(cachedFile.nativePath);
return;
}
var client = Ti.Network.createHTTPClient({
onload: function () {
var blob = client.responseData;
cachedFile.write(blob);
setImage(cachedFile.nativePath);
},
onerror: function (e) {
Ti.API.error(e.error);
}
});
client.open('GET', url);
client.send();
}
function setImage(url) {
var item = section.getItemAt(0);
item.pic.image = url;
section.updateItemAt(0, item);
}
PR(master) - https://github.com/appcelerator/titanium_mobile/pull/11070 PR(8_2_X) - https://github.com/appcelerator/titanium_mobile/pull/11233
FR Passed. Tint color applied successfully to remote images.
Verified On: Mac OS: 10.14.5 SDK: 8.2.1.v20191003075717, 8.3.0.v20191003144543 Appc CLI: 7.1.1 JDK: 1.8.0_162 Node: 10.5.0 Studio: 5.1.4.201909061933 Xcode: 11.0 Device: iPhone X(13.0), iPhone 7Plus(12.3.1)