Blog

  • In this blog, I have taken a simple table view which is having a single row in the starting. When a user pull down the table view in order to refresh it, a new row will append in the table.

     

    First of all, create a "androidPullToRefresh.js" file in your Resources directory and write the following code in it - 

     var tableHeader = null;
    
    exports.createAndroidPullToRefresh = function(params) {
    	var params = params || {};
    
    	try {
    		if (tableHeader) {
    			tableHeader.hide();
    			tableHeader = null;
    		}
    	} catch(e) {
    		Ti.API.error("Android Pull To Refresh tableHeader exception : " + e);
    	}
    
    	tableHeader = Ti.UI.createView({
    		backgroundColor : "#fff",
    		width : Ti.Platform.displayCaps.platformWidth,
    		height : 60,
    		top : -60,
    	});
    
    	var innerHeaderView = Ti.UI.createView({
    		width : Ti.UI.SIZE,
    		height : 60,
    		bottom : 0,
    		layout : "horizontal"
    	});
    
    	var arrowView = Ti.UI.createView({
    		width : 32,
    		height : 32,
    		top : 15,
    	});
    	innerHeaderView.add(arrowView);
    
    	var actInd = Titanium.UI.createActivityIndicator({
    		style : Titanium.UI.ActivityIndicatorStyle.BIG,
    		width : 30,
    		height : 30,
    	});
    	arrowView.add(actInd);
    
    	var statusLabel = Ti.UI.createLabel({
    		text : params.refreshStatusText,
    		width : Ti.UI.SIZE,
    		height : 32,
    		top : 15,
    		left : 5,
    		color : "#848484",
    		font : {
    			fontFamily : 'ITC Avant Grade Gothic Demi',
    			fontSize : '12sp',
    			fontWeight : "bold"
    		},
    	});
    	innerHeaderView.add(statusLabel);
    
    	tableHeader.add(innerHeaderView);
    	params.mainView.add(tableHeader);
    
    	var reloading = false;
    	// add hide function
    	function hidetheind() {
    		tableHeader.animate({
    			top : -60,
    			duration : 200,
    			curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    		});
    		params.tableView.animate({
    			top : 0,
    			duration : 200,
    			curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    		});
    		actInd.hide();
    		statusLabel.hide();
    		setTimeout(function() {
    			statusLabel.show();
    			reloading = false;
    		}, 400);
    	};
    
    	//trigger it to show
    	function showtheind() {
    		reloading = true;
    		tableHeader.animate({
    			top : 0,
    			duration : 200,
    			curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    		});
    		params.tableView.animate({
    			top : 60,
    			duration : 200,
    			curve : Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    		});
    		actInd.show();
    		setTimeout(function() {
    			params.reloadData(hidetheind);
    		}, 300);
    	};
    
    	var firstVisibleItem = 0;
    	params.tableView.addEventListener('scroll', function(e) {
    		firstVisibleItem = e.firstVisibleItem;
    	});
    
    	function performOnSwipe() {
    		if (Ti.Network.online) {
    			(!reloading && firstVisibleItem === 0) && showtheind();
    		} else {
    			alert("No Internet Connection");
    		}
    	}
    
    
    	params.mainView.addEventListener('swipe', function(e) {
    		if (e.direction == 'down') {
    			performOnSwipe();
    		}
    	});
    };
    
    
    

     

    Then in your "app.js" file, write the following code - 

     Titanium.UI.setBackgroundColor('#fff');
    
    var win = Ti.UI.createWindow({
    	title : 'The Main Window',
    	backgroundColor : '#fff'
    });
    
    var view = Ti.UI.createView({
    	width : Ti.UI.FILL,
    	height : Ti.UI.FILL,
    });
    win.add(view);
    
    var tableView = Ti.UI.createTableView({
    	left : 0,
    	top : 0,
    	showVerticalScrollIndicator : false,
    	separatorColor : "transparent",
    	separatorStyle : "NONE",
    	backgroundColor : "#fff",
    });
    view.add(tableView);
    
    var row = Ti.UI.createTableViewRow({
    	height : 60,
    	title : "Table Row"
    });
    tableView.appendRow(row);
    
    var androidPullToRefresh = require('/androidPullToRefresh');
    
    ///////starting pull to refresh////////
    var reloadData = function(refreshSuccess) {
    	if (refreshSuccess) {
    		var row = Ti.UI.createTableViewRow({
    			height : 60,
    			title : "NEW Table Row"
    		});
    		tableView.appendRow(row);
    		refreshSuccess();
    	}
    };
    
    androidPullToRefresh.createAndroidPullToRefresh({
    	refreshStatusText : "Refreshing",
    	tableView : tableView,
    	reloadData : reloadData,
    	mainView : view
    });
    
    win.open();
    
    
     

     

    This is all that you need to do.

Tags: titanium , android , pulltorefresh , tableview

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com