iOS - Allow default row movement in `UITableView` without editing mode - ios

Question

I want to allow the default row movement in a UITableView without it being in editing mode, and without compromising the default behaviour of the UITableView.
The image above displays a cell in editing mode, with movement enabled.
I tried simply running for (UIView *subview in cell.subviews) (while my UITableView was in editing mode), but the button didn't turn up:
<UITableViewCellScrollView: 0x8cabd80; frame = (0 0; 320 44); autoresize = W+H; gestureRecognizers = <NSArray: 0x8c9ba20>; layer = <CALayer: 0x8ca14b0>; contentOffset: {0, 0}>
How can allow/add the movement "button" without enabling editing mode in my UITableView?
Creating and adding a UIButton with the default function for movement is also an option.

Answer 1

I actually do something similar for one of my apps. It uses the delegate methods for table editing and a bit of 'tricking' the user. 100% built-in Apple functionality.
1 - Set the table to editing (I do it in viewWillAppear)
-(void)viewWillAppear:(BOOL)animated{
[super viewWillAppear:animated];
[self.tableView setEditing:YES];
}
2 - Hide the default accessory icon:
-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView
editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath{
//remove any editing accessories (AKA) delete button
return UITableViewCellAccessoryNone;
}
3 - Keep editing mode from moving everything to the right (in the cell)
-(BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath{
return NO;
}
4 - At this point you should be able to drag the cells around without it looking like it is in editing mode. Here we trick the user. Create your own "move" icon (three lines in the default case, whatever icon you want in your case) and add the imageView right where it would normally go on the cell.
5 - Finally, implement the delegate method to actually rearrange your underlying datasource.
-(void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{
//Get original id
NSMutableArray *originalArray = [self.model.items objectAtIndex:sourceIndexPath.section];
Item * original = [originalArray objectAtIndex:sourceIndexPath.row];
//Get destination id
NSMutableArray *destinationArray = [self.model.items objectAtIndex:destinationIndexPath.section];
Item * destination = [destinationArray objectAtIndex:destinationIndexPath.row];
CGPoint temp = CGPointMake([original.section intValue], [original.row intValue]);
original.row = destination.row;
original.section = destination.section;
destination.section = #(temp.x);
destination.row = #(temp.y);
//Put destination value in original array
[originalArray replaceObjectAtIndex:sourceIndexPath.row withObject:destination];
//put original value in destination array
[destinationArray replaceObjectAtIndex:destinationIndexPath.row withObject:original];
//reload tableview smoothly to reflect changes
dispatch_async(dispatch_get_main_queue(), ^{
[UIView transitionWithView:tableView duration:duration options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
[tableView reloadData];
} completion:NULL];
});
}

Answer 2

William Falcon's answer in swift 3
1 - Set the table to editing (I do it in viewWillAppear)
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated: animated)
tableView.setEditing(true, animated: false)
}
2 - Hide the default accessory icon:
override func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCellEditingStyle {
return .none
}
3 - Keep editing mode from moving everything to the right (in the cell)
override func tableView(_ tableView: UITableView, shouldIndentWhileEditingRowAt indexPath: IndexPath) -> Bool {
return false
}
4 - Not required in swift 3
5 - Reorder your array
Extra Note
If you want to have your table cells selectable, add the following code within viewWillAppear() function.
tableView.allowsSelectionDuringEditing = true

Answer 3

For Swift 5... I know the question asks WITHOUT editing, but if your only functionality needs are to
be able to reorder cells and
be able to select cells
Then you can follow this (source for reorder: https://www.ralfebert.de/ios-examples/uikit/uitableviewcontroller/reorderable-cells/):
set tableView.isEditing = true
set tableView.allowsSelectionDuringEditing = true
With UITableViewDataSource, add the following methods:
func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
return .none
}
func tableView(_ tableView: UITableView, shouldIndentWhileEditingRowAt indexPath: IndexPath) -> Bool {
return false
}
You may or may not need to override those functions. I didn't need to.
(I think) in UITableViewDelegate, add this:
override func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
let movedObject = items[sourceIndexPath.row]
items.remove(at: sourceIndexPath.row)
items.insert(movedObject, at: destinationIndexPath.row)
}
where items is the data source array that handles the number of items in your table view.
The key is step 2, in which you can finally add the func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) method.

Answer 4

If you don't want to set the UITableView into editing mode then you will need to reinvent the capability for dragging cells around.
I present a fairly complete solution that enables the user to move rows around within the visible area of the UITableView. It works whether the UITableView is in editing mode or not. You'll need to extend it if you want the table to scroll when a row is dragged near the top or bottom of the visible area. There are likely some failure and edge cases you'll need to ferret out as well.
#implementation TSTableViewController
{
NSMutableArray* _dataSource;
}
- (void) viewDidLoad
{
[super viewDidLoad];
_dataSource = [NSMutableArray new];
for ( int i = 0 ; i < 10 ; i++ )
{
[_dataSource addObject: [NSString stringWithFormat: #"cell %d", i]];
}
}
- (void) longPress: (UILongPressGestureRecognizer*) lpgr
{
static NSString* dragCellData = nil;
static UIView* dragCellView = nil;
static NSInteger dragCellOffset = 0;
// determine the cell we're hovering over, etc:
CGPoint pt = [lpgr locationInView: self.tableView];
NSIndexPath* ip = [self.tableView indexPathForRowAtPoint: pt];
UITableViewCell* cell = [self.tableView cellForRowAtIndexPath: ip];
CGPoint ptInCell = [lpgr locationInView: cell];
// where the current placeholder cell is, if any:
NSInteger placeholderIndex = [_dataSource indexOfObject: #"placeholder"];
switch ( lpgr.state )
{
case UIGestureRecognizerStateBegan:
{
// get a snapshot-view of the cell we're going to drag:
cell.selected = cell.highlighted = NO;
dragCellView = [cell snapshotViewAfterScreenUpdates: YES];
dragCellView.clipsToBounds = NO;
dragCellView.layer.shadowRadius = 10;
dragCellView.layer.shadowColor = [UIColor blackColor].CGColor;
dragCellView.layer.masksToBounds = NO;
dragCellView.frame = [cell convertRect: cell.bounds
toView: self.tableView.window];
// used to position the dragCellView nicely:
dragCellOffset = ptInCell.y;
// the cell will be removed from the view hierarchy by the tableview, so transfer the gesture recognizer to our drag view, and add it into the view hierarchy:
[dragCellView addGestureRecognizer: lpgr];
[self.tableView.window addSubview: dragCellView];
// swap out the cell for a placeholder:
dragCellData = _dataSource[ip.row];
_dataSource[ip.row] = #"placeholder";
[self.tableView reloadRowsAtIndexPaths: #[ip]
withRowAnimation: UITableViewRowAnimationNone];
break;
}
case UIGestureRecognizerStateChanged:
{
// where should we move the placeholder to?
NSInteger insertIndex = ptInCell.y < cell.bounds.size.height / 2.0 ? ip.row : ip.row + 1;
if ( insertIndex != placeholderIndex )
{
// remove from the datasource and the tableview:
[_dataSource removeObjectAtIndex: placeholderIndex];
[self.tableView deleteRowsAtIndexPaths: #[ [NSIndexPath indexPathForRow: placeholderIndex inSection: 0] ]
withRowAnimation: UITableViewRowAnimationFade];
// adjust:
if ( placeholderIndex < insertIndex )
{
insertIndex--;
}
// insert to the datasource and tableview:
[_dataSource insertObject: #"placeholder"
atIndex: insertIndex];
[self.tableView insertRowsAtIndexPaths: #[ [NSIndexPath indexPathForRow: insertIndex inSection: 0] ]
withRowAnimation: UITableViewRowAnimationFade];
}
// move our dragCellView
CGRect f = dragCellView.frame;
f.origin.y = pt.y - dragCellOffset;
dragCellView.frame = f;
break;
}
case UIGestureRecognizerStateEnded:
{
// replace the placeholdercell with the cell we were dragging
[_dataSource replaceObjectAtIndex: placeholderIndex
withObject: dragCellData];
[self.tableView reloadRowsAtIndexPaths: #[ [NSIndexPath indexPathForRow: placeholderIndex inSection: 0] ]
withRowAnimation: UITableViewRowAnimationFade];
// reset state
[dragCellView removeFromSuperview];
dragCellView = nil;
dragCellData = nil;
break;
}
default:
{
break;
}
}
}
#pragma mark - Table view data source
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return 1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return _dataSource.count;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
NSString* cellData = _dataSource[indexPath.row];
if ( [cellData isEqualToString: #"placeholder" ] )
{
// an empty cell to denote where the "drop" would go
return [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault
reuseIdentifier: nil];
}
// a cell...
UITableViewCell* cell = [[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault
reuseIdentifier: nil];
// our "fake" move handle & gesture recognizer
UILongPressGestureRecognizer* lpgr = [[UILongPressGestureRecognizer alloc] initWithTarget: self action: #selector( longPress:) ];
lpgr.minimumPressDuration = 0.3;
UILabel* dragLabelView = [UILabel new];
dragLabelView.text = #"☰";
dragLabelView.userInteractionEnabled = YES;
[dragLabelView addGestureRecognizer: lpgr];
[dragLabelView sizeToFit];
cell.textLabel.text = cellData;
if ( tableView.isEditing )
{
cell.editingAccessoryView = dragLabelView;
}
else
{
cell.accessoryView = dragLabelView;
}
return cell;
}
#end

Answer 5

To make the cells move you have to implement the corresponding <UITableViewDelegate> methods for moving and explicit allowing the cell (indexpath) to move. The move-indicator icon will not show up because it depends on editing mode. While the tableview is in editing state the move-icon will overlap the accessoryType icon. Edit mode comes by default with the round delete button on the left side which you can hide like so while editing.
- (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath {
if (self.editing) return UITableViewCellEditingStyleNone;
return UITableViewCellEditingStyleDelete;
}
This way you keep your UITableView class with UITableViewDelegate methods clean to understand, you don't need to implement some kind of self-made move-mode.
And you can use the tableview's editing property to distinguish how the cell should look like in your tableView:cellForRowAtIndexPath: method. So even turning off the move-functionality is easier by setting your tableview back to editing = NO, the move-icon would disappear and the accessoryType symbol shows up again.