How to create a UITableView with custom editing mode

Question

In normal UITableView mode in edit mode, you drag the cell to the position where you want the cell to be inside, and other cells can snap into place. I want to create a UITableView editing mode when you select a cell and it is held in the center when you view the table view to move the selected item while holding the selected item in the center when the table cells move around the selected center cell,

The valid “premium” answer will require a minimally working example that holds the selected cell in the center of the table and can be moved by scrolling the table up and down. Including boundary cases of the first and last position in the table. In addition, you can outline the key points of what you think will work, and if they lead me in the right direction, then you will receive a reward.

Update 1

I installed a project called PickerTableView on GitHub. Work on an emerging industry. Selection works, and I'm working on a subclass of TableView to handle the scroll motion of a cell. Finding a working solution in front of me will continue to earn generosity.

Further refinement

Based on the comment, I will provide some ASCII articles.

Tableview

 |==========| | Next| |==========| | | |----------| | | |----------| | | |----------| | | |----------| | | |==========| 

Select a cell, then click Next.

 |==========| | Next| |==========| | | |----------| | | |----------| | X| |----------| | | |----------| | | |==========| 

Table edit mode

 |=============| | Done| |=============| | | |-------------| | | |-------------| | This cell is| | Highlighted | | and locked | | in place | |-------------| | | |-------------| | | |=============| 

When you view a table view, cells that have not been selected wrap around the selected cell while the selected cell remains in the middle.

Answer 1

Since my answer is best at this time, I have provided my own answer.

I installed a project called PickerTableView on GitHub. Work on an emerging industry. This project uses Cocoapods for dependencies. The selection works, and I have subclassed the TableView to handle scroll cell movement.

Answer 2

Would it be acceptable if the selected cell was not really a cell, but a separate UIView (which could be made like a cell)? If so, you can do something like this:

• When a cell is clicked, remove it from the table and show a cell similar to the UIView in the table.
• Move cells while they scroll, responding to -scrollViewDidScroll:
• When the Finish button is clicked, insert the item into the table and UIView cell

To see this in action, I created a subclass of UIViewController for testing:

PickerTableViewController.h

 #import <UIKit/UIKit.h> @interface PickerTableViewController : UIViewController @end @interface SelectedItemView : UIView @property (nonatomic, readonly) UILabel *label; @end 

PickerTableViewController.m

 #import "PickerTableViewController.h" @interface PickerTableViewController () <UITableViewDataSource, UITableViewDelegate> @property (strong, nonatomic) UIButton *button; @property (strong, nonatomic) UITableView *tableView; @property (strong, nonatomic) UIView *tableViewContainer; @property (strong, nonatomic) SelectedItemView *selectedItemView; @property (strong, nonatomic) NSMutableArray *items; @property (nonatomic, getter = isPicking) BOOL picking; @property (strong, nonatomic) NSNumber *selectedItem; @end @implementation PickerTableViewController - (id)init { self = [super init]; if (self) { // generate random cell contents NSInteger countItems = 20; self.items = [NSMutableArray arrayWithCapacity:countItems]; for (int i = 0; i < countItems; i++) { [self.items addObject:@(arc4random() % 100)]; } } return self; } - (void)viewDidLoad { [super viewDidLoad]; self.button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; self.button.backgroundColor = [UIColor yellowColor]; [self.button setTitle:@"Done" forState:UIControlStateNormal]; [self.button addTarget:self action:@selector(stopPicking) forControlEvents:UIControlEventTouchUpInside]; self.button.enabled = self.isPicking; [self.view addSubview:self.button]; // use a container for easy alignment of selected item view to center of table _tableViewContainer = [[UIView alloc] init]; [self.view addSubview:_tableViewContainer]; _tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain]; self.tableView.delegate = self; self.tableView.dataSource = self; [self.tableViewContainer addSubview:self.tableView]; } - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; CGFloat const buttonHeight = 100.0f; CGRect const buttonFrame = CGRectMake(0.0f, 0.0f, self.view.bounds.size.width, buttonHeight); self.button.frame = buttonFrame; CGRect tableFrame = self.view.bounds; tableFrame.origin.y += buttonHeight; tableFrame.size.height -= buttonHeight; self.tableViewContainer.frame = tableFrame; self.tableView.frame = self.tableViewContainer.bounds; // allow table to scroll to first and last row CGFloat selectedItemViewY = self.selectedItemView.center.y; self.tableView.contentInset = UIEdgeInsetsMake(selectedItemViewY, 0.0f, selectedItemViewY, 0.0f); } #pragma mark - Custom - (SelectedItemView *)selectedItemView { if (!_selectedItemView) { CGRect frame = CGRectMake(0.0f, 0.0f, self.tableView.bounds.size.width, self.tableView.rowHeight); _selectedItemView = [[SelectedItemView alloc] initWithFrame:frame]; _selectedItemView.center = CGPointMake(self.tableView.bounds.size.width * 0.5f, self.tableView.bounds.size.height * 0.5f); _selectedItemView.hidden = YES; [self.tableViewContainer addSubview:_selectedItemView]; } return _selectedItemView; } - (void)startPickingForItemAtIndex:(NSInteger)index { if (self.isPicking) { return; } self.picking = YES; // update tableview self.selectedItem = [self.items objectAtIndex:index]; [self.items removeObjectAtIndex:index]; [self.tableView reloadData]; [self repositionCells]; // update views self.selectedItemView.label.text = [NSString stringWithFormat:@"%@", self.selectedItem]; self.selectedItemView.hidden = NO; self.button.enabled = YES; } - (void)stopPicking { if (!self.isPicking) { return; } self.picking = NO; // calculate new index for item NSSortDescriptor *sd = [NSSortDescriptor sortDescriptorWithKey:@"row" ascending:YES]; NSArray *sds = [NSArray arrayWithObject:sd]; NSArray *indexPaths = [[self.tableView indexPathsForVisibleRows] sortedArrayUsingDescriptors:sds]; NSInteger selectedItemIndex = NSNotFound; for (NSIndexPath *indexPath in indexPaths) { if ([self isCellAtIndexPathBelowSelectedItemView:indexPath]) { selectedItemIndex = indexPath.row; break; } } if (selectedItemIndex == NSNotFound) { selectedItemIndex = self.items.count; } // update tableview [self.items insertObject:self.selectedItem atIndex:selectedItemIndex]; self.selectedItem = nil; [self.tableView reloadData]; // update views self.selectedItemView.hidden = YES; self.button.enabled = NO; } - (BOOL)isCellAtIndexPathBelowSelectedItemView:(NSIndexPath *)indexPath { CGFloat yInTable = indexPath.row * self.tableView.rowHeight; CGFloat yInContainer = yInTable - self.tableView.contentOffset.y; return yInContainer > self.selectedItemView.frame.origin.y; } #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return self.items.count; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"Cell"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (!cell) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier]; cell.selectionStyle = UITableViewCellSelectionStyleNone; } cell.textLabel.text = [NSString stringWithFormat:@"%@", [self.items objectAtIndex:indexPath.row]]; return cell; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { if (self.isPicking) { [self stopPicking]; } // scroll position seems to be confused... UITableViewScrollPositionMiddle doesn't work? [self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:NO]; [self startPickingForItemAtIndex:indexPath.row]; } - (void)scrollViewDidScroll:(UIScrollView *)scrollView { if (self.isPicking) { [self repositionCells]; } } - (void)repositionCells { CGFloat tableOffset = self.tableView.contentOffset.y; NSArray *indexPaths = [self.tableView indexPathsForVisibleRows]; CGFloat selectedItemViewY = self.selectedItemView.frame.origin.y; CGFloat const bufferHeight = self.tableView.rowHeight; // adjust to liking for (NSIndexPath *indexPath in indexPaths) { UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath]; CGRect cellFrame = cell.frame; CGFloat cellYInTable = indexPath.row * self.tableView.rowHeight; cellFrame.origin.y = cellYInTable; CGFloat cellYInContainer = cellYInTable - tableOffset; if (cellYInContainer <= selectedItemViewY) { cellFrame.origin.y -= bufferHeight; } else { cellFrame.origin.y += bufferHeight; } cell.frame = cellFrame; } } @end @interface SelectedItemView () @property (strong, nonatomic) UILabel *label; @end @implementation SelectedItemView - (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.userInteractionEnabled = NO; self.backgroundColor = [UIColor blueColor]; _label = [[UILabel alloc] init]; _label.backgroundColor = [UIColor clearColor]; [self addSubview:_label]; } return self; } - (void)layoutSubviews { [super layoutSubviews]; self.label.frame = self.bounds; } @end 

Answer 3

when u selects a cell in edit mode. Do the following:

• Scroll the cell to the center position.
• use renderInContext to renderInContext image of the moved cell.
• put the image in the image and add it to the viewViewView. In accordance with the central position relative to the superView tableView.
• then you can freely scroll through the table. Just delete the selected cell in advance to avoid duplication in the user interface.
• When you click next. Insert the line at the desired position with the required data and delete the added ImageView.
• Animation entirely left to ur: D

Cheers are having fun.

Answer 4

Here is an example of what does what you want to do (i.e. after some settings). I think this is pretty minimal code:

https://github.com/nielsbot/funny-tables

(For your use case, you will open centerTableView and bottomTableView when you enter edit mode.)