Inserting UIView into TablewView with InsertRowsAtIndexPaths using ContentView - ios

I lost a bit nerves on this case. I have UIView with few images as buttons. I would like to insert it with insertRowsAtIndexPaths:
I have no idea how to start with that, and I really searched every site on google. I even found something that works like a charm ( http://jackkwok.github.io/JKExpandTableView/ ) but I still cannot make it right.
Here is my didSelectRowAtIndexPath method:
-(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
int selectedRow = indexPath.row;
NSLog(#"touch on row %d", selectedRow);
UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
PrototypeCell *prototypeCell =(PrototypeCell *)[tableView cellForRowAtIndexPath:indexPath];
if (prototypeCell.stretched == NO){
[UIView animateWithDuration:1 animations:^{
prototypeCell.View.frame = CGRectMake(0, 0, 320, 120);}
completion: nil];
prototypeCell.stretched = YES;}
else {
[UIView animateWithDuration:1 animations:^{
prototypeCell.View.frame = CGRectMake(0, 0, 15, 120);}
completion: nil];
prototypeCell.stretched = NO;
}
// Start a new core animation transaction
[CATransaction begin];
// Set a completion block for the animation
[CATransaction setCompletionBlock:^{
//
// Update the data model to add a new section
// [_data addObject:[DetailView init] alloc];
NSInteger item = self.thingList.count-1;
// Animate the new section apperance
[tableView beginUpdates];
[tableView insertRowsAtIndexPaths:[NSArray arrayWithObjects:[NSIndexPath indexPathForItem:item inSection:0], nil] withRowAnimation:UITableViewRowAnimationFade];
NSLog(#"Array is: %#", _data);
// [tableView endUpdates];
}];
[CATransaction commit];
}
My head is already numb from that problem. I cannot even understand basic inserting, how I write what I would like to insert here?
Any Help appreciated!

Based on your described intent, I'm not entirely sure you need or want to insert table rows. It looks like what you are trying to achieve is to simply expand the height of a given row to reveal some extra buttons when that row is selected.
Changing the height of row is covered How to dynamically resize UITableViewCell height
Essentially you can have your PrototypeCell have some extra content (the buttons) that is usually clipped. When the view is selected, you simply change the height to make sure all of the buttons would be visible and you indicate to the tableview to reload the row that was selected.
Should you need to insert rows, this was covered in how to properly use insertRowsAtIndexPaths?
Good luck!

Related

IOS: Force tableView cell to animate change on tap

I am trying to perform an animation on a cell when the accessory view is tapped. The tapped delegate method is firing and I can get the row to do something--change label, but it is ignoring the animation (or in another case--not even making the change.) How can I get the animation to work properly?
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath{
MyCustomCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
[UIView animateWithDuration:5.0
delay: 5.0
options: UIViewAnimationOptionCurveEaseIn
animations:^{
//NEXT TWO LINES HAVE NO EFFECT ON CELL SO COMMENTED OUT
//cell.nameLabel.text = #"Thank you. FIRST ANIMATE TRY";
// [self.tableView reloadRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationFade];
//NEXT THREE LINES CHANGE TEXT BUT WITHOUT ANIMATION
[self.tableView beginUpdates];
cell.nameLabel.text = #"Thank you. Second try!";
[self.tableView endUpdates];
}
completion:^(BOOL finished){
NSLog(#"animation finished");
}];
}
BTW I also tried explicitly dispatching this in the main queue but it had no effect. It should already be in main queue.
First of all, you don't need to call beginUpdates or endUpdates. Second, you can't animate the change of a label's text value.
What you need to is have a label on the cell and initialize the alpha property to 0.0. When accessoryButtonTappedForRowWithIndexPath is called set the alpha property to 1.0 inside of your animation block.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
AwesomeCell *cell = [tableView dequeueReusableCellWithIdentifier:#"Cell" forIndexPath:indexPath];
cell.thankYouLabel.text = #"Thank you";
cell.thankYouLabel.alpha = 0.0;
return cell;
}
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath
{
AwesomeCell *cell = [tableView cellForRowAtIndexPath:indexPath];
[UIView animateWithDuration:1.0 animations:^{
cell.thankYouLabel.alpha = 1.0;
}];
}

How to get rid of unwanted whitespace when collapsing TableViewCell

I have a UITableView with cells that expand/collapse when users tap on them, using:
-(void)tableView:(UITableView *)_tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
...
[tableView reloadRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
...
}
After the reloadRowsAtIndexPath is run, I have heightForRowAtIndexPath return a different height depending on whether the cell is collapsing or expanding:
-(CGFloat)tableView:(UITableView *)_tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
// if expand
return 200;
// if collapse
return 49;
}
When I collapse a cell at the bottom of the table, the table shrinks, but it is brought down way too far, leaving a significant amount of whitespace at the top of the table. I've tried [tableView scrollToRowAtIndexPath:indexPath] after calling reloadRowsAtIndexPaths, which solves the problem, but that makes the table jumpy. It would go down too far leaving whitespace then jump back to the top. How can I shrink the table cell without making it scroll down too far?
After you change something that affects tableView height, you can use these code to update cell height without reloading the table:
[tableView beginUpdates];
[tableView endUpdates];
Maybe you can use a UIView animation in main thread to avoid this,such as:
dispatch_async(dispatch_get_main_queue(), ^{
[UIView animateWithDuration:0.3 animations:^{
[self.tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0] atScrollPosition:UITableViewScrollPositionTop animated:YES];
}];
});
Then try:
if (#available(iOS 11.0, *)) {
self.tableView.estimatedRowHeight = 0;
self.tableView.estimatedSectionHeaderHeight = 0;
self.tableView.estimatedSectionFooterHeight = 0;
self.tableView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentAutomatic;
}

Animation in TableViewCell at reloading data time

I have UITableViewCell with detailed arrow that points to top or to down.
Than I tap on this cell I want to expand it. So I will reload UITableView and I want to animate rotation ofUIImageView`.
Question - is it possible to animate rotation of UIImageView simultaneously with reloading data in UITableView?
Yes, you can create a table with expandable/contactable cell's, also while expanding you can animate the containers of the cell's.
But, one thing until and unless it is a requirement to reload table, I'll suggest you to reload row with the animations performed simultaneously.
Also as you asked in comment what's the best way to track whether the cell needs to be shown simple or detailed, I think it depends on your requirements, like if you need to show only one cell expanded at a time, then you just keep the index of current expanded cell in the class else if you need to show more than one cell expanded at a time than you can use the data source to keep the information whether the cell needs to be show as simple or detailed. If you do not have the data source then you can do the same by creating a list of cell's index path keeping track of detailed cells.
Programmatically you need to do following things to show simple/ detailed cells-
Note: I have assumed to show only one cell expanded at a time.
1) Create a member variable to keep track of expanded cell.
NSIndexPath *expandedCellIndexPath;
2) Return height for expanded cell(if expanded) otherwise for simple cell
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
if([expandedCellIndexPath compare:indexPath] == NSOrderedSame)
return 100.0f;
return 50.0f;
}
3) Create cell as-
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = #"cellId";
CustomCell *customCell = nil;
customCell = (CustomCell *) [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if(customCell == nil)
{
NSString *nibName = #"CustomCell_iPhone";
customCell = (CustomCell *)[[[NSBundle mainBundle] loadNibNamed:nibName owner:self options:nil] lastObject];
customCell.selectionStyle = UITableViewCellSelectionStyleNone;
}
if([expandedCellIndexPath compare:indexPath] == NSOrderedSame)
{
[customCell.m_arrowImageView setImage:[UIImage imageNamed:DOWN_ARROW_KEY]];
[self showSelectedCellAnimations:customCell];
}
else
{
[customCell.m_arrowImageView setImage:[UIImage imageNamed:UP_ARROW_KEY]];
[self showUnSelectedCellAnimations:customCell];
}
// you can also set default up arrow image and rotate it with down arrow image and vice versa
return customCell;
}
4) Rotate Up/Down arrow image using-
- (void)rotateImage:(UIImageView *)image duration:(NSTimeInterval)duration
curve:(int)curve degrees:(CGFloat)degrees
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:duration];
[UIView setAnimationCurve:curve];
[UIView setAnimationBeginsFromCurrentState:YES];
CGAffineTransform transform =
CGAffineTransformMakeRotation(DEGREES_TO_RADIANS(degrees));
image.transform = transform;
[UIView commitAnimations];
}
5) Call above method as-
[self rotateImage:customCell.m_helpImage duration:0.25
curve:UIViewAnimationCurveEaseIn degrees:0.0];
6) Inside didSelectRowAtIndexPath: set the expandedCellIndexPath to the current index path which needs to be expanded and reload previous expanded row to contract and reload current expandedCellIndexPath row to expand, like-
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:NO];
CustomCell *customCell = nil;
customCell = (CustomCell *)[tableView cellForRowAtIndexPath:indexPath];
NSIndexPath *previousIndexPath = expandedCellIndexPath;
if([expandedCellIndexPath compare:indexPath] != NSOrderedSame)
expandedCellIndexPath = indexPath;
[self.m_tableView reloadRowsAtIndexPaths:#[previousIndexPath]
withRowAnimation:UITableViewRowAnimationFade];
[self.m_tableView reloadRowsAtIndexPaths:#[expandedCellIndexPath]
withRowAnimation:UITableViewRowAnimationFade];
[self.m_tableView scrollToRowAtIndexPath:indexPath
atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}

Inline UIPicker Implementation

I'm attempting to implement an inline UIPicker inside a table-view cell, similar to both this and this SO question. I believe I'm close in my implementation, but at the moment, no picker is displayed when I select the appropriate cell. Can anyone point me in the right direction in regards to what I'm doing wrong? Thank you!
Below is where I determine what rows occur in each section:
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
switch (indexPath.section) {
case NotificationsSection:
return [self tableView:tableView cellForAreaOneRowAtIndexPath:indexPath];
break;
case RedZoneSection:
return [self tableView:tableView cellForAreaTwoRowAtIndexPath:indexPath];
break;
case TimeOfDaySection:
return [self tableView:tableView cellForAreaThreeRowAtIndexPath:indexPath];
break;
default:
return nil;
break;
}
}
Below is where I check the number of rows in each section. I suspect my problem may lie here, but I am not completely sure.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
switch (section) {
case AreaOneSection:
return AreaOneRows;
break;
case AreaTwoSection:
return TotalAreaTwoRows;
break;
case AreaThreeSection:
return TotalAreaThreeRows;
break;
default:
return 0;
break;
}
}
Below is where I return the height for each row:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
CGFloat rowHeight = self.tableView.rowHeight;
// if (indexPath.section == TimeOfDaySection && indexPath.row == HourTimeZoneRow && self.timePickerIsShowing == NO){
return rowHeight;
}
Finally, below is where I check if the user selected the index path that I want to insert the UIPicker cell below. If they did, then I call a method to show the the picker.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
if (indexPath.section == SectionThree && indexPath.row == RowOne && self.timePickerIsShowing == NO){
[tableView beginUpdates];
[self showTimePicker];
[tableView endUpdates];
} else{
[self hideTimePicker];
[self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}
}
Finally, below is where I show and hide the UIPicker.
- (void)showTimePicker
{
self.timePickerIsShowing = YES;
self.timePicker.hidden = NO;
//build the index path to where the picker should be inserted here
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:HourTimeZoneRow + 1 inSection:TimeOfDaySection];
static NSString *CellIdentifier = #"TimePickerCell";
UITableViewCell *cell = (UITableViewCell*)[self.tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (!cell) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
}
_timePicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.bounds.size.width, 160)];
[cell.contentView addSubview:self.timePicker];
[self.tableView insertRowsAtIndexPaths:#[indexPath] withRowAnimation:UITableViewRowAnimationFade];
[self.tableView reloadData];
self.timePicker.alpha = 0.0f;
[UIView animateWithDuration:0.25 animations:^{
self.timePicker.alpha = 1.0f;
}];
}
- (void)hideTimePicker {
self.timePickerIsShowing = NO;
self.timePicker.hidden = YES;
[self.tableView reloadData];
[UIView animateWithDuration:0.25
animations:^{
self.timePicker.alpha = 0.0f;
}
completion:^(BOOL finished){
self.timePicker.hidden = YES;
}];
}
In your showPicker function, you don't seem to do anything? You create a cell, do things with it then it dies when that function ends. The cell is not added anywhere from what I can see?
You need to add the picker inside cellForRowAtIndexPath, for the index path you know needs a picker.
What I do requires very little coding. I create a prototype cell in interface builder which contains a picker view. In my case I also add a toolbar above the picker which I can put buttons in to allow Cancel and Done. Add suitable properties to pass in the current values for the picker to show initially. Add a delegate to use to inform the creator (your tableView) of changes in picker values. You can wait for it to finish picking, or use it to update live the cell its editing values for by reloading the cell being edited every time the value changes. I prefer that the picker can pick a value and you can commit it or cancel it.
When a cell needs edited, I update my data model to insert an editing entry then call [tableView reload]. In my case selecting a cell starts editing, clicking cancel/done ends editing.
The table view at this point will start asking for cells. This time one of those will be your new picker cell, which will be for editing the cell it is below. When you create it you pass it the data model reference for the data it is to edit.
So you can achieve all this by simply adding a new prototype cell type and creating it inside cellForRowAtIndexPath when required.
You have a choice as to how to remove the picker. In my case I have Cancel/Done buttons which just removes the entry from the data model and reloads the table again, resulting in it never being created. You could also make the mode as being click on a cell to add and click again to remove. Again you just update the data model and reload. See how the time picker works on the Calander app for a new appointment.
You may be thinking this is a lot of reloads. However it only affects what is on screen and I found it to be easier than trying to figure out the affected cells all the time. Its also very smooth. When it is working you can always optimize the code.
Use constraints in the cell to make sure it has the layout you want.

UITableViewCell expand animation?

I would like to make something like expandable cells. Result I'm trying to achieve is:
Actually I have:
Here is my code:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
DoctorCell *cell = self.prototypeCell;
DoctorModel *doctor = [self.fetchController objectAtIndexPath:frcIndexPath];
// depending on isActive property I add (or do not add) some content.
[cell cellForDoctor:doctor isActiveCell:[self.activeCellIndexPath isEqual:indexPath]];
[cell setNeedsUpdateConstraints];
[cell setNeedsLayout];
[cell layoutIfNeeded];
CGFloat height = [cell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
return height + 1;
}
Here is my cell selection method
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
[tableView deselectRowAtIndexPath:indexPath animated:NO];
NSIndexPath *oldIndexPath = self.activeCellIndexPath;
if ([indexPath isEqual:self.activeCellIndexPath]) {
self.activeCellIndexPath = nil;
oldIndexPath = nil;
} else {
self.activeCellIndexPath = indexPath;
}
[self.doctorTableView beginUpdates];
[self.doctorTableView reloadRowsAtIndexPaths:[NSArray arrayWithObjects:indexPath, oldIndexPath, nil] withRowAnimation:UITableViewRowAnimationNone];
[self.doctorTableView endUpdates];
[self.doctorTableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionTop animated:YES];
}
As you can see, my animation looks weird (kind of moving to wrong position, jumps, etc). What I'm doing wrong? Or do I need to pick another approach for expanding cells?
You can use UITableViews animation automation like this:
Call [tableView beginUpdates];
Change the data source.
Insert or delete rows and sections, or reload them
This should cause new heights to be calculated, etc.
Make sure you use something appropriate for the withRowAnimation parameter of these methods
Call [tableView endUpdates];
Your animation should now perform as expected.
Maybe your problem is that you selected UITableViewRowAnimationNone for the row animation.

Resources