How to align UITableViewCell to the bottom of the UITableView?

问题

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?

回答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. :-)

回答2:

Swift 4 version of Aaron Wasserman answer.

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let headerView = UIView(frame: .zero)
    headerView.isUserInteractionEnabled = false
    return headerView
}

// Added logic to avoid blank space at the top
func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return tableView.frame.size.height - CGFloat(messages.count * cellHeight)
}

 func scrollToBottom(animated: Bool) {
    if isViewLoaded && messages.count > 0 {

        let offset = tableView.contentSize.height - tableView.frame.size.height + tableView.contentInset.bottom

        UIView.animate(withDuration: 0.33, delay: 0, options: [.curveEaseOut, .allowUserInteraction], animations: {
            self.tableView.setContentOffset(CGPoint(x: 0, y: offset), animated: animated)
        }, completion: nil)
    }
}

scrollToBottom method needs to be called after tableView.reloadData()

回答3:

You can use the insertRowsAtIndexPath method, and then get the tableview to scroll to bottom.

[self.tableView insertRowsAtIndexPaths:@[[NSIndexPath indexPathForRow:self.posts.count-1 inSection:0]] withRowAnimation:UITableViewRowAnimationBottom];
[self.tableView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];

If you wish to have that giant gap at the top of your tableview you can set the scroll offset, and adjust this as new items come in.

Another way, would be to flip the tableview upside down, and then flip each row upside down.

来源：https://stackoverflow.com/questions/29997011/how-to-align-uitableviewcell-to-the-bottom-of-the-uitableview

标签

ios

uitableview

cocoa-touch