When you call the deleteItemsAt function on a ListViewSection with animation enabled, you get some clipping on the lower element that is moving upwards.
var win = Ti.UI.createWindow({backgroundColor: 'white'});
var sections = [];
var template = {
childTemplates: [
{
type: 'Ti.UI.View',
class: 'itemContainer' ,
properties: {
backgroundColor: "#EEE"
},
childTemplates: [
{
type: 'Ti.UI.View',
id: 'iconWrapper' ,
properties: {
top:10,
left:15,
height: 60,
width: 60,
backgroundColor: "#fff",
touchEnabled:false
},
childTemplates: [
{
type: 'Ti.UI.ImageView',
bindId: 'pic',
id: 'icon' ,
properties: {
width: 30,
height: 30
}
},
],
},
{
type: 'Ti.UI.View',
id: 'detailWrapper' ,
properties: {
top:10,
left:85,
height: Ti.UI.FILL,
right: 15,
backgroundColor: "#fff"
},
childTemplates: [
{
type: 'Ti.UI.View',
id: 'hiddenView' ,
properties: {
backgroundColor: "#0196D7",
touchEnabled:false
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'hiddenLbl',
id: 'hiddenLbl',
properties: {
width:200,
height: Ti.UI.FILL,
color: "#fff",
textAlign:"left",
font: {fontFamily: "Arial", fontSize: 14},
}
},
],
},
{
type: 'Ti.UI.View',
id: 'detailView' ,
properties: {
backgroundColor: "#fff",
left:0,
width: 220
},
events: {
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'title',
id: 'title',
properties: {
color: 'black',
font: { fontFamily:'Arial', fontSize: 14, fontWeight:'bold' },
left: 10,
top: 10,
width: 200
}
},
{
type: 'Ti.UI.Label',
bindId: 'subtitle',
id: 'subtitle',
properties: {
color: 'black',
font: { fontFamily:'Arial', fontSize: 10 },
left: 10,
top: 30,
width: 200
}
},
{
type: 'Ti.UI.Label',
bindId: 'meta',
id: 'meta',
properties: {
color: 'gray',
font: { fontFamily:'Arial', fontSize: 10 },
left: 10,
top: 45,
width: 200
}
},
{
type: 'Ti.UI.View',
id: 'buttonWrapper' ,
properties: {
width: 40,
height: Ti.UI.FILL,
right:0,
backgroundColor:"#fbfbfb"
},
events: {
click: function (_evt){
if(_evt.source.parent){
var hiddenLbl = _evt.source.parent.parent.children[0].children[0];
Ti.API.info('click hiddenLbl '+(hiddenLbl));
hiddenLbl.applyProperties({
text: "You have added it!",
textAlign: "center"
});
_evt.source.parent.animate({
left: 200,
duration: 250
}, function(){
_evt.source.parent.parent.parent.animate({
opacity: 0.0,
duration: 500
},function(){
var section = listView.sections[_evt.sectionIndex];
section.deleteItemsAt(_evt.itemIndex, 1, false);
});
});
}
}
},
childTemplates: [
{
type: 'Ti.UI.Label',
bindId: 'rightButton',
id: 'rightButton',
properties: {
color: "#999",
borderColor:"#999",
borderWidth: 3,
borderRadius:15,
width:30,
height: 30,
font: {fontFamily: "Arial", fontSize: 25},
textAlign:"center",
touchEnabled: false
}
},
],
},
],
},
],
},
],
},
]
};
var listView = Ti.UI.createListView({
templates: { 'template': template },
defaultItemTemplate: 'template',
});
var listSection = Ti.UI.createListSection();
var ListItem = [
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
{title:{text:'Appcelerator'}, subtitle:{text:'Mobile Software'}, meta:{text:'25077 followers'}, hiddenLbl:{text:'Slide >'}, pic:{image:'/images/corejs.png'}, rightButton:{text:'+' },properties: { top:5,
height: 70,
backgroundColor: "#EEE"}},
];
listSection.setItems(ListItem);
sections.push(listSection);
listView.setSections(sections);
win.add(listView);
win.open();
- Create a folder named "images" in the Resource directory
- Put the "corejs.png" image to the folder
- Run the app in iOS Device
Click on the "+" sing of any row ( on the right side ) to delete that row. Doing so the row below that, will move upward.
The lower row should come straight to the top, not suppose to flick and then appear.
I am unable to reproduce this issue with the latest SDK 6.0.3.GA. There has been a lot of progress since then, so probably this side-effect has been fixed without knowing.