I am creating a view with tab bars and I want some space below the tab bar to show some other content, at the bottom of the screen.
Using Tab bar controller:
When I use tab bar controller, the tab bar cannot be moved to place another object below it.
Using Tab bar and tab bar items:
When I use just tab bar and tab bar items, I am unable to connect the items to another view controller or rather anything. Also it doesn’t seem very efficient when my app has multiple tabs.
What is the best and efficient way to achieve some space at the bottom of the screen with tab bar controller?
Below is an image showing “some space” at the bottom of the screen below the tab bar.
Thanks
Embed the tab bar controller in a custom parent view controller. Now the frame of the tab bar controller's view, relative to the custom parent view controller's view, is up to you.
This example was configured entirely in the storyboard, with no code at all:
Add the following code in your tabBarViewController
override func viewDidLayoutSubviews() {
tabBar.frame = CGRect(x: 0, y: self.view.frame.height-200, width: tabBar.frame.size.width, height: tabBar.frame.size.height)
}
replace 200 with the distance you want your tab bar to be from the bottom of screen.
Related
I need to segue to another UIViewController from my TabBarController without the tab bar disappearing from the bottom of the view.
As you can see in the picture, I want to segue to the colored view when pressing the red button from tab bar controller with the tab bar still displayed at the bottom of the view.
enter image description here
Set each of your tab roots to be a UINativagationController. Then set the current UIViewControllers as the roots of the navs. Then you can segue as much as you want and the tabbar will remain on the bottom.
e.g.
like the bottom flow, you can add another UIViewControllers to the right again.
I have a project where our tab bar has a big middle button (that extends above the tab bar) and other custom behaviors including a badge icon and colored labels.
I got "smart" and decided to just write my own tab bar and tab bar controller to go with it. The problem I've run into is that when one of the tabs is wrapped in a UINavigationController, that view always takes up the whole screen (you can't capture a UINavigationController into a small subview) and so I have to manually inset the content on those views.
Is there a smart way to handle this? It feels gross to just cut the content short on each screen by 100 points...that doesn't feel right at all.
What approach should I take...or should I just automate the content insets programmatically?
A tab bar controller is just a scroll view with a view at the bottom that toggles between the scroll view's offset. I assume you want the tab bar controller to be at the root of your app, so in the root view controller, add a UIScrollView.
Then add the views of the view controllers (the tabs) to that scroll view, and anchor them appropriately so that the scroll view scrolls. Make the heights and widths of these view controllers full screen. Before you add them to the scroll view, you must create a parent-child relationship between the root view controller and its tabs.
self.addChildViewController(tabOneViewController)
tabOneViewController.view.translatesAutoresizingMaskIntoConstraints = false
scrollView.addSubview(tabOneViewController.view)
tabOneViewController.didMove(toParentViewController: self)
tabOneViewController.delegate = self // so that your tabs can communicate back to the controller
// add constraints
Each of these view controllers will ideally be or contain the navigation controller for that section.
Then just add the tab bar to the view of the view controller, not to the scroll view (add this after the scroll view so that it sits above the scroll view). This tab bar is just a regular UIView, most often anchored to the view controller's bottom safe area. Because its a part of the view controller's view, and not the scroll view, it has no impact on the content behind it.
The benefit of a custom tab bar setup like this is that you can navigate between tabs on tap or by pan gesture. To navigate between tabs by tapping on the buttons in the tab bar, simply change the scroll view's content offset:
// this would move to the third tab
scrollView.contentOffset = CGPoint(x: view.bounds.width * 2, y: 0)
Add your bells and whistles and you're set.
When using the Navigation Controller it creates a new Navigation Bar on my first view controller. Intead of that bar being at the top of my screen I would like it to be on bottom. Is this possible? If not can I switch to using a different Nav Bar?
Navigation Bars are always at the top of view controllers, and cannot be moved. You could explore a TabBar or ToolBar though, depending on what you want.
Navigation Bar always appear on the top of your UIViewController when embedded in a UINavigationController. You cannot move it to any other position.
Still if you want to achieve such a requirement,
Hide the default UINavigationBar
self.navigationController?.navigationBar.isHidden = true
Create a custom UIView of same height(44) as the UINavigationBar and pin it to the bottom of your controller.
I have a tab bar controller and in one of my views I want that tab bar hidden. I selected BottomBar - none in interface but when my view appears there is still a white outline at the bottom of this view. I have a container view at the bottom of this view that I want extended all the way to the bottom of the screen. There is also a navigation controller embedded after the tab bar going into this view. Not sure if that makes a difference. Any suggestions? Thanks in advance. There are some photos of what I'm talking about below.
try on viewDidLoad
[self.tabBarController.tabBar setHidden:YES];
I have this ViewController as the root view controller. This VC is embed in a navigation controller. So, the navigation controller is the initial controller.
I have worked millions of times with an app like this.
If I want to add buttons to my nav bar I go to the navigation controller, turn on TOP BAR property to translucent navigation bar and now I can add buttons to the nav bar on my view controller.
But this app is different. I need a tab bar at the bottom too. So, I follow the same logic. I go to the navigation bar, turn on BOTTOM BAR property to Translucent Black Tab Bar, a black rectangle appears at the bottom of my view controller and BOOM, I cannot add buttons to it. Same logic, different behaviors.
If I try to add a tab bar to the black rectangle Xcode will not accept.
I want to add this tab bar to the bottom of the view controller and make it translucent, so the collectionView this controller has will be partially visible thru it.
So the question is: what is the purpose of the BOTTOM BAR property of the navigation controller if it will not accept dragging tab bar items to it? How do I add a tab bar to my navigation controller or to its root view controller using this stuff? Or in other words: how do I add a tab bar to the bottom of a view controller that has a collection view covering the whole are and make that tab bar translucent, so I can see the contents of the collection view passing thru...
The bottom bar of a UINnavigationController is a UIToolbar and if shown the navigation controller should automatically adjust the insets of the collectionView (and other scrollView) to make the content appear under them when you scroll.
I've encountered the problem of adding elements to that bar myself and the only way that I've found is to do that in code accessing the toolbar property of your navigation controller and set the items property with your UIBarButtoItems. As you want to make a segmented controller-like component I suggest an item with a custom view.
I can't answer the first question, but as for the second- drag a Tab Bar Controller onto the canvass the same way you would with a new View Controller. Make this new Tab Bar Controller the initial View Controller. CTRL-drag from the Tab Bar Controller to any of the view controllers (or navigation controllers) for which you want a tab bar button. Select "View Controller" as the segue type. The tab bar button for that segue will appear at the bottom of both the Tab Bar Controller and the View Controller itself, and you can change the text or image by clicking it and opening the Identity Inspector.