Titanium JIRA Archive
Appcelerator Community (AC)

[AC-2417] iOS: Pull to Refresh doesn't work in new SDK

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionFixed
Resolution Date2012-10-12T22:09:00.000+0000
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
Labelsios, pull, refresh
ReporterJosh Lewis
AssigneeShak Hossain
Created2012-09-04T07:34:34.000+0000
Updated2016-03-08T07:41:27.000+0000

Description

This code http://developer.appcelerator.com/blog/2010/05/how-to-create-a-tweetie-like-pull-to-refresh-table.html Only seems to work on the 2.1b SDK I have installed, using the new ones doesnt work correctly. The view slides up, then back down to refresh, then back up to hide.

Comments

  1. Shannon Hicks 2012-10-12

    Check Kitchen Sink for the updated code.
  2. Daniel Sefton 2012-10-12

    Latest code: https://github.com/appcelerator/KitchenSink/blob/master/Resources/ui/handheld/ios/baseui/table_view_pull_to_refresh.js Commit history: https://github.com/appcelerator/KitchenSink/commits/master/Resources/ui/handheld/ios/baseui/table_view_pull_to_refresh.js
  3. Mostafizur Rahman 2014-01-09

    Hello, I tested this issue with the test code below (modified kitchen sink project). I can't reproduce this issue in latest Ti builds.

    Test Environment

    Mac OS X 10.8.6 Ti SDK 3.2.0.GA Ti CLI 3.2.0 IOS simulator 7.0.3

    Test Code

       
       var win = Ti.UI.createWindow({
       	backgroundColor : "#fff",
       });
       
       function formatDate() {
       	var date = new Date();
       	var datestr = date.getMonth() + '/' + date.getDate() + '/' + date.getFullYear();
       	if (date.getHours() >= 12) {
       		datestr += ' ' + (date.getHours() == 12 ? date.getHours() : date.getHours() - 12) + ':' + date.getMinutes() + ' PM';
       	} else {
       		datestr += ' ' + date.getHours() + ':' + date.getMinutes() + ' AM';
       	}
       	return datestr;
       }
       
       var data = [{
       	title : "Row 1"
       }, {
       	title : "Row 2"
       }, {
       	title : "Row 3"
       }];
       
       var lastRow = 4;
       
       var tableView = Ti.UI.createTableView({
       	data : data
       });
       
       win.add(tableView);
       
       var border = Ti.UI.createView({
       	backgroundColor : "#576c89",
       	height : 2,
       	bottom : 0
       });
       
       var tableHeader = Ti.UI.createView({
       	backgroundColor : "#e2e7ed",
       	width : 320,
       	height : 60
       });
       
       // fake it til ya make it..  create a 2 pixel
       // bottom border
       tableHeader.add(border);
       
       var arrow = Ti.UI.createView({
       	backgroundImage : "/images/whiteArrow.png",
       	width : 23,
       	height : 60,
       	bottom : 10,
       	left : 20
       });
       
       var statusLabel = Ti.UI.createLabel({
       	text : "Pull to reload",
       	left : 55,
       	width : 200,
       	bottom : 30,
       	height : "auto",
       	color : "#576c89",
       	textAlign : "center",
       	font : {
       		fontSize : 13,
       		fontWeight : "bold"
       	},
       	shadowColor : "#999",
       	shadowOffset : {
       		x : 0,
       		y : 1
       	}
       });
       
       var lastUpdatedLabel = Ti.UI.createLabel({
       	text : "Last Updated: " + formatDate(),
       	left : 55,
       	width : 200,
       	bottom : 15,
       	height : "auto",
       	color : "#576c89",
       	textAlign : "center",
       	font : {
       		fontSize : 12
       	},
       	shadowColor : "#999",
       	shadowOffset : {
       		x : 0,
       		y : 1
       	}
       });
       
       var actInd = Titanium.UI.createActivityIndicator({
       	left : 20,
       	bottom : 13,
       	width : 30,
       	height : 30
       });
       
       tableHeader.add(arrow);
       tableHeader.add(statusLabel);
       tableHeader.add(lastUpdatedLabel);
       tableHeader.add(actInd);
       
       tableView.headerPullView = tableHeader;
       
       var pulling = false;
       var reloading = false;
       
       function beginReloading() {
       	// just mock out the reload
       	setTimeout(endReloading, 2000);
       }
       
       function endReloading() {
       	// simulate loading
       	for (var c = lastRow; c < lastRow + 10; c++) {
       		tableView.appendRow({
       			title : "Row " + c
       		});
       	}
       	lastRow += 10;
       
       	// when you're done, just reset
       	tableView.setContentInsets({
       		top : 0
       	}, {
       		animated : true
       	});
       	reloading = false;
       	lastUpdatedLabel.text = "Last Updated: " + formatDate();
       	statusLabel.text = "Pull down to refresh...";
       	actInd.hide();
       	arrow.show();
       }
       
       tableView.addEventListener('scroll', function(e) {
       	var offset = e.contentOffset.y;
       	if (offset <= -65.0 && !pulling && !reloading) {
       		var t = Ti.UI.create2DMatrix();
       		t = t.rotate(-180);
       		pulling = true;
       		arrow.animate({
       			transform : t,
       			duration : 180
       		});
       		statusLabel.text = "Release to refresh...";
       	} else if (pulling && (offset > -65.0 && offset < 0) && !reloading) {
       		pulling = false;
       		var t = Ti.UI.create2DMatrix();
       		arrow.animate({
       			transform : t,
       			duration : 180
       		});
       		statusLabel.text = "Pull down to refresh...";
       	}
       });
       
       var event1 = 'dragEnd';
       if (Ti.version >= '3.0.0') {
       	event1 = 'dragend';
       }
       
       tableView.addEventListener(event1, function(e) {
       	if (pulling && !reloading) {
       		reloading = true;
       		pulling = false;
       		arrow.hide();
       		actInd.show();
       		statusLabel.text = "Reloading...";
       		tableView.setContentInsets({
       			top : 60
       		}, {
       			animated : true
       		});
       		arrow.transform = Ti.UI.create2DMatrix();
       		beginReloading();
       	}
       });
       win.open();
       
    Thnaks

JSON Source