Place element right under navigation bar on scroll - ios

If I have an element in a scroll view(not positioned in the top) how would I be able to let this element stay right under the navigation bar when it hits the bar on scroll ? Like the shuffle bar in the spotify app ?

In your ScrollView delegate:
Implement viewDidScroll:
Check the offset of the scroll view in this method: adjust the position of your nav bar using the negative offset of the scrollview: self.navBar.frame.origin.y = - view.yOffset;

Related

Static/fixed Navigation Bar in iOS

I have a Navigation Controller and a Collection View under it inside my app. And there is a problem: I use large title inside my Navigation bar, so everything inside is not static. When I scroll the collection view cells, the title (I created it manually using UILabel() to move it as I want inside the navigation bar) and buttons move up and the navigation bar takes form of iOS 10 navigation bar, I mean its height. You can see it here:
The normal state of my Navigation Bar with "Prefer large titles" On:
It happens when I scroll my Collection View, everything goes up:
So the question is simple: how to make the force constant height for the navigation bar? I want it to become fixed even while scrolling. Are there any ideas? Is it possible?
And the second question, if the first is impossible: Another solution for my problem is to make the Navigation Bar with "Prefer large titles" Off bigger. I tried this code:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let height: CGFloat = 50 //whatever height you want to add to the existing height
let bounds = self.navigationController!.navigationBar.bounds
self.navigationController?.navigationBar.frame = CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height + height)
}
but it worked only for large titles. So how can I make the navigation bar bigger?
Yes, you can make it fixed. It will not scroll if the very first view in the view hierarchy is not a CollectionView/TableView (ScrollView).
Using Storyboard/Xib:
Consider the following image where a tableView and button are added in scene. Here the navigation bar will collapse on scroll of tableView because tableView is the very first view in viewController's containerView hierarchy attached to the navigation bar.
Now to make the navigation bar fixed, if we just change the order of tableView and button as below, it will disable the collapsing of navigation bar.
To change the order of the view, you have to click, hold and move up/down.
If you have only CollectionView in this scene then you can add a placeholder view at the top and set its height to zero as below,
Programmatically:
If you are setting up view's programmatically then you just need to add a placeholder view at the top or add tableView/collection after adding other views.
e.g,
self.view.addSubview(UIView(frame: .zero))
self.view.addSubview(tableView) // or collectionView

Xamarin iOS Setting NavigationController.NavigationBar.Translucent = true; shifts scrollview content upwords

I want to display navigation bar on screen gradually when user scroll on screen. and Want to make it alpha to hide navigation bar (Setting Alpha because i want to show back arrow of navigation controller).
While scrolling upwords its fine.
But while settling scrollview at initial position if i set its translucent property is true i.e. NavigationController.NavigationBar.Translucent = true;
then it shifts content upwords with the same height of navigation bar.
Expected Result : Scrollview should be at initial state after scroll completion.
Can anyone please help me on this ?
If you have enabled the AutomaticallyAdjustsScrollViewInsets on iOS 10- or ContentInsetAdjustmentBehavior on iOS 11 and you have added the correct constraints for your scrollView. The scroll view will auto adjust its insets to make the content show under the NavigationBar.
But If you set the NavigationController.NavigationBar.Translucent = true; and use MyScrollView.SetContentOffset(new CGPoint(0, 0), true); to set scrollview at initial position. This will cause your issue: the content seems covered by the Navigation Bar.
You can use another api the make the scroll view scroll to top:
MyScrollView.ScrollRectToVisible(new CGRect(0, 0, 5, 5), true);
This will place the scroll view's content below the navigation bar. Or try to judge the Translucent state, if this is true use this to get back the initial place:
MyScrollView.SetContentOffset(new CGPoint(0, -NavigationController.NavigationBar.Frame.GetMaxY()), true);

UIView animation, condition of when view reached point x

In my current animation, I'm moving an UIView from the bottom to the top. The view is added to the navigation controller's view so it will show on top of the navigation bar.
A simplified version of the animation:
UIView.animateWithDuration(0.5) { self.bar.frame.origin.y = 0 }
In this animation, the view will eventually reach the navigation bar. Is it possible to somehow get this condition and do something with the navigation bar?

UISearchBar in a NavigationBar width

I would like to have an UISearchbar in my NavigationBar - as I've done here:
When the SearchBar gets the Focus, I'll remove the left Button with:
self.navigationItem.leftBarButtonItems = []
And try to make the UISearchBar getting the whole width of the Screen (with a Cancel Button)
searchBar.sizeToFit()
searchBar.showsCancelButton = true
But my UISearchBar is too wide, it looks like in this screen:
But why is that? I want to get the following result:
User clicks into the SeachBar, I'll FadeIn a UITableView for the Results - when the User presses the Cancel Button, the UITableView fades out and I'll add the "Kategorie" left Button again.
Is this a way how to solve that - or can I not use the sizeToFit() method here?
Seems like you placed your searched bar as a rightBarButtonItem and that spot has a right margin. Your searchBar is trying to expand to be the full width of the screen, hence it gets to be too wide.
I used a search controller and implemented didPresentSearchController and resized it there.
How about setting the width of the search bar equal to the screen minus the size of the 'Cancel' button, or try to add constraints between the search bar and leading space to the navigation controller.

Set image view underneath the navigation bar

In my UIViewController I have UIImageView that takes up the full size of the controller (screen) and serves as a background. On top of UIImageView I have a UITableView with a clear background. I set the navigation bar to translucent like this:
self.navigationController.navigationBar.translucent = YES;
UIImageView is underneath the navigation bar as I want it to be. Unfortunately the same happens to UITableView. I want to put UITableView at the bottom of navigation bar, leaving UIImageView underneath. If I set:
[self setEdgesForExtendedLayout:UIRectEdgeBottom]
then UITableView is at the bottom of the navigation bar, but the same happens also to UIImageView. What would be the easiest solution to leave UIImageView underneath the navigation bar and push down the UITableView at the bottom of the navigation bar?
By default in iOS 7 the content extends to the top and bottom of the screen, underneath any navigation bars, tool bars, or tab bars. If you were to set the frame of the table view to be start after the navigation bar, the content of the table view would not scroll beneath the navigation bar providing the nice blur effect.
What you'll probably want to do instead, is keep the y origin of your table view at 0, underneath the navigation bar, and set the content inset so the content starts after the navigation bar.
This is pretty simple. If you're using auto layout the top layout guide of the view controller will recognise the height of the status bar and navigation bar so you don't need to calculate this yourself. The bottom of the navigation bar should end at 66.
//Using Auto Layout
CGFloat navigationBarHeight = self.topLayoutGuide.length;
//Not using Auto Layout
UINavigationBar *nav = self.navigationController.navigationBar;
CGFloat navigationBarHeight = nav.frame.origin.y + nav.frame.size.height;
myTableView.contentInset = UIEdgeInsetsMake(navigationBarHeight, 0, 0, 0)
And of course if you actually do want the frame to start after the navigation bar the height above stays the same, you just need to manually set the frame of the table view.
CGRect tableViewFrame = self.view.bounds;
tableViewFrame.origin = CGPointMake(tableViewFrame.origin.x, navigationBarHeight);
tableViewFrame.size = CGSizeMake(tableViewFrame.size.width, tableViewFrame.size.height - navigationBarHeight*2);
myTableView.frame = tableViewFrame;
EDIT: Ah, almost forgot. You'll also want to change the scrollIndicatorInsets to match the contentInset, so your scroll bars don't move offscreen.
myTableView.scrollIndicatorInsets = myTableView.contentInset;

Resources