konstantinbueschel
11/4/2015 - 7:38 AM
Example of a custom delete animation for Appcelerator ListView component using straight Ti - no module required.
Example of a custom delete animation for Appcelerator ListView component using straight Ti - no module required.
<Alloy>
<Window backgroundColor="white">
<ListView id="listView" defaultItemTemplate="template" onItemclick="onItemClick">
<!-- The Templates tag sets the ListView's templates property -->
<Templates>
<!-- Define your item templates within the Templates tags or use the
Require tag to include a view that only contains an ItemTemplate -->
<ItemTemplate name="template">
<View id="rowWrapper">
<Label bindId="info" id="title"/>
<Label bindId="es_info" id="subtitle" />
</View>
</ItemTemplate>
<!-- Animation Cell Tempaltes -->
<ItemTemplate name="deleted_0">
<View id="background" backgroundColor='red' left="0">
<Label bindId="info" id="title"/>
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_1">
<View id="background" backgroundColor='red' left="-3" opacity="0.9">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_2">
<View id="background" backgroundColor='red' left="-6" opacity="0.8">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_3">
<View id="background" backgroundColor='red' left="-9" opacity="0.7">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_4">
<View id="background" backgroundColor='red' left="-12" opacity="0.6">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_5">
<View id="background" backgroundColor='red' left="-15" opacity="0.5">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_6">
<View id="background" backgroundColor='red' left="-18" opacity="0.4">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_7">
<View id="background" backgroundColor='red' left="-21" opacity="0.3">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_8">
<View id="background" backgroundColor='red' left="-24" opacity="0.2">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_9">
<View id="background" backgroundColor='red' left="-27" opacity="0.1">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
<ItemTemplate name="deleted_10">
<View id="background" backgroundColor='red' left="-30" opacity="0.0">
<Label bindId="info" id="title" color="white" left="60" top="0" />
<Label bindId="es_info" id="subtitle" color="white" left="60" top="25" />
</View>
</ItemTemplate>
</Templates>
<ListSection headerTitle="Fruit / Frutas">
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
<ListSection headerTitle="Vegetables / Verduras">
<ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" />
<ListItem info:text="Potato" es_info:text="Patata" pic:image="/potato.png" />
</ListSection>
<ListSection headerTitle="Grains / Granos">
<ListItem info:text="Corn" es_info:text="Maiz" pic:image="/corn.png" />
<ListItem info:text="Rice" es_info:text="Arroz" pic:image="/rice.png" />
</ListSection>
<ListSection headerTitle="Fruit / Frutas">
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
<ListSection headerTitle="Vegetables / Verduras">
<ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" />
<ListItem info:text="Potato" es_info:text="Patata" pic:image="/potato.png" />
</ListSection>
<ListSection headerTitle="Grains / Granos">
<ListItem info:text="Corn" es_info:text="Maiz" pic:image="/corn.png" />
<ListItem info:text="Rice" es_info:text="Arroz" pic:image="/rice.png" />
</ListSection>
<ListSection headerTitle="Fruit / Frutas">
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
<ListSection headerTitle="Vegetables / Verduras">
<ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" />
<ListItem info:text="Potato" es_info:text="Patata" pic:image="/potato.png" />
</ListSection>
<ListSection headerTitle="Grains / Granos">
<ListItem info:text="Corn" es_info:text="Maiz" pic:image="/corn.png" />
<ListItem info:text="Rice" es_info:text="Arroz" pic:image="/rice.png" />
</ListSection>
<ListSection headerTitle="Fruit / Frutas">
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
<ListSection headerTitle="Vegetables / Verduras">
<ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" />
<ListItem info:text="Potato" es_info:text="Patata" pic:image="/potato.png" />
</ListSection>
<ListSection headerTitle="Grains / Granos">
<ListItem info:text="Corn" es_info:text="Maiz" pic:image="/corn.png" />
<ListItem info:text="Rice" es_info:text="Arroz" pic:image="/rice.png" />
</ListSection>
<ListSection headerTitle="Fruit / Frutas">
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
<ListSection headerTitle="Vegetables / Verduras">
<ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" />
<ListItem info:text="Potato" es_info:text="Patata" pic:image="/potato.png" />
</ListSection>
<ListSection headerTitle="Grains / Granos">
<ListItem info:text="Corn" es_info:text="Maiz" pic:image="/corn.png" />
<ListItem info:text="Rice" es_info:text="Arroz" pic:image="/rice.png" />
</ListSection>
<ListSection headerTitle="Fruit / Frutas">
<ListItem info:text="Apple" es_info:text="Manzana" pic:image="/apple.png" />
<ListItem info:text="Banana" es_info:text="Banana" pic:image="/banana.png" />
</ListSection>
<ListSection headerTitle="Vegetables / Verduras">
<ListItem info:text="Carrot" es_info:text="Zanahoria" pic:image="/carrot.png" />
<ListItem info:text="Potato" es_info:text="Patata" pic:image="/potato.png" />
</ListSection>
<ListSection headerTitle="Grains / Granos">
<ListItem info:text="Corn" es_info:text="Maiz" pic:image="/corn.png" />
<ListItem info:text="Rice" es_info:text="Arroz" pic:image="/rice.png" />
</ListSection>
</ListView>
</Window>
</Alloy>
".container": {
backgroundColor:"white"
}
"#title" : {
color: 'black',
font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
left: '60dp', top: 0
},
"#subtitle" : {
color: 'gray',
font: { fontFamily:'Arial', fontSize: '14dp' },
left: '60dp', top: '25dp'
} $.index.open();
// When we click on the item we want to delete it. This can be called at any place actually,
// I just have it on this event.
function onItemClick(e){
// Get the data of the row so we can use it to populate the new templates
var data = $.listView.sections[e.sectionIndex].getItemAt(e.itemIndex);
// Set the counter to zero, we use this for naming the template on an interval
var count = 0;
//Setup your interval function for animating through the cell templates
var id = setInterval(function(){
//Update the ListItem with a new template that is part of the delete animation
$.listView.sections[e.sectionIndex].updateItemAt(e.itemIndex, {
template: "deleted_"+count,
es_info:{text: data.es_info.text},
info:{text:data.info.text}
});
// update the count var for the next step in the animation
count++;
// If we are above the total number of animation cells, lets clear the interval
if(count > 10){
clearInterval(id);
//Now, lets actually delete the item
$.listView.sections[e.sectionIndex].deleteItemsAt(e.itemIndex,1);
//If the Section is empty, lets remove it too
if(!$.listView.sections[e.sectionIndex].items.length){
$.listView.deleteSectionAt(e.sectionIndex);
}
}
}, 4);
}