Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to vertical align (center) the content of UITableView?

I want to center the content of my UITableView that contains headerView and footerView created at storyboard, and UITableViewCells. How can I achieve this?

Here is what I'm trying to implement to solve my problem but this does not work.

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    CGFloat height = self.tableView.frameHeight - self.navigationController.navigationBar.frameHeight - [UIApplication sharedApplication].statusBarFrame.size.height - (self.rowCount * self.rowHeight);
    self.tableView.tableHeaderView.frameHeight = height / 2.0;
}

So I subtracted the height of the navigationBar & statusBar and cells' height to the tableView's height to get the height of the empty area. Now that I get the height if the empty area, I divided it to 2 for the footer and header's view.

like image 337
Xchord Avatar asked Jul 30 '15 11:07

Xchord


People also ask

How do I center content vertically in a div?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

How do you center block elements vertically?

When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give it a width and set the left and right margins to a value of auto. With text-align: center in mind, most people look first to vertical-align in order to center things vertically.

How do you center a table vertically in HTML?

To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.

What is Uitableview in Swift?

A view that presents data using rows in a single column. iOS 2.0+ iPadOS 2.0+ Mac Catalyst 13.1+ tvOS 9.0+


1 Answers

In the viewWillAppear and in the didRotateFromInterfaceOrientation functions :

CGFloat headerHeight = (self.view.frame.size.height - (ROW_HEIGHT * [self.tableView numberOfRowsInSection:0]))) / 2;

self.tableView.contentInset = UIEdgeInsetsMake(headerHeight, 0, -headerHeight, 0);

This will solve your problem.

EDIT

Call the updateTableViewContentInset function in the viewWillLayoutSubviews and after each reloadData :

Ojective-C

- (void)updateTableViewContentInset {
    CGFloat viewHeight = self.view.frame.size.height;
    CGFloat tableViewContentHeight = self.tableView.contentSize.height;
    CGFloat marginHeight = (viewHeight - tableViewContentHeight) / 2.0;

    self.tableView.contentInset = UIEdgeInsetsMake(marginHeight, 0, -marginHeight, 0);
}

Swift 4

func updateTableViewContentInset() {
    let viewHeight: CGFloat = view.frame.size.height
    let tableViewContentHeight: CGFloat = tableView.contentSize.height
    let marginHeight: CGFloat = (viewHeight - tableViewContentHeight) / 2.0

    self.tableView.contentInset = UIEdgeInsets(top: marginHeight, left: 0, bottom:  -marginHeight, right: 0)
}
like image 78
Pipiks Avatar answered Oct 27 '22 21:10

Pipiks