Last active
August 29, 2015 14:13
-
-
Save jkotchoff/c1bdd0fc4bb8dff83885 to your computer and use it in GitHub Desktop.
Using the titanium Listview with a pullView example on an iOS window with extendEdges set to Ti.UI.EXTEND_EDGE_TOP
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var win = Ti.UI.createWindow({title: 'listview test', backgroundColor: 'white', extendEdges: [Ti.UI.EXTEND_EDGE_TOP]}); | |
var listView = Ti.UI.createListView({height:'90%', top:0}); | |
var sections = []; | |
var TOP_OFFSET = 64; | |
listView.setContentInsets({top:TOP_OFFSET}, {animated:false}); | |
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'}); | |
var fruitDataSet = [ | |
{properties: { title: 'Apple'}}, | |
{properties: { title: 'Banana'}}, | |
]; | |
fruitSection.setItems(fruitDataSet); | |
sections.push(fruitSection); | |
var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'}); | |
var vegDataSet = [ | |
{properties: { title: 'Carrots'}}, | |
{properties: { title: 'Potatoes'}}, | |
]; | |
vegSection.setItems(vegDataSet); | |
var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'}); | |
var fishDataSet = [ | |
{properties: { title: 'Cod'}}, | |
{properties: { title: 'Haddock'}}, | |
]; | |
fishSection.setItems(fishDataSet); | |
listView.sections = sections; | |
var refreshCount = 0; | |
function getFormattedDate(){ | |
var date = new Date(); | |
return date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear() + ' ' + date.getHours() + ':' + date.getMinutes(); | |
} | |
function resetPullHeader(){ | |
actInd.hide(); | |
imageArrow.transform=Ti.UI.create2DMatrix(); | |
if (refreshCount < 2) { | |
imageArrow.show(); | |
labelStatus.text = 'Pull down to refresh...'; | |
labelLastUpdated.text = 'Last Updated: ' + getFormattedDate(); | |
} else { | |
labelStatus.text = 'Nothing To Refresh'; | |
labelLastUpdated.text = 'Last Updated: ' + getFormattedDate(); | |
listView.removeEventListener('pull', pullListener); | |
listView.removeEventListener('pullend', pullendListener); | |
eventStatus.text = 'Removed event listeners.'; | |
} | |
listView.setContentInsets({top:0 + TOP_OFFSET}, {animated:true}); | |
} | |
function loadTableData() | |
{ | |
if (refreshCount == 0) { | |
listView.appendSection(vegSection); | |
} else if (refreshCount == 1) { | |
listView.appendSection(fishSection); | |
} | |
refreshCount ++; | |
resetPullHeader(); | |
} | |
function pullListener(e){ | |
// e.active is not respecting the content inset of the list | |
eventStatus.text = 'EVENT pull FIRED. e.active = '+e.active; | |
if (e.active == false) { | |
var unrotate = Ti.UI.create2DMatrix(); | |
imageArrow.animate({transform:unrotate, duration:180}); | |
labelStatus.text = 'Pull down to refresh...'; | |
} else { | |
var rotate = Ti.UI.create2DMatrix().rotate(180); | |
imageArrow.animate({transform:rotate, duration:180}); | |
if (refreshCount == 0) { | |
labelStatus.text = 'Release to get Vegetables...'; | |
} else { | |
labelStatus.text = 'Release to get Fish...'; | |
} | |
} | |
} | |
function pullendListener(e){ | |
eventStatus.text = 'EVENT pullend FIRED.'; | |
if (refreshCount == 0) { | |
labelStatus.text = 'Loading Vegetables...'; | |
} else { | |
labelStatus.text = 'Loading Fish...'; | |
} | |
imageArrow.hide(); | |
actInd.show(); | |
listView.setContentInsets({top:80 + TOP_OFFSET}, {animated:true}); | |
setTimeout(function(){ | |
loadTableData(); | |
}, 2000); | |
} | |
var tableHeader = Ti.UI.createView({ | |
backgroundColor:'#e2e7ed', | |
width:320, height:80 | |
}); | |
var border = Ti.UI.createView({ | |
backgroundColor:'#576c89', | |
bottom:0, | |
height:2 | |
}); | |
tableHeader.add(border); | |
var imageArrow = Ti.UI.createImageView({ | |
image:'https://github.com/appcelerator/titanium_mobile/raw/master/demos/KitchenSink/Resources/images/whiteArrow.png', | |
left:20, bottom:10, | |
width:23, height:60 | |
}); | |
tableHeader.add(imageArrow); | |
var labelStatus = Ti.UI.createLabel({ | |
color:'#576c89', | |
font:{fontSize:13, fontWeight:'bold'}, | |
text:'Pull down to refresh...', | |
textAlign:'center', | |
left:55, bottom:30, | |
width:200 | |
}); | |
tableHeader.add(labelStatus); | |
var labelLastUpdated = Ti.UI.createLabel({ | |
color:'#576c89', | |
font:{fontSize:12}, | |
text:'Last Updated: ' + getFormattedDate(), | |
textAlign:'center', | |
left:55, bottom:15, | |
width:200 | |
}); | |
tableHeader.add(labelLastUpdated); | |
var actInd = Ti.UI.createActivityIndicator({ | |
left:20, bottom:13, | |
width:30, height:30 | |
}); | |
tableHeader.add(actInd); | |
listView.pullView = tableHeader; | |
listView.addEventListener('pull', pullListener); | |
listView.addEventListener('pullend',pullendListener); | |
var eventStatus = Ti.UI.createLabel({ | |
font:{fontSize:13, fontWeight:'bold'}, | |
text: 'Event data will show here', | |
bottom:0, | |
height:'10%' | |
}) | |
win.add(listView); | |
win.add(eventStatus); | |
var navWin = Titanium.UI.iOS.createNavigationWindow({ | |
window: win | |
}); | |
navWin.open(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment