[TIMOB-14904] ListView: iOS is not setting Ti.UI.SIZE for the UI elements
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | High |
| Status | Closed |
| Resolution | Invalid |
| Resolution Date | 2013-08-27T09:09:29.000+0000 |
| Affected Version/s | Release 3.1.1, Release 3.1.2 |
| Fix Version/s | 2013 Sprint 19, 2013 Sprint 19 API |
| Components | iOS |
| Labels | n/a |
| Reporter | Radamantis Torres-Lechuga |
| Assignee | Vishal Duggal |
| Created | 2013-08-16T23:07:42.000+0000 |
| Updated | 2017-03-09T19:05:07.000+0000 |
Description
While working with a ListView, in the template definition the customer is using heights defined by Ti.UI.SIZE, the listView looks compressed and is not getting the correct space to draw the UI components.
The expected behavior is the same as android, using the test case on android, the ListView shows correctly
Attaching screen shots
test case:
var myTemplate = {
childTemplates: [
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'emptyView', // Maps to a custom es_info property of the item data
properties: { // Sets the label properties
color: "red",
height: Ti.UI.SIZE,
top:10, height:20
}
},
{ // Title
type: 'Ti.UI.ImageView', // Use a label for the title
bindId: 'productImage', // Maps to a custom info property of the item data
properties: { // Sets the label properties
color: "red",
left: 0, height: 90, width: 90
}
},
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'prodTitle', // Maps to a custom es_info property of the item data
properties: { // Sets the label properties
color: "red",
height: Ti.UI.SIZE,
top: 10,
left:100,
font: {
fontSize: 14,
fontFamily: "arial"
}
}
},
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'serves', // Maps to a custom es_info property of the item data
properties: { // Sets the label properties
color: "#D0AB77",
font: {
fontSize: 14,
fontFamily: "arial"
},
height: Ti.UI.SIZE,
top:30,
left: 110
}
},
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'prodPrice', // Maps to a custom es_info property of the item data
properties: { // Sets the label properties
color: "#D0AB77",
font: {
fontSize: 14,
fontFamily: "arial"
},
height: Ti.UI.SIZE,top:50,
}
},
{ // 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
layout:'horizontal',height: Ti.UI.SIZE,top:53, left: 190
}
},
{ // Image justified left
type: 'Ti.UI.ImageView', // Use an image view for the image
bindId: 'pic1', // Maps to a custom pic property of the item data
properties: { // Sets the image view properties
height: Ti.UI.SIZE,top:53,left: 200
}
},
{ // Image justified left
type: 'Ti.UI.ImageView', // Use an image view for the image
bindId: 'pic2', // Maps to a custom pic property of the item data
properties: { // Sets the image view properties
height: Ti.UI.SIZE,top:53,left: 210
}
},
{ // Image justified left
type: 'Ti.UI.ImageView', // Use an image view for the image
bindId: 'pic3', // Maps to a custom pic property of the item data
properties: { // Sets the image view properties
height: Ti.UI.SIZE,top:53,left: 220
}
},
{ // Image justified left
type: 'Ti.UI.Button', // Use an image view for the image
bindId: 'Buy', // Maps to a custom pic property of the item data
properties:{
backgroundImage: '/images/buy.png',
title: 'Buy',
color: '#fff2d8',
width: 40,
height: 20,
top:50,
left:100,
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
}
},
{ // Subtitle
type: 'Ti.UI.Label', // Use a label for the subtitle
bindId: 'nickname', // Maps to a custom es_info property of the item data
properties: { // Sets the label properties
color: "red",
font: { fontFamily:"arial", fontSize: 14,borderColor: "#cba77a",color:"blue" },
left: 10,height: 'auto', top:60, bottom:10
}
}
]
};
var listView = Ti.UI.createListView({
templates: { 'template': myTemplate },
defaultItemTemplate: 'template',
height:'70%',top:'19%'
});
var sections = [];
var fruitSection = Ti.UI.createListSection();
var data = [];
var length = 7;
for (var i = 0; i < length; i++) {
data.push({
productImage: {image : "/images/apple.png"},
prodTitle: {text: "ProductTitle"},
serves: {text: "Serves NumberOfServings"},
prodPrice: {text: " $ProductPrice"},
Buy:{text: "Buy"},
pic: {image: '/images/star.png'},
pic1: {image: '/images/star.png'},
pic2: {image: '/images/star.png'},
pic3: {image: '/images/star.png'}
});
}
fruitSection.setItems(data);
sections.push(fruitSection);
listView.setSections(sections);
$.win.add(listView);
$.win.open();
Attachments
| File | Date | Size |
|---|---|---|
| device-2013-08-16-155726.png | 2013-08-16T23:07:42.000+0000 | 76085 |
| Screen Shot 2013-08-16 at 3.56.59 PM.png | 2013-08-16T23:07:42.000+0000 | 61794 |
For now, they need to set the size specifically on iOS, as we don't yet support dynamic row heights. See related ticket for that fix.
The default behavior of ListItem on IOS is not SIZE for height. When height is not specified either in the template or in the data, the height is default value (44 dip). Add properties:{height:90} either to the template or the data to render the full image correctly. 90 because that is the largest element in your template.
Closing ticket as invalid.