Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Implement Swipe Left to Right in UITableView Cell similar to iOS Mail

I'm trying to replicate the same technique that Apple uses in their mail app for marking mail as unread or "Mark as Unread" when you swipe from left to right inside a mailbox.

Screenshot of Mail inside iOS 8.1 Mail app

I've found similar solutions but only for a gesture of swiping from right to left. I was hoping that this same solution was available as part of the Apple SDK for the opposite direction.

How can I acheive the same left-to-right gesture effect as iOS' Mail app does?

like image 935
gh0st Avatar asked Nov 16 '14 08:11

gh0st


3 Answers

I've found similar solutions but only for a gesture of swiping from right to left.

SWTableViewCell has all the options you might want.

While dequeing a cell just set up left/right set of buttons as needed.

cell.leftUtilityButtons = [self leftButtons]; cell.rightUtilityButtons = [self rightButtons]; cell.delegate = self; 

And by setting the view controller as its delegate, you can listen to the button clicks. Full details on how to implement are in that link

Ex 1:

enter image description here

Ex 2: enter image description here

In case you are looking for buttons stacked vertically check out this.

like image 53
GoodSp33d Avatar answered Sep 28 '22 05:09

GoodSp33d


I usually implement it at the table level.

- (void)viewDidLoad
{
    [super viewDidLoad];

    UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                                                  action:@selector(leftSwipe:)];
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionLeft)];
    [self.tableView addGestureRecognizer:recognizer];

    recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                        action:@selector(rightSwipe:)];
    recognizer.delegate = self;
    [recognizer setDirection:(UISwipeGestureRecognizerDirectionRight)];
    [self.tableView addGestureRecognizer:recognizer];
}

You then have control of the direction and can customize at will

- (void)leftSwipe:(UISwipeGestureRecognizer *)gestureRecognizer
{
    //do you left swipe stuff here. 
}

- (void)rightSwipe:(UISwipeGestureRecognizer *)gestureRecognizer
{
    //do you right swipe stuff here. Something usually using theindexPath that you get that way
    CGPoint location = [gestureRecognizer locationInView:self.tableView];
    NSIndexPath *indexPath = [self.tableView indexPathForRowAtPoint:location];
}

Credit goes to Jade Mind

like image 38
GrandSteph Avatar answered Sep 28 '22 05:09

GrandSteph


Since iOS 11, there are native provisions(delegate methods through UITableViewDelegate) to enable 'swipe actions' on a UITableView's cell on both sides:

func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? //For actions at the left

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? //For actions at the right

These methods return a UISwipeActionsConfiguration that contains an array of UIContextualAction

For a UIContextualAction, you can specify its title, style, background colour, action colour, or even an UIImage and handle its callback ( obviously :-) )

Here's a sample implementation:

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

    let filterAction = UIContextualAction(style: .normal, title: "FILTER") { (action, view, bool) in
        print("Swiped to filter")
    }
    filterAction.backgroundColor = UIColor.blue

    return UISwipeActionsConfiguration(actions: [filterAction])
}

I know this is an old question, but I'm posting this just in case it helps someone randomly passing by...

like image 30
Lokesh SN Avatar answered Sep 28 '22 05:09

Lokesh SN