Setting a minimum content size on a UITableView - ios

I have a view at the top of a view controller, and a tableview underneath it.
I've made it such that as the tableview is scrolled up the top view scrolls up too, up to a maximum amount, of lets say 50 points.
The tableview also has a top inset of 50:
tableView = UIEdgeInsets(top: 50, left: 0, bottom: 0, right: 0)
... so that it's cells start below the top view.
And in the scrollview delegate there is some code along the lines of:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let scrollViewYOffset = ...
topViewHeightConstraint.constant = max(minTopViewHeight, minTopViewHeight - scrollViewYOffset)
}
This ensures as the user drags down on the tableview the top view 'sticks' to it, and is also pushed up when the user pushes the table view up.
I've drawn this picture to better describe what the Storyboard looks like:
So far so good. When there are a lot of cells and the user scrolls the table view up, the top view remains at it's minimum height nicely.
But if you are scrolled up - so the top view is at it's minimum - then the number of cells are reduced, the top view pings back down to it's maximum height.
This is because the actual content size of the tableview has dropped below its bounds height, and so as a scrollview it brings the top of the content to the top of the scrollview again (plus the 50 point top inset of course).
I would like to be able to scroll the tableview up, so the top view remains at its minimum height, regardless of the number of cells it contains - i.e. regardless of it's content size.
Can anyone think of a clever way to set a minimum content size on the table view?
(So far I've tried messing around with the footer, having a cell at the bottom that is essentially a spacer - this messes up the tableview's logic and some reordering code I have in there. I've attempted to coerce the offers etc. to my will, but haven't quite worked out how to achieve this.)
I would greatly appreciate some UI genius to point me in the right direction :) Thank you.
UPDATE:
Thank you for all the answers and comments.
After trying various types of footer and header views, tweaking constraints & layout priorities on scroll, adding spacer cells, putting the tableview inside a scrollview, etc. - it finally occurred to me I was making this more complicated than I needed to, and should just update the cause of the problem on the scrollViewDidScroll, the contentInset value.
See the answer below for a code example that achieves the behaviour I was looking for.

As the contentInset is what is causing the tableview to ping back to the wrong point, I simply needed to adjust the content inset as the tableview was scrolled up/down.
Here is some example code of what I did:
let maxPointsTopViewCanMoveUp: CGFloat = 50
let topInset = abs(min(max(-maxPointsTopViewCanMoveUp, scrollView.contentOffset.y), 0))
scrollView.contentInset = UIEdgeInsets(top: topInset, left: 0, bottom: 0, right: 0)
scrollView.scrollIndicatorInsets = UIEdgeInsets(top: topInset, left: 0, bottom: 0, right: 0)
let amountToMoveTopViewUp = maxPointsTopViewCanMoveUp - topInset
topViewToSuperviewTopConstraint.constant = amountToMoveTopViewUp
This is called from the scrollViewDidScroll of the tableview.
It means that when there are too few cells in the tableview to fill the content, the top the tableview sticks in the place it had been scrolled up to (i.e. the amount it had pushed up the top view).

Some ideas that you can try:
Create a "dummy" row on index 0 and make it's height be 50 (it will be hidden below the top view). Maybe you can leave that dummy row in section 0 and the rest of your data in section 1, so you don't have to think about it when deleting your data.
Or, instead of a dummy row, you can set the height of the tableView's header to be 50
Maybe set a minimum height constraint on the tableView, and keep it's content compression resistance priority high.

Related

Inconsistent tableView contentInset Behaviour

I am experiencing issues with setting contentInset on a tableView behaving inconsistently, depending on when it is called. I am using the following:
let edgeInsets = UIEdgeInsets(top: 52, left: 0, bottom: 0, right: 0)
tableView.contentInset = edgeInsets
tableView.scrollIndicatorInsets = edgeInsets
The top value is hard set to 52 there for testing, but in practice will be calculated from another view.
I am doing this because I need to have a view pinned to the top of a table view controller.
The behaviour I am experiencing is that if I use that code in the viewDidLoad or viewWillAppear functions, it works as I would expect. The tableView is below the pinned view and scrolled to its top (so all its content is visible). However, at that point, the pinned view has not been laid out, and its height is 0, so I can't use it to correctly set the top of the content inset (hence the hard 52).
If I use the above code from the viewDidLayoutSubviews function, which is where I have had it the whole time, it does not have the same results. The insets are actually set, but the tableView is also scrolled that much down, hiding its top rows behind the pinned view. I can then scroll up to see the top cells, and the tableView is then inset under the header, but it shouldn't start scrolled like that, and I have no idea why it is.

scrolling/resizing UITableView

I'll get right to the point.
I have a UIViewController that has two subviews in it. The top one (let's call it HeaderView from now one) is a custom UIView and the bottom one is a UITableView.
I have set them up in InterfaceBuilder so that the HeaderView has 0 margin from the left, top and right, plus it has a fixed height.
The UITableView is directly underneath with 0 margin from all sides.
My goal is to achieve a behaviour such that when I start scrolling the UITableView's content the HeaderView will start shrinking and the UITableView becomes higher without scrolling. This should go on until the HeaderView has reached a minimum height. After that the UITableView should start scrolling as normal. When scrolling down the effect should be reversed.
I have initially started this out using a UIScrollView instead of the UITableView and I have achieved the desired result. Here is how:
connect the UIScrollView to the outlet
#IBOutlet weak var scrollView: UIScrollView!
set the UIScrollViewDelegate in the controller's viewDidLoad() method
self.scrollView.delegate = self
and declared the UIViewController to conform to the protocol
intercept when the UIScrollView scrolls:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
self.adjustScrolling(offset: scrollView.contentOffset.y, scrollView: scrollView)
}
in my adjustScrolling(offset:scrollView:) method the "magic" happens
Now let's look at what happens in this method.
private func adjustScrolling(offset: CGFloat, scrollView: UIScrollView) {
// bind value between 0 and max header scroll
let actualOffset: CGFloat = offset < 0 ? 0 : (offset >= self.maxHeaderScroll ? self.maxHeaderScroll : offset)
// avoid useless calculations
if (actualOffset == self.currentOffset) {
return
}
/**
* Apply the vertical scrolling to the header
*/
// Translate the header up to give more space to the scrollView
let headerTransform = CATransform3DTranslate(CATransform3DIdentity, 0, -(actualOffset), 0)
self.header.layer.transform = headerTransform
// Adjust header's subviews to new size
self.header.didScrollBy(actualOffset)
/**
* Apply the corrected vertical scrolling to the scrollView
*/
// Resize the scrollView to fill all empty space
let newScrollViewY = self.header.frame.origin.y + self.header.frame.height
scrollView.frame = CGRect(
x: 0,
y: newScrollViewY,
width: scrollView.frame.width,
height: scrollView.frame.height + (scrollView.frame.origin.y - newScrollViewY)
)
// Translate the scrollView's content view down to contrast scrolling
let scrollTransform = CATransform3DTranslate(CATransform3DIdentity, 0, (actualOffset), 0)
scrollView.subviews[0].layer.transform = scrollTransform
// Set bottom inset to show content hidden by translation
scrollView.contentInset = UIEdgeInsets(
top: 0,
left: 0,
bottom: actualOffset,
right: 0
)
self.currentOffset = actualOffset
}
If I haven't forgotten anything this should be enough to achieve the desired effect. Let me break it down:
I calculate the actualOffset binding it between 0 and self.MaxHeaderScroll which is just 67 (I think, it's calculated dynamically but this doesn't really matter)
If I see that the actualOffset hasn't changed since the last time this function was called I don't bother to aplly any changes. This avoids some useless calculations.
I apply the scrolling to the header by translating it up with a CATransform3DTranslate on just the y axis by negative actualOffset.
I call self.header.didScrollBy(actualOffset) so that the HeaderView can apply some visual changes internally. This doesn't concearn the question though.
I resize the scrollView so that it keeps 0 margin from top and bottom now that the HeaderView is higher up.
I translate down the scrollView's content by the same actualOffset amount to contrast the scrolling. This piece is essential to the correct visual effect that I want to achieve. If I didn't do this, the scrollView would still resize correctly but the content would start scrolling right away, which I don't want. It should only start scrolling once the HeaderView reaches it's minimum height.
I now set a bottom inset in the scrollView so that I am able to scroll it all the way to the end. Without this, the last part of the scrollView would be cut off since the scrollView itself would think it reached the end of it's content.
Lastly I store the actualOffset for later comparison
As I said, this works fine. The problem arises when I switch from a UIScrollView to a UITableView. I assumed it would work since UITableView inherits from UIScrollView.
The only piece of code that doesn't work is the number 6. I don't really know what is going wrong so I will just list everything I have found out and/or noticed. Hopefully someone will be able to help me out.
in the case of the UIScrollView, in point 6, the scrollView.subviews[0] refers to a view that holds all the content inside it. When I change to UITableView this subview seems to be of the type UITableViewWrapperView which I could not find any documentation about, nor does XCode recognize it as a valid class. This is already frustrating.
if in point 6 I also give some translation on the x axis (let's say of 50) I can see an initial very quick translation that is immediately brought back to 0. This only happens when the UITableView starts scrolling, it doesn't go on while scrolling.
I have tried changing the frame of the subview in point 6 to achieve the desired result. Although the scrolling is correct, the top cells start disappearing as I scroll the UITableView. I thin this is because I am using dequeueReusableCell(withIdentifier:for:) to instatiate the cells and the UITableView thinks that the top cells aren't visible when they actually are. I wasn't able to work around this problem.
I have tried setting the self.tableView.tableHeaderView to a UIView of the actualOffset height to contrast scrolling but this gave a weird effect where the cells would not scroll correctly and when the UITableView was brought back to the initial position, there would be a gap on top. No clue about this either.
I know there's a lot here so please don't hesitate asking for more details. Thank you in advance.
I made something like this recently, so heres how I achieved it:
Make a UIView with a height constraint constant and link this to your view/VC, have you UITableview constrained to the VC's view full screen behind the UIView.
Now set your UITableViews contentInset top to the starting height of your 'headerView' now, in the scrollViewDidScroll you adjust the constant until the height of the header is at its minimum.
Here is a demo
If you just run it, the blue area is your 'header' and the colored rows are just any cell. You can autolayout whatever you want in the blue area and it should auto size and everything

UITableView - footer of last section scrolls off the bottom of the screen. How to prevent?

I have a grouped UITableView. I've implemented tableView(:titleForHeaderInSection:) and tableView(:titleForFooterInSection:). As I scroll a long table, I can see that the section headers and footers contain the expected data. When I get to the bottom of the table and I drag up to see the footer of the last section, it has the correct data, but when I release my finger, the footer scrolls back down past the bottom of the screen and out of view. The last cell of the last section is what appears at the bottom of the screen rather than the footer of the last section.
How to fix it?
There's the last section and its footer. My finger is still on the screen
When I release my finger, the final footer slides off the bottom of the screen.
You can fix scrolling content issue by considering one of the following methods.
Method 1: Natural way to fix your problem by setting up your tableView frame and its bottom constraint properly from your storyboard.
Updated:
Method 2: You can validate your tableView frame in viewDidLayoutSubviews or viewWillLayoutSubviews
override func viewDidLayoutSubviews() {
tableView.frame = CGRect(x: 0, y: 0, width: tableView.frame.width, height: tableView.frame.height - (tabBarController?.tabBar.frame.size.height)!)
}
Method 3: Setting up your tableView frame by adjusting scroll view insets.
override func viewDidLayoutSubviews() {
tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: (tabBarController?.tabBar.frame.size.height)!, right: 0)
}
I think it's blocked by the tabbar.
If using storyborad, reset the constraint of your tableView.
If not, you need to set the frame of your tableView correctly.

Sticking a TableView Header to the top, causes the header to not "interact" when user scrolls down

I am sticking my UITableView header to the top when user scrolls down the UITableView. The header view itself is a UIButton which does something when clicked.
The button responds well to touches when contentOffset Y is 0. However when the user scrolls down, the button still sticks to the top but every touches "passes through" it.
Here is my code to stick the header to the top:
var offsetY = scrollView.contentOffset.y;
var headerContentView: UIView = self.tableView.tableHeaderView?.subviews[0] as UIView;
headerContentView.frame = CGRect(x: 0, y: max(0, offsetY), width: headerContentView.bounds.width, height: headerContentView.bounds.height);
Thanks.
If you're going to be moving the view around yourself, don't use tableHeaderView at all. Instead add it as a subview of the table view directly and keep a reference to it. Then in scrollViewDidScroll: layout the view's Y offset according to scrollView.contentOffset.y.
You may need to trigger this layout in viewDidLoad so that it appears properly before any scroll events happen. If the view shouldn't overlap the top cell when the table is scrolled to the top, set the view's height to the table's contentInset's top.

TableView ContentInset does not shrink cell width / Add horizontal padding to TableView contents

I'd like to have a UITableView which is full screen. But the content of the UITableView should have a padding on the left and right.
So I tried to set ContentInset. But now the cells are as wide as the UITableView and the UITableView scrolls horizontally.
Is there a way to say that the UITableView content's width should become narrowed by the horizontal content insets? Or do I have to add the padding to all cells and header/footer views?
I don't want to narrow the table view itself, because the scroll indicator should stay at the right side of the screen and not in the middle.
The here (How to set the width of a cell in a UITableView in grouped style) suggested solution seems to be not as generic as i'd love to, beacuse the cells and header and footer views have to know about the padding (at least 3 places to maintain instead of one)
I don't want to narrow the table view itself, because the scroll
indicator should stay at the right side of the screen and not in the
middle.
This makes you happy?
_tableView.clipsToBounds = NO;
_tableView.scrollIndicatorInsets = UIEdgeInsetsMake(0, 0, 0, -30.f);
If you don't like clipsToBounds = NO effects, you can embed the tableView in container view which is clipsToBounds = YES.
Set the layout margins of the table view. For this to work make sure your constraints in the cells are set relative to the superview margin.
tableView.layoutMargins = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40)

Resources