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.

About Author

Author Image
Akshay Luthra

Akshay Luthra has excellent experience in developing Cross Platform Mobile Apps using JavaScript and Titanium Framework. He loves listening to music and travelling new places.

Request for Proposal

Name is required

Comment is required

Sending message..