Adjusting Container View's Height to Match Embedded UITableView - ios

Using Storyboards and Autolayout, I have a UIViewController with a UIScrollView as the main view. I have several container views embedded in the scroll view. Some of those embedded container views contain UITableViews, each having cells of different heights. I'll need the tableView's height to be large enough to show all cells at once, as scrolling will be disabled on the tableView.
In the main UIViewController, container view's height has to be defined in order for the scroll view to work properly. This is problematic because there's no way for me to know how large my tableView will be once all it's cells of varying heights are finished rendering. How can I adjust my container view's height at runtime to fit my non-scrolling UITableView?
So far, I've done the following:
// in embedded UITableViewController
//
- (void)viewDidLoad {
// force layout early so I can determine my table's height
[self.tableView layoutIfNeeded];
if (self.detailsDelegate) {
[self.detailsTableDelegate didDetermineHeightForDetailsTableView:self.tableView];
}
}
// in my main UIViewController
// I have an IBOutlet to a height constraint set up on my container view
// this initial height constraint is just temporary, and will be overridden
// once this delegate method is called
- (void)didDetermineHeightForDetailsTableView:(UITableView *)tableView
{
self.detailsContainerHeightConstraint.constant = tableView.contentSize.height;
}
This is working fine and I was pleased with the results. However, I have one or two more container views to add, which will have non-scrolling tableViews, and I'd hate to have to create a new delegate protocol for each container view. I don't think I can make the protocol I have generic.
Any ideas?

Here's what I ended up doing:
// In my embedded UITableViewController:
- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView.rowHeight = UITableViewAutomaticDimension;
self.tableView.estimatedRowHeight = 60.0;
// via storyboards, this viewController has been embeded in a containerView, which is
// in a scrollView, which demands a height constraint. some rows from our static tableView
// might not display (for lack of data), so we need to send our table's height. we'll force
// layout early so we can get our size, and then pass it up to our delegate so it can set
// the containerView's heightConstraint.
[self.tableView layoutIfNeeded];
self.sizeForEmbeddingInContainerView = self.tableView.contentSize;
}
// in another embedded view controller:
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
self.sizeForEmbeddingInContainerView = self.tableView.contentSize;
}
// then, in the parent view controller, I do this:
// 1) ensure each container view in the storyboard has an outlet to a height constraint
// 2) add this:
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
self.placeDetailsContainerHeightConstraint.constant = self.placeDetailsTableViewController.sizeForEmbeddingInContainerView.height;
self.secondaryExperiencesContainerHeightConstraint.constant = self.secondaryExperiencesViewController.sizeForEmbeddingInContainerView.height;
}
I haven't done this yet, but it'd probably be best to create a Protocol with a property of CGSize sizeForEmbeddingInContainerView that each child view controller can adopt.

Here's what worked for me perfectly.
- (void)updateSizeBasedOnChildViews {
// Set height of container to match embedded tableview
CGRect containerFrame = self.cardTableContainer.frame;
containerFrame.size.height = [[[self.cardTableContainer subviews] lastObject]contentSize].height;
self.cardTableContainer.frame = containerFrame;
// Set content height of scrollview according to container
CGRect scrollFrame = self.cardTabScrollView.frame;
scrollFrame.size.height = containerFrame.origin.y + containerFrame.size.height;
// + height of any other subviews below the container
self.cardTabScrollView.contentSize = scrollFrame.size;
}

Related

intrinsicContentSize for UITableView centered in its superview

I want to center a subclassed tableview (TSNInformationTableView) in its superview using xib file.
The height of the table is set using a custom intrinsic size:
The issue is the table can have a dynamic size/height, different number of cells with different text inside of them. So in the TSNInformationTableView I have defined the intrinsicContentSize method:
- (CGSize) intrinsicContentSize {
return self.contentSize
}
The problem I have with the self.contentSize.height is it does not return the correct height of the table but something somewhat smaller. That is why I tried to compensate this with the multiplier 1.45. It does not scale properly with different number od the cells.
In the image there is a visible cut of the last cell because the height of the table defined by the intrinsicContentSize is not correct.
The table is initialized with the following code:
self.informationTableView.estimatedRowHeight = 80;
self.informationTableView.rowHeight = UITableViewAutomaticDimension;
[self.informationTableView setScrollEnabled:NO];
UPDATE
I had to add this method in the controller where the table view (TSNInformationTableView) is nested:
- (void) viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
if(!self.isInformationTableViewLoaded) {
self.isInformationTableViewLoaded = YES;
[self.InformationTableView invalidateIntrinsicContentSize];
[self.InformationTableView setNeedsLayout];
}
}
isInformationTableViewLoaded is just a simple BOOL property in the controller indicating that the table has been created (so that we can get proper table view size). It works without any animation issue now.
Also the table's estimatedRowHeight should be set to e.g. 1000.
I had to add - (void) viewDidLayoutSubviews in the controller where the table is nested. See the edit at the end of the original post.

UITableView: Set table header view height based on screen size

I have a table view with a table header view created through interface builder inside the same xib. I want to set the height of the header based on the screen size, for example 50% of the screen height.
Here is what I get with a static height on an iPhone 4s:
And here is is what I get on an iPhone 6:
Note that the content of the header is static.
I cannot set constraints to the header using auto layout. I tried to set a height constraint based on the height of the table view but it does not seem to be possible in interface builder. Control-dragging does not work. I cannot drag a line from the header to the table view or even to the header itself.
How can I set the header's height based on the screen size?
Unfortunately, table header views cannot be sized using auto layout. You can use auto layout for elements inside the header but you have to specify the header's size by explicitly setting its frame. If the header's height is static and known at compile time you can use IB. However, if the height is dynamic or depends on the device (as in your case), you have to set it in code.
A quite flexible solution would be to create a custom subclass of UITableView and adapt the header's frame in the layoutSubviews method. This way the header's size gets automatically adjusted when the table view is resized. You have to be careful, however, to only re-apply the header's frame when a change is actually needed to avoid an infinite loop.
Here's what it would look like in Objective-C:
#interface MyTableView : UITableView
#end
#implementation MyTableView : UITableView
- (void)layoutSubviews {
[super layoutSubviews];
if (self.tableHeaderView) {
UIView *header = self.tableHeaderView;
CGRect rect = CGRectMake(0, 0, self.bounds.size.width,
self.bounds.size.height / 2);
// Only adjust frame if needed to avoid infinite loop
if (!CGRectEqualToRect(self.tableHeaderView.frame, rect)) {
header.frame = rect;
// This will apply the new header size and trigger another
// call of layoutSubviews
self.tableHeaderView = header;
}
}
}
#end
The Swift version looks like this:
class MyTableView: UITableView {
override func layoutSubviews() {
super.layoutSubviews()
if let header = tableHeaderView {
let rect = CGRectMake(0, 0, bounds.size.width, bounds.size.height / 2)
// Only adjust frame if needed to avoid infinite loop
if !CGRectEqualToRect(header.frame, rect) {
header.frame = rect
// This will apply the new header size and trigger
// another call of layoutSubviews
tableHeaderView = header
}
}
}
}
Note that the above snippets use the bounds of the table view rather than the screen size to calculate the header size.
Update: Note that sometimes an additional call to layoutIfNeeded is needed after setting the tableHeaderView property. I ran into an issue where section headers were drawn above the header view without calling layoutIfNeeded.
I have tried the following code and it seems to work on iOS7 and iOS8. It changes the height of the header frame to half the screen height. You might want to subtract the height of the navigation and status bar from the screen height before /2, if the header has to be half the size of the table view area only.
- (void)viewDidLoad
{
[super viewDidLoad];
// Your other code
// Set the table header height
CGRect headerFrame = self.tableView.tableHeaderView.frame;
headerFrame.size.height = [[UIScreen mainScreen] bounds].size.height/2;
self.tableView.tableHeaderView.frame=headerFrame;
}

iOS 8 - Initially hide a UITableView's headerView from view

Just like in the native iOS Mail app, when I push a UITableViewController onto a UINavigationController, I would like to make it so that the UITableView initially appears slightly scrolled downwards, obscuring its headerView beneath the navigation controller's navigation bar.
At the same time, even if the height of all of the cells is smaller than the height of the table view, it should be possible for the user to scroll up and down to explicitly show or hide the header view again.
With that logic, it would appear that there are two considerations to make for this implementation:
1) Ensuring that the minimum content size of the table view is at least the height of the table view's frame + the height of the header view.
2) When the table view is initially presented, the content offset is incremented by the height of the header view.
I've tried manually setting both the contentOffset and contentSize properties of the table view in 'viewWillAppear', however this appears to have no effect (It's possible the table view is getting reloaded after that point). Trying to set them in 'viewDidAppear' will work, but that's too late as it only gets called once the 'push' animation has completed.
While this sort of question has been asked before for previous iOS versions, I was unable to get any of them working in iOS 8. Additionally, they all dealt with changing the offset, but not the contentSize of the table view.
Has anyone gotten this sort of behavior working in iOS 7 and/or 8 before?
Update - (30/1/2015)
Alright. This wasn't sitting well with me last night, so I had another play with it, and I found a MUCH better and cleaner solution.
I discovered that the tableView property of UITableViewController is NOT readonly. So it actually makes more sense to simply manage the contentSize property in a UITableView subclass and then assign that subclass back to the UITableViewController.
#implementation TOCustomTableView
- (void)setContentSize:(CGSize)contentSize
{
CGFloat scrollInset = self.contentInset.top + self.contentInset.bottom;
CGFloat height = (CGRectGetHeight(self.bounds) - scrollInset) + CGRectGetHeight(self.tableHeaderView.frame);
contentSize.height = MAX(height, contentSize.height);
[super setContentSize:contentSize];
}
#end
---
#implementation TOCustomTableViewController
- (void)viewDidLoad
{
[super viewDidLoad];
self.tableView = [[TOCustomTableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
}
#end
This way, the table view's minimum contentSize is always explicitly set to be the height of the table view + the headerView size, achieving the desired effect with zero jittering. :)
Original Answer
trick14 pointed me in the right direction. So the correctly functioning code I ended up with.
- (void)resetTableViewInitialOffset
{
CGPoint contentOffset = self.tableView.contentOffset;
contentOffset.y = self.tableView.contentInset.top + CGRectGetHeight(self.headerView.frame);
self.tableView.contentOffset = contentOffset;
}
- (void)resetTableViewContentSize
{
CGSize contentSize = self.tableView.contentSize;
CGFloat scrollInset = self.tableView.contentInset.top + self.tableView.contentInset.bottom;
CGFloat height = (CGRectGetHeight(self.view.bounds) - scrollInset) + CGRectGetHeight(self.headerView.frame);
contentSize.height = MAX(height, contentSize.height);
self.tableView.contentSize = contentSize;
}
- (void)viewDidLayoutSubviews
{
[super viewDidLayoutSubviews];
if (!self.headerBarInitiallyHidden) {
[self resetTableViewContentSize];
[self resetTableViewInitialOffset];
self.headerBarInitiallyHidden = YES;
}
}
I'm also making sure to call 'resetTableViewContentSize' each time I perform a 'reloadData' on the table view as well.

Get table view size of child view controller

In viewDidLoad of my child view controller (UITableViewController) I'm getting the contentSize.Height after calling layoutIfNeeded. Than I set the preferredContentSize with these values. In viewDidLoad of my container (which holds this child) I also set the preferredContentSize based on the child's preferredContentSize. This works on iOS 8 but not on iOS 7.
I know that the viewDidLoad of the child view controller is called after the viewDidLoad of the container.
How do I get the table view size of the child or how can I force that the child view has layout its subviews before the container has?
You can try sending the layout request after all views have loaded:
// In the container
-(void) viewDidLoad {
// ...
[self.view performSelector:#selector(setNeedsLayout) withObject:nil afterDelay:0];
}
I ended up with the following:
In the child view controller I created a separate method which takes the values for the table view. Afterwards I set the preferred content size.
public void setDocumentList(List<string> documentList){
this.documentList = documentList;
this.TableView.ReloadData ();
// adjust size for popover
float height = TableView.ContentSize.Height;
if (this.View.Bounds.Height > 0) {
// limit the max size of the popover
height = Math.Min (this.View.Bounds.Height, height);
}
this.PreferredContentSize = new SizeF (320f, height);
}
In my container I have a similar function, but here I only set the preferred content size.
public void setDocumentList(List<string> documentList){
documentListController.setDocumentList (documentList);
this.PreferredContentSize = documentListController.PreferredContentSize;
// some autolayout constraints ...
}
This kind of works. I get the correct values, but the values of the popover are not correct in the beginning. If someone is wondering this is the C# language. I'm still open for better solutions.
You can load the tableView of the child by calling viewDidLoad of the child in the parent, and forcing the tableview to layout.
// Parent.m
[Child view];
[self layoutParentViewsOrDoSomething];
// Child.m
-(void)viewDidLoad{
[super viewDidLoad];
[self layoutSubviews];
// or [tableView reloadData]...
}

Where does UICollectionView etc calculate content size so that I can permanently increase it?

I want to add a view to the bottom of the content view of both a collection view and table view (and hence is applicable to any kind of scroll view) and I also want to be able to scroll down to see this view e.g.:
- (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
// Observe change in content size so can move my view when
// content size changes (keep it at the bottom)
[self addObserver:self forKeyPath:#"contentSize"
options:(NSKeyValueObservingOptionPrior)
context:nil];
CGRect frame = CGRectMake(0, 0, 200, 30);
self.loadingView = [[UIView alloc] initWithFrame:frame];
[self.loadingView setBackgroundColor:[UIColor blackColor]];
[self addSubview:self.loadingView];
// Increase height of content view so that can scroll to my view.
self.contentSize = CGSizeMake(self.contentSize.width, self.contentSize.height+30);
}
return self;
}
However when, for example, a cell is inserted the contentSize is recalculated and whilst my view is still visible at the bottom of the content size (due to being able to bounce the scroll view) I can no longer scroll to it.
How do I ensure that the content size stays, as in my code, 30 points taller?
An additional question is:
is there any other way to track content size other than observing it?
Thanks in advance.
I have tried:
- (void)layoutSubviews
{
[super layoutSubviews];
self.contentSize = CGSizeMake(self.contentSize.width, self.contentSize.height+30);
}
However this causes all sorts of display issues.
If i understand correctly, you want to show a loading view in the tableView (f.e.) at the bottom. You could add an extra UITableViewCell containing this LoaderView to the tableView.
(Must change the numberOfRowsInTableView)
In another perspective for scrollViews: Use smaller bounds then the content itself, to make it scrollable. For example frame = fullscreen. At every cell adding or modification in subviews (adding) contentSize = content size + 30 px.
Try making a subclass of the scroll view and override the contentSize getter to return always 30 px more.
- (CGSize)contentSize {
CGSize customContentSize = super.contentSize;
customContentSize.height += 30;
return customContentSize;
}
(I'm writing the code by memory, there may be errors)

Resources