As titled, I'm using a UIButton as the titleView in the navbar. Is there a way for me to make the UIButton larger along with the navbar? When I set self.navigationController?.navigationBar.prefersLargeTitles = true, what I got is this,
I can't find any documentation on this, so I played a bit. It seems in iOS 11, you won't be able to get that title to be a button and display large at the left.
Also, I ttied playing with the frame size of the button (added below). I was unable to increase the button size, no matter what I set the frame to.
To recreate, I set up a Single View project. I embedded the view controller in a navigation controller.
In ViewController.swift's viewDidLoad, I added this code:
let titleButton = UIButton(type: .roundedRect)
titleButton.setTitle("Hello Button!", for: UIControlState.normal)
let navController = parent as! UINavigationController
navController.navigationBar.topItem!.title = "Hello???"
navController.navigationBar.topItem!.titleView = titleButton
navController.navigationBar.prefersLargeTitles = true
This ends up looking something like your example.
IF I:
set .title to empty string, or remark the line out: navbar is stretched, and no title text shows (or title text set in Interface Builder shows)
remark out .prefersLargeTitles, or set it to false: the navbar is the normal height, the button displays, but no title text displays.
remark out the titleView line, AND:
leave the .prefersLargeTitles set to true: the title text displays large at the left, and the navbar's height is stretched.
set the .prefersLargeTitles to false: the title text displays in the top center, and the navbar is normal height.
Related
In the image shared, the orange section is the bar section , which is having unnecessary height, I am not able to resolve this issue by myself.
the views are like this
Parent Controller = View Controller
Child views = green view, black tableview
Please help to correct the height of the orange bar.
Seems like you have enabled prefersLargeTitles.
Make it false in your viewWillAppear()
self.navigationController?.navigationBar.prefersLargeTitles = false
You can also disable it from the storyboard.
Select your Navigation Controller -> Navigation Bar -> Uncheck prefers large titles
it seems like you're using the largeTitles on the navigationBar,
var prefersLargeTitles: Bool { get set }
When this property is set to true, the navigation bar allows the
title to be displayed out-of-line and using a larger font. The
navigation item used to build the bar must specify whether it wants
its title displayed in the large or small format. Use the
largeTitleDisplayMode property to configure the title's appearance.
When the property is set to false, the navigation bar displays the
title inline with the other bar button items.
try to disable it by:
navigationController?.navigationBar.prefersLargeTitles = false
or you can do this as well:
navigationItem.largeTitleDisplayMode = .never
hope this helps:)
https://developer.apple.com/documentation/uikit/uinavigationbar/2908999-preferslargetitles
So I have the following UIKit elements I am adding to my UIViewController to control the simulation that appears. I expected to have to write a lot of placement code but instead everything appears perfectly no-mater what device... my question is why?
let menuButton = UIButton()
let statusLabel = UILabel()
let segmentedLabel = UISegmentedControl(items: ["None", "Glow", "Cloud"])
func initializeUI() {
//The menu button that opens up the options for the simulations
menuButton.layer.borderColor = UIColor.lightGray.cgColor
menuButton.layer.borderWidth = 1
menuButton.layer.cornerRadius = 5
menuButton.layer.backgroundColor = UIColor.darkGray.cgColor
menuButton.showsTouchWhenHighlighted = true
menuButton.imageView?.contentMode = UIViewContentMode.scaleAspectFit
menuButton.setImage(UIImage(named: "hamburger.png"), for: UIControlState.normal)
menuButton.addTarget(self, action: #selector(menuPress), for: UIControlEvents.touchDown)
view.addSubview(menuButton)
//Will display the status of the simulation
statusLabel.text = "Particle Simulation"
statusLabel.textColor = UIColor.darkGray
view.addSubview(statusLabel)
//Will display visual options
view.addSubview(segmentedLabel)
}
The size of each of the elements is perfect and they dont overlap. The label is in the bottom left corner the button is in the bottom right and the segmented view is in the top left corner (of my landscape app).
An additional question I have is if I wanted to start placing these objects programmatically how would I do so? The elements don't have an attribute position that I can work with and if I do something like menuButton.frame.size.height *= 20 that does not make the menu button super tall.
The reason this works is that all of your UI items in your example have an “intrinsic” content size so they are able to create their own frame. Add a standard UIView the same way and you will be out of luck. Also the views are creating their own constraints based on initial frames using Auto Resizing Masks(Also known as Springs and Struts).
Finally to place items you would set the frame directly. Just math. Good luck.
Super important to understand intrinsic content size. Some frame changes might require you to turn off automatic constraints but this is usually not the case but could be the problem with your button
UIView.translatesAutoresizingMaskIntoConstraints = false
I am using a button as a title view for my UITableViewController which opens a dropdown list of categories. Selecting a category filters content of the table view by the selected category.
The button shows the name of the selected category plus a small arrow, similar to how iBooks used to look (or maybe still looks? I haven't used it in a while). I would therefore like it to have the same behaviour as a standard title and have it be large at first and collapse when the table view is scrolled.
Is there a way to do this?
Thanks
It seems because of the new large titles, IOS11 requires the constraints on the custom view in the navigationItem.titleView to be set.
Do this for example:
customView.widthAnchor.constraint(equalToConstant: 200).isActive = true
customView.heightAnchor.constraint(equalToConstant: 44).isActive = true
self.navigationItem.titleView = customView
Note this must be done for both width and height.
It should work. No need to add a button, at least in my case...
This was suggested by Apple to ensure that you don't have zero-size custom views. See slide 33 in https://developer.apple.com/videos/play/wwdc2017/204/
Looks like touches are broken for navigationItem.titleView. Gestures, tap events and buttons - nothing works
Seems like a bug in iOS 11: https://forums.developer.apple.com/thread/82466
I provisionally implemented this workaround:
private lazy var navBarActionButtonIOS11: UIButton = {
button.addTarget(self.navTitleView, action: #selector(self.navTitleView.didTapView), for: .touchUpInside)
return button
}()
[...]
navigationItem.titleView = navTitleView
if #available(iOS 11.0, *), let navBar = navigationController?.navigationBar {
navBarActionButtonIOS11.removeFromSuperview()
navBar.addSubview(navBarActionButtonIOS11)
navBarActionButtonIOS11.center.x = navBar.center.x
}
Another solution could be to just assign a UIButton to navigationItem.titleView directly.
I hope Apple fixes this soon!
Well, I had same problem. I have UIButtons in UINavigationItem.titleView and those were not reacting to touches at all. Problem is that the view where those buttons are where of size (0,0) because of auto layout. So to fix this problem you need to add additional view into your custom view, lets call it "contentView" and put all your controls inside that contentView. Also, contentView must have defined size with constraints. Quick test is to add width and height constraint to contentView. And all works again.
Hope that this helps someone.
I have a custom UIView. Dead simple, just always wants to be 300x30 if possible.
class MyVoo: UIView {
override func sizeThatFits(size: CGSize) -> CGSize {
return CGSize(width: 300, height: 30)
}
}
I then set it to the navigationItem's titleView property like so:
let voo = MyVoo()
voo.backgroundColor = .magentaColor()
navigationItem.titleView = voo
voo.sizeToFit()
But when I run it, it looks like this:
As you can see width is weird. It's set to 246 for some reason, which is just slightly too much and causes the back button text to be cut off. I don't mind it being cut off, but it should occupy the space to the left better, or be the proper size and allow the back button text to show.
Basically my question is: how do I have this custom UIView be properly sized in the navigation bar? Right now it's very clearly "off", and I'd like it to effectively behave as if I just navigationItem.title (instead of titleView) to 300px worth of text. Properly shortened, the back button has proper text, etc. Rather than this weird solution where it's not properly sized for anything at all. How do I properly size it and how does it decide its sizing?
i would ask if it is possible to change to base modal window to look like my image? (only layout test)
I can easiliy set up an image with:
var barButtonImage:UIImage = UIImage(named: "header_test.png")
var barButtonImageView = UIImageView(image: barButtonImage)
self.navigationItem.titleView = barButtonImageView
But i am not able to set it outside the view - is that possible? And if, how?
EDIT:
Thanks for the info about using clipsToBounds. I set it to titleview and bar to false, but the image is not outside the modal (but it is over the top of my UITableView in the modal window)
self.navigationItem.titleView.clipsToBounds = false
self.navigationController.navigationBar.clipsToBounds = false
You're going to have to embed your visual stuff inside another view, with that view's background set to transparent.
Or, you could play around with the "clips subviews" property of your view, to allow the round graphic to not get clipped at the edges of the superview that contains it.