When using prefersLargeTitles for a UINavigationController's UINavigationBar in iOS 11, the nav bar increases height. The increase is from 44 to 96 on the iPhones I have checked, but I think those numbers can change per device (or at least we need to code as if they can).
I want to programmatically find the 'extra' height - the height of the large titles area that is added beneath the traditional UINavigationBar when a large title is displayed. I can easily find the entire height of the bar with the large title displayed, but is there a way to programmatically find the height of the large title portion of the bar alone (without any hardcoding)?
The reason I need this is that there are times that I want to programmatically scroll to the top of a UITableView, pulling down the large title (which has scrolled up under the "regular height" nav bar) so that it is showing, and the content offset I need is the extra height of the nav bar. I could use the total height of the navigation bar, but this would pull the UITableView down too far. To do this now, I need to hardcode as below:
[self.tableView setContentOffset:CGPointMake(0, -52) animated:NO];
I think you won't find a way to clearly resolve your problem. What you are asking for is a part of a navigation bar internals which is not exposed to the user. However, I think I can offer you a workaround.
To understand this let's take a look at the navigation bar (with large titles enabled) in the view debugger. As you can see on the below image there is an extra view containing the large title for a particular view controller. This view is not present when you don't support large titles.
Basically, what you want to know is the height of that view.
This is my proposed solution/workaround
extension UINavigationBar
{
var largeTitleHeight: CGFloat {
let maxSize = self.subviews
.filter { $0.frame.origin.y > 0 }
.max { $0.frame.origin.y < $1.frame.origin.y }
.map { $0.frame.size }
return maxSize?.height ?? 0
}
}
What it does
Filters out subviews which start on the top of the navigation bar. They are most probably a background or the navigation area, we don't need them.
Finds the lowest subview in the in the navigation bar.
Maps the resulted subview frame to the frame size.
Returns the height of the found subview or 0 if none was found.
The obvious drawback of this approach is that it's tightly coupled to the structure of the navigation bar which may change in the future. However, it's unlikely that you will get something more than one or another dirty trick.
The result of the execution should look like follows.
print("Extra height: \(navigationController!.navigationBar.lagreTitleHeight)")
Extra height: 52.0
Seems like calling navigationBar.sizeToFit() forces the navigationBar to adjust its size as it shows large title. Therefore you can calculate top safe area easily. The solution that we came up with is next:
self.navigationController?.navigationBar.sizeToFit()
let navigationBarOffset = navigationController?.navigationBar.frame.origin.y ?? 0
let navigationBarHeight = navigationController?.navigationBar.frame.height ?? 0
let offset = -navigationBarOffset - navigationBarHeight
if collectionView.contentOffset.y > offset {
let contentOffset = CGPoint(x: 0, y: offset)
collectionView.setContentOffset(contentOffset, animated: true)
}
As I understand it, you have your tableView origin under the navigationBar, at y = 0 in your UIViewController's view.
Your tableView should have its top bound fix to the top layout guide, or use the new safe area. That way you won't have to programmatically calculate what's the size of the navigationBar.
If you never used it, take a look at auto-layout.
You can simply scroll to the top of the table view without knowing the size of the navigation bar. UITableView comes with an API for that.
Option 1
// Get the first index path. You might want to check here whether data source item exists.
NSIndexPath *firstIndexPath = [NSIndexPath indexPathForRow:0
inSection:0];
// Scroll to it. You can play with scroll position to get what you want
[tableView scrollToRowAtIndexPath:firstIndexPath
atScrollPosition:UITableViewScrollPositionTop
animated:YES];
Option 2
CGPoint offset = CGPointMake(0.0, -tableView.contentInset.top);
[tableView setContentOffset:offset animated:YES];
I just experienced this same issue.
-(void)layoutSubviews{
[super layoutSubviews];
CGRect rectStatusBar = [[UIApplication sharedApplication] statusBarFrame];
if (rectStatusBar.size.height==44.f) {
//statusBar shows
}else{
if (#available(iOS 11.0, *)) {
for ( UIView*view in self.subviews) {
if ([NSStringFromClass(view.classForCoder) isEqualToString:#"_UINavigationBarContentView"]) {
view.frame = CGRectMake( 0,20,view.frame.size.width,44);
}
else if ([NSStringFromClass(view.classForCoder) isEqualToString:#"_UIBarBackground"]) {
view.frame = CGRectMake(0,0,view.frame.size.width, 64);
}
}
}
}
}
Related
I have a new design for my app and it include a parallax scroll for a image display on top of tableView.
I know how to add a parallax effect with putting a image in to a cell, like this -
when table scrollViewDidScroll get called :
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint currentOffset = scrollView.contentOffset;
if (currentOffset.y > _lastContentOffset.y) {
//Scroll Up
_containerView.clipsToBounds = true;
_bottomSpaceConstraint.constant = -scrollView.contentOffset.y / 2;
_topSpaceConstraint.constant = scrollView.contentOffset.y / 2;
} else {
//Scroll Down
_topSpaceConstraint.constant = scrollView.contentOffset.y;
_containerView.clipsToBounds = false;
}
_lastContentOffset = currentOffset;
}
(the _bottomSpaceConstraint and _topSpaceConstraint are the Image top and Bottom constraint which inside the tableView cell in section 0)
But my problem is I needs to stop the image scrolling up when it reached the size of my navigation bar. (my navigation bar background is transparent) I don't want the image to go all the way top. But it is a cell which is inside my tableView so it is going all the way to top until it disappear when scrolling. I need help for stop this image get scrolled. Maybe my approach is not correct if I want to achieve this effect.
This effect is on android and its called "collapsing toolbar layout".
http://antonioleiva.com/collapsing-toolbar-layout/
Does someone know how to do this "collapsing toolbar layout" effect for iOS.
Thanks a lot for any help!
Try creating a UIView that will contain the image and set the tableHeaderView in the tableView. Then in scrollViewDidScroll: update the height and top constraints of the header view.
I am using autolayout with a scroll view. It is working great, but I need to be able to scroll to specific pages programmatically. Specifically, I need to scroll to the last page after the view loads. How do I do this? My scrolling essentially has the visual format shown below, except the number of pages is dynamic.
visual format for vertically scrolling (swap V and H for horizontally scrolling):
view hierarchy is scrollContainer(UIView) -> scrollView(UIScrollView) -> contentView(UIView) -> pages(UIView’s)
V:|scrollView|
H:|scrollView|
V:|contentView|
H:|contentView|
V:|[page1(==scrollContainer)][page2(==scrollContainer)][page3(==scrollContainer)]|
H:|[page1(==scrollContainer)]|
H:|[page2(==scrollContainer)]|
H:|[page3(==scrollContainer)]|
edit: clarifying my question
The code to offset the scrollview is below. But when can I get the origin of the page I want to scroll to using autolayout? If I put it in viewDidLayoutSubviews, it updates every time the device is rotated. I need to update just when the view is loaded. Is there a more appropriate method to override? Or is there a way of setting the origin with a constraint?
let lastPage = pages?.last
if lastPage != nil {
let origin = lastPage!.frame.origin
self.scrollView.setContentOffset(origin, animated: false)
}
If it's a horizontal scroll view:
CGPoint lastPage = CGPointMake((numberOfPages - 1) * pageWidth, 0.0f);
If vertical:
CGPoint lastPage = CGPointMake(0.0f, (numberOfPages - 1) * pageHeight);
Then just use the scroll view's method:
[scrollView setContentOffset:lastPage animated:YES];
You can leave this code in viewDidLayoutSubviews, just add an if-statement to test if it's the first time or not:
if (!self.alreadyScrolled) {
[self scrollToDesiredPage];
self.alreadyScrolled = YES;
}
You should use:
CGPoint desiredOffset = CGPointMake(0.0,desiredPageNumber * pageHeight);
[self.scrollView setContentOffset:desiredOffset animated:YES];
Obviously tweak it as you need to. I don't believe you can or should achieve this by animating constraints, because of the unique way autolayout treats scroll views.
I have a UIScrollView A (in fact a UICollectionView) filling the screen inside a UINavigationController B. The controller B's adjustScrollViewInsets is set to true.
I want to hide the navigation bar when user scrolls up, and show it when down. Following is my code:
func scrollViewDidScroll(scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentSize.height - scrollView.frame.size.height && self.lastContentOffset > scrollView.contentOffset.y) {
// dragging down
if self.navigationController!.navigationBarHidden {
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
} else if (self.lastContentOffset > 0 && self.lastContentOffset < scrollView.contentOffset.y) {
// dragging up
if !self.navigationController!.navigationBarHidden {
self.navigationController?.setNavigationBarHidden(true, animated: true)
}
}
self.lastContentOffset = scrollView.contentOffset.y
}
Now the problem is, since the screen of iPhone 6+ is too large, the contentSize of the scroll view A is smaller than its frame(i.e. the full screen frame) when the navigation bar is hidden. In such circumstance, the scroll view will not be scrollable, and the navigation bar will never be back again.
I want to manually maintain the height of the contentSize of A to screen at least height + 1, but don't know how to do this. Could anyone help? Or provide a better solution?
BTW, I am using iOS 8 and Swift.
Lets say you need to keep the minimum content size of scroll view to 100(of course this will be dynamic and vary according to device)
NSInteger minScrollViewContentHeight = 100;
After populating the scroll view with content, you need to check if the scroll view's content size is less than minimum required scroll views content size. If its lesser than the required content size than you need to set the minimum content size of the scroll view as follows -
if(scrollView.contentSize.height < minScrollViewContentHeight)
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width, minScrollViewContentHeight)];
Off the top of my head (I'm on a phone), contentSize is not read-only I think.
How about changing it manually to the desired amount depending on the circumstances of scrolling direction etc?
Something like:
IF navbar is hidden THEN contentSize = whatever
An option would be to use the appearance and disappearance of cells to trigger the show/hide.
Use the delegate methods collectionView:willDisplayCell:forItemAtIndexPath: and collectionView:didEndDisplayingCell:forItemAtIndexPath: to detect movement. You can work out the direction from the index change of the cells being shown or removed. If you cannot scroll off screen then nothing happens.
You have to change no offset (which is actually just scrolling position), but contentSize itself. That means, that when you hide navigation bar, increase contentSize by navigation height (don't remember numbers) and when you show navigation bar, decrease contentSize. Or... Use AutoLayout and layoutIfNeeded method after showing/hiding navigation bar.
I stumbled upon a similar problem. I needed a minimum scrollable area for a tableview i was using.
ScrollView might be a bit easier since you can directly modify the contentView size.
If you're using autoLayout, try adding equal heights constraint between the contentView and the scrollView itself. Something along the lines of contentView.height = scrollView.height + scrollMin;
For my tableView i had to subclass UITableView and override the contentSize setter.
#define MIN_SCROLL 60
- (void)setContentSize:(CGSize)contentSize {
//take insets into account
UIEdgeInsets insets = self.contentInset;
CGFloat minHeight = self.frame.size.height - insets.top - insets.bottom + MIN_SCROLL;
if(contentSize.height < minHeight) {
contentSize.height = minHeight;
}
[super setContentSize:contentSize];
}
I have a UINavigationController in my app. The UINavigationBar is set to opaque and all the scroll views do not overlap underneath the bar.
In one view I have a UITableView. The frame of the UITableView is (0 0; 320 504) on my iPhone 5. i.e. the height is 568 - 64 (the height of the nav bar and status bar).
The contentInset of the UITableView is (0, 0, 0, 0). When the table view first loads the contentOffset is (0, 0).
This is fine. Works brilliantly.
I added a UIRefreshControl to the table view. This works a couple of times but then after a few times of doing pull to refresh then the content at the top gets "stuck" under the nav bar.
When this happens I inspect the contentInset and it is now (-60, 0, 0, 0).
Is there any way to stop the UIRefreshControl from changing the contentInset?
This is probably the reason why UIRefreshControl is currently only supported on UITableViewController, rather than by addition to any scrollview (which you can get away with, in many cases).
The refresh control does its magic by tinkering with the content insets of the scrollview - particularly when it ends refreshing. Unfortunately the view controller is also tinkering with the content insets of the scroll view to fit it under the translucent nav and status bars. Fun ensues. Is this also an issue on iOS 6 (or, "good old iOS6" as I called it when dealing with the same issue).
The quickest solution is probably to add your table view as a child UITableViewController instead of a simple subview. I think that UITableViewController manages the insets for you at the end of the refresh. If that doesn't work, I've got workarounds for this but it will have to wait until I get back in the office.
I will add this answer here in case any one has problems with UIRefreshControl by changing the control properties (attributed title, tint, etc...):
Don't mess with the UIRefreshControl on -viewDidLoad:, use -viewDidAppear: instead.
Reset your table view contentInset.
-(void)pullToRefresh
{
[self.tableView reloadData];
[self.refreshControl endRefreshing];
[self.tableView setContentInset:UIEdgeInsetsMake(0, 0, 0, 0)];
}
You need override setContentInset: in you UICollectionView
- (void)setContentInset:(UIEdgeInsets)contentInset {
if (self.tracking) {
CGFloat difference = contentInset.top - self.contentInset.top;
CGPoint translation = [self.panGestureRecognizer translationInView:self];
translation.y -= difference * 3.0 / 2.0;
[self.panGestureRecognizer setTranslation:translation inView:self];
}
[super setContentInset:contentInset];
}
Forgive me to the obtuse title, as I'm unsure how to describe this question.
Recently many iOS apps utilise a scrolling UI design pattern which helps to maximise screen real-estate, typically hiding the header when the user scrolls downwards.
For example, Instragram's main view has the Instragram header at the top. Scrolling upwards on this view keeps the header fixed at the top, and the view bounces back normally to the top of the content. But scroll down and the header acts as part of the content, making way for an extra 44 points of vertical space.
Its probably that I haven't done much iOS work in a while, but I can't easily figure out how best to impliment this? Apologies for the terrible description.
If the header stays put no matter what, use a separate view on top of the scroll view.
If you use UITableView, you can use section headers.
EDIT Use this code:
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = _headerView.frame;
if(offset.y > 0){
headerFrame.origin.y = offset.y;
}
else{
headerFrame.origin.y = 0.0;
}
[_headerView setFrame:headerFrame];
}
(Assumes _headerView is your header, sitting on top of the scroll view, not inside it. Also, both scroll view and header begin at the top of their parent view, y==0. Also, your view controller must be set up as delegate of the scroll view)
I just wrote this code from memory; haven't tested it but at most it should only need tweaking.
I tried ranReloaded's answer above but it seems that calling setFrame: on a UIScrollView stops the view from bouncing when going beyond its bounds.
Instead I set the scroll view to fit inside another UIView called scrollerWrapper. Applying the calculated origin and height to this view gives me effect I'm after plus retains the bounce behaviour.
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = header.frame;
CGRect wrapperFrame = scrollerWrapper.frame;
if(offset.y > 0){
headerFrame.origin.y = -offset.y;
wrapperFrame.origin.y = MAX(0, headerFrame.size.height - offset.y);
}
else{
headerFrame.origin.y = 0.0;
wrapperFrame.origin.y = headerFrame.size.height;
}
wrapperFrame.size.height = self.view.frame.size.height - wrapperFrame.origin.y;
[header setFrame:headerFrame];
[scrollerWrapper setFrame:wrapperFrame];
}