Android TableView Pull To Refresh in Titanium

Posted By Akshay Luthra | 05-May-2015

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.

Request for Proposal

Recaptcha is required.

Sending message..