How to align UITableViewCell to the bottom of the UITableView?

Question

When you insert your first UITableViewCell with insertRowsAtIndexPaths:withRowAnimation:, it usually appears at the top of the UITableView. In the Periscope app, the opposite happens - the first inserted cell is bottom aligned. As new cells are pushed in, the old cells move up in the table. How is this achieved?

Answer 1

In case you're interested in how I did it in the Periscope iOS app, it's actually pretty simple...

TL;DR; Add a transparent table header header view with a height equal to your table view frame's height. Then, as you add cells to your table, simply animate the table view's content offset.

Give your table view a header view:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectZero];
    headerView.userInteractionEnabled = NO; // all touches within this space must go through to the video layer

    return headerView;   // empty header above chat, so messages flow in from bottom
}

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
    return self.tableView.frame.size.height;            // empty header above chat, so messages flow in from bottom
}

Add data to your table (in my case, messages get added to an array called _messages. I then call reloadData on the UITableViewController). Then call this method to animate the cells in:

- (void)scrollTableToBottom
{
    if (!self.isViewLoaded || _messages.count == 0)
        return;

    CGFloat offsetY = self.tableView.contentSize.height - self.tableView.frame.size.height + self.tableView.contentInset.bottom;

    [UIView animateWithDuration:0.33
            delay:0
            options:UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionAllowUserInteraction
            animations:^{
                [self.tableView setContentOffset:CGPointMake(0, offsetY) animated:NO];
            }
            completion:nil];
}

Hope that helps. I found this to be a pretty cheap/simple way of simulating cells anchored to the bottom. I know some people have mentioned flipping the table upside down, but that just seems crazy to me. :-)