CODEWITHSUNDEEP
iostableviewtitanium-mobile
gjunkie
gjunkie

Reputation: 828

Titanium Mobile - Swipe TableView cell left/right to expose another row behind

I've been searching around on how to do this, but I've been unsuccessful.

What I'm trying to accomplish is this: I have a TableView with, say, 5 rows. I want to be able to swipe a row left to expose information "behind" the row. Not sure if this would be done by adding an additional row to the TableView and placing it behind, or what?

At the end of the day, what would be even cooler, would be to be able to swipe the row left OR right, and depending on which direction you swipe, the row behind gets populated with different information.

Any ideas?

Upvotes: 1

Views: 3493

Answers (2)

gjunkie
gjunkie

Reputation: 828

Found the perfect solution on Github. https://github.com/rborn/TiSwipeToReveal

Upvotes: 0

bilalq
bilalq

Reputation: 7699

From your description, it sounds like you want something similar to what Twitter does when you swipe across a Tweet.

First, make sure the rows in the table don't have vertical/horizontal layouts.

Then create the left and right swipe views you want for each row, like so:

var leftSwipeView = Ti.UI.createView({
  width: Ti.UI.FILL,
  height: Ti.UI.FILL,
  backgroundColor: '#ff0000', //just to make the effect apparent
  visible: false
}
var rightSwipeView = Ti.UI.createView({
  width: Ti.UI.FILL,
  height: Ti.UI.FILL,
  backgroundColor: '#00ff00', //just to make the effect apparent
  visible: false,
}
row.add(leftSwipeView);
row.add(rightSwipeView);

row.addEventListener('swipe', function(e) {
  if (e.direction == 'left'){
    leftSwipeView.setVisible(true);
    setTimeout(function(){leftSwipeView.setVisible(false);}, 2000);
  }
  if (e.direction == 'right'){
    rightSwipeView.setVisible(true);
    setTimeout(function(){rightSwipeView.setVisible(false);}, 2000);
  }
});

The snippet I have up there will hide the views again after 2 seconds. Hope that helps.

Upvotes: 1

Related Questions