Adding a center button to a UITabBar SWIFT - ios

I would like to add a main button to a UITabBar as shown in the image:
main button, the button i wish to add
meaning i would like to add a button in the center of the bar, the button will be a bit higher then the other buttons( the regular buttons of an UITabBar)

If you're using Interface Builder:
Drag a UIButton to the view
Set the size constraints (ex: width 80, height 80)
Align Center X to Superview
Align Bottom to Tab Bar: -20
In your View Controller:
Add an IBOutlet for the button
Then in viewDidLoad under super.ViewDidLoad() add:
button.layer.zposition = 1
It should give you this result:
You can lower the image by increasing the negative number on the bottom constraint.

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

How to properly create an overlay view in storyboard?

My aim is to create a popup view right below a button once is clicked, this is the concept:
The way I prepared the storyboard is by using two different UIViewController. The main one contains the two buttons and, once clicked, I modally push the second UIViewController over the current context.
My question is: what's the best or properly way to create constrain in order to move the "Tapped" image right below the button?
The way I do this is to add a childcontroller to your first storyboard vc. Then adjust the frame of the container view in the storyboard, which I hope will be easier than programmatically adjusting frames.
Then be sure to change the class on top of the VC that Xcode created for you.
When the button is clicked get the the bottom position of it (it's y in frame + height) and send it to the popup , then set them as the top constraint of the imageView in popup in viewDidLayoutSubview
You can calculate the position of the overlay using the button's and the view's positions and dimensions. For example, the overlay's y can be the button's frame.maxY + constant.
let x = ...
let y = ...
let width = ...
let height = ...
let overlay = UIView(frame: CGRect(x: x, y: y, width: width, height: height))
view.addSubView(overlay)
The translucent black view can be added as a UIView with the same frame as the view of the VC and constrained to always be the same as the frame of the VC's view. Add this view first, before you add overlay.

Change Navigation Bar Height

I'm trying to understand how to change the height of a navigation bar. Whenever I insert one into my app, it is shorter than all the navigation bars used in Apple's stock apps (Messages and Settings for example). I would like it to get to that height because when I try to add a bar button, it conflicts with the status bar. I also read that as a developer you shouldn't change the height of the navigation bar so I'm a bit confused. Finally, I looked at this Stack Overflow page: How can I change height of Navigation Bar Swift 3.
I tried to implement the code...
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let height: CGFloat = 50 //whatever height you want
let bounds = self.navigationController!.navigationBar.bounds
self.navigationController?.navigationBar.frame = CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height + height)
}
...but my app crashed when I did so.
I'm using Xcode 8.2 beta with Swift 3.
I dont think you can change size of navigationBar.
But this is how would i recommend you to do it.
Remove default navigation bar.
Create a view which is similar to a navigation bar like you design add constrains> leading,trailing,top and height for that
view. so basicly pin it to top, left and right with your design's
height.
Add 2 buttons left and right if needed which would look similar to navigation bar. add button constrains> leading, top, bottom and
width for left one and trailing,top, bottom and width right one.
Add a UILabel which would be your navigation bar title., add label constrains leading with left button, trailing with right button, top
and bottom with navigation view you created. Make uilabel text
centered.
Here you go u have your custom navigation bar.
On each controller all u have to do is CMD+C and CMD+V on the other controller add leading,trailing and top constrains.
Hope it helped.
It is possible, and simple, to add an independent navigation bar and have it match the normal navigation bar height and rotation functionality. Here is how to do it (link includes a video):
In Interface Builder:
Add a UINavigationBar to your view, positioned at the Top Layout Guide location.
Set constraints for Leading Space to Container Margin, Trailing Space to Container Margin, and Top Space to Container — all with ‘Relative to margin’ deselected and a Constant value of 0 (zero).
With the Navigation Bar selected, in the Identity Inspector, add a key path called barPosition. Give it a Number type, and a value of 3.
That should be all you need. However, if you’ve completed these steps and your project doesn’t seem to like the key path, then continue as follows:
Remove the barPosition key path from the Navigation Bar’s Identity Inspector.
Add an IBOutlet for the Navigation Bar to your view controller.
Set your view controller to be a UINavigationBarDelegate.
Add the delegate method func position(for bar: UIBarPositioning) -> UIBarPosition to your view controller, and return a value of UIBarPosition.topAttached.

Scrollview Autolayout with Tabbar and Navigationbar

I need to set constraints in uiscrollview in viewcontroller containing navigationbar and tabbar.I have placed a uiview(contentView) inside scrollview which is of same height as of scrollview.These are the things which I have set curently,
set 4 constraints for scrollview(top,bottom,left,right) with
constraints to margin unchecked which is 0 for all edges.
set 4 constraints for uiview(contentView) inside
scrollview(top,bottom,left,right) with constraints to margin
unchecked which is 0 for all edges.
set equal width and equal height
for scrollview and UIView(contentView)
output is displaying like this uiview(contentView) gets placed lower about 64 px (approx).This view should not place like this.Can anyone help me to solve this.
Here is the project demo which I have worked and can be downloaded here
Select the scene and in the attributes inspector, uncheck: "Under Top Bars" and "Under Bottom Bars".
Then in the storyboard make the scroll view start at the very top of the View Controller, where the navigation bar starts, and then the UIView, where the navigation Bar ends.
Later, select the Scroll View and set the constraints as they come by default.
I guess it's not the cleanest way to do it but I had the same issue and worked for me.
You might try self.automaticallyAdjustsScrollViewInsets = false
The Tab Bar has to be set in the tree UNDER the scrollView, like this:
Try this
override func viewDidLoad() {
self.edgesForExtendedLayout = UIRectEdge()
self.extendedLayoutIncludesOpaqueBars = false
}
I have found the solution for it,The parent ViewController class is set to under top bar and disabling it and changed the frame accordingly in the parent and set the same property and frame to child viewcontroller fixed the issue.

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.

Resources