I have a custom navigation bar that doesn't really do any navigation controlling (app only has one view) its instead used as a header to display the logo against a solid background colour. So I put a navigation bar onto the main view controller and created an outlet so I can reference it in the code. (Using swift by the way).
Right now I'm struggling with setting the logo image in the center of the nav bar. I need to do this with the titleView (instead of setting an entire background image). So far what I've read says to use self.navigationItem.titleView in the view controller, but I think that only works when using a UINavigationController. Here is my code so far:
#IBOutlet weak var navBar: UINavigationBar!
override func viewDidLoad() {
super.viewDidLoad()
let logoImage = UIImageView(frame: CGRect(x:0, y:0, width: 200, height: 45))
logoImage.contentMode = .ScaleAspectFit
let logo = UIImage(named: "logo.png")
logoImage.image = logo
self.navigationItem.titleView = logoImage
}
But this doesn't work. How do I get access to the titleView using a custom UINavigationBar like this?
You need to access UINavigationBar's topItem attribute.
Then you can set the topItem's titleView with a UIImageView.
So in your case:
self.navBar.topItem?.titleView = logoImage
Related
I'm trying to follow along with a video course to implement photo gallery with Unsplash.
First I implemented UIViewController with searchbar and navigation bar in it
PhotoCollectionViewController: UIViewController
and manually adding searchbar and navigation bar
//MARK: - Nav bar inelkaar steken hier
private func setupNavigationBar(){
let titleLabel = UILabel()
titleLabel.text = "Photos"
titleLabel.font = UIFont.systemFont(ofSize: 15)
titleLabel.textColor = .black
navigationItem.leftBarButtonItem = UIBarButtonItem.init(customView: titleLabel)
navigationItem.rightBarButtonItems = [addBarButtonItem, actionBarButtonItem]
}
and the same for searchbar
so I got the result as this:
after this the PhotoCollectionViewController: UIViewController inheritance seemed be wrong what I did, and I need to change it to UICollectionViewController
I make then another controller inherited from UICollectionViewController with the same logic PhotoCollectionViewController: UICollectionViewController
It compiles without any issues, but I don't see navigation an search bar anymore
How can I fix this?
May be your collectionView is hiding search bar and navigation bar. check collectionView constraints. (specially top anchor)
// PS: I could comment, but I don't have 50 reputation.
maybe you can try this:
Check the top constraint first of your collectionView. And maybe you can add this code to you viewDidLoad() :
self.navigationController?.setNavigationBarHidden(true, animated: false)
if you use ScollView at fullscreen (SuperView), you can use this :
scrollView.contentInsetAdjustmentBehavior = .never
for searchBar IBOutlet you can add this :
searchBar.becomeFirstResponder()
I need to know if it is possible to add an image as title on all navigation controllers, this mean, that every controller that had a navigation bar had the same image title.
I used the next code to set an image as title in the navigation bar, but I have to set it on every viewController, the idea its for example set it on AppDelegate as UINavigationBar.appereance() or similar.
let imageView = UIImageView(image: UIImage(named: "my_image.png")!)
imageView.contentMode = .scaleAspectFit
let titleView = UIView(frame: CGRect(x: 0, y: 0, width: 107, height: 30))
imageView.frame = titleView.bounds
titleView.addSubview(imageView)
self.navigationItem.titleView = titleView
So the idea is to set this image as the default title for every controller, that way I will just need to configure it one time.
It is that posible? If not, What possible solution do you think that I can apply ?
The title view is a property of each view controller, not the navigation bar or navigation controller.
So start with a UIViewController subclass whose navigation item has this title view, and make all your other view controllers be subclasses of that.
Please try below code,
let logo = UIImage(named: "logo.png")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView
if this not works please share the screenshot.
I can't figure out why this happens, but when I add a imageview behind my tableview and navigation bar, my navigation bar acts strange:
The navigation bar gets stuck in a static position and dosen´t move while scrolling as it did before
The activity indicator from pull to refresh gets placed between the navigation bar button and the top of the tableview. Instead of staying on top of the navigation bars title as before.
Left picture is the bug without the imageview in the background.
Right picture show how it works perfectly without the imageview.
My code to get the clear navigation bar (Though I don't think this introduces any problem as it works fine when the imageview in the background isn't there):
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true self.navigationController?.view.backgroundColor = UIColor.clear
Found a solution.
Set the image as the backgroundview of the tableview and set the tableview to be fullscreen.
let image = UIImage(named: "myphoto")
let iv = UIImageView(image: image)
iv.contentMode = .scaleAspectFill
iv.layer.frame = CGRect(x: 0, y: 0, width: (self.tableView.superview?.frame.size.width)!, height: (self.tableView.superview?.frame.size.height)!)
let tableViewBackgroundView = UIView()
tableViewBackgroundView.addSubview(iv)
self.tableView.backgroundView = tableViewBackgroundView
So I have upgraded to swift 4 and now my left & right uiimageviews set as left/right nav button items are showing as large icons. I have figured out that the Frame setting is not being applied and I am not sure why.
Does anyone know what may cause this?
Here is some code
lazy var leftBarPic: UIImageView = {
let pic = UIImageView(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
pic.clipsToBounds = true
pic.contentMode = .scaleAspectFit
pic.image = myImage.withRenderingMode(.alwaysOriginal)
pic.isUserInteractionEnabled = true
pic.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(postNewsAction)))
pic.backgroundColor = .green
return pic
}()
override func viewDidLoad() {
super.viewDidLoad()
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: leftBarPic)
}
OK I found a fix. For anyone having similar, what I did was add the property (in this instance the left navigator imageView) to the view's subview. Then added the constraints for width and height. It seems that with the upgrade setting the frame for nav items (image views only) inside the property does not work.
I have a UITabBar and I want to make it blurred. I wrote the following code:
import UIKit
class TabBarController:UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
let blur = UIBlurEffect(style: UIBlurEffectStyle.Light)
let blurView = UIVisualEffectView(effect: blur)
blurView.frame = self.view.bounds
blurView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight]
self.view.layer.insertSublayer(blurView, atIndex: 0)
}
}
but somehow the last line throws error:
Cannot convert value of type 'UIVisualEffectView' to expected argument
type 'CALayer'
how can I fix that?
I changed the last line to:
self.tabBar.addSubview(blurView)
but now the whole tabbar is blurred (even with icons and they are not visible). When I changed this line to:
self.tabBar.sendSubviewToBack(blurView)
then the tabbar is visible, but not blurred. I want to achieve effect from accepted answer from here Black background on transparent UITabBar but here it is uitabbar and I'm using uitabbarcontroller... Can you help me with applying blur in my case?
You just add the blur view as a subview:
self.view.addSubview(blurView)
Since you just want to blue the tab bar and this class is a tab bar controller, you can do:
self.tabBar.addSubview(blueView)
You also need to change the frame:
blurView.frame = self.tabBar.bounds
why don't you just use the barTintColor property on your TabBarController?
self.tabBar.translucent = true
self.tabBar.barTintColor = UIColor.blackColor()
You don't even need to subclass UITabBarController. You can call this on any UIViewController.
self.tabBarController?.tabBar.translucent = true
self.tabBarController?.tabBar.barTintColor = UIColor.blackColor()
If I understood correctly from the following comment that you posted, you want to change the UITabBar to be black in colour but still blurred.
And yes, I noticed that the UITabBarController is blurred by default, but I would like to make it blurred with specific style (.Dark).
Doing this since iOS 7 has actually become quite easy. Simply change the barStyle of your UITabBar to .black. Put the following code in your UIViewController's viewDidLoad method (note that UITabBar is translucent by default, so you don't need to specify that again).
tabBarController?.tabBar.barStyle = .black
If you want to set it back to the regular, white barStyle, change it back to .default.
tabBarController?.tabBar.barStyle = .default
You may even do this from within Interface Builder by selecting the Tab Bar in your UITabBarController's hierarchy and changing its Style to Black.
I have a solution, all you need is configure your UITabBar as following:
// next code will make tabBar fully transparent
tabBar.isTranslucent = true
tabBar.backgroundImage = UIImage()
tabBar.shadowImage = UIImage() // add this if you want remove tabBar separator
tabBar.barTintColor = .clear
tabBar.backgroundColor = .black // here is your tabBar color
tabBar.layer.backgroundColor = UIColor.clear.cgColor
If you want to add blur, do this:
let blurEffect = UIBlurEffect(style: .dark) // here you can change blur style
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = tabBar.bounds
blurView.autoresizingMask = .flexibleWidth
tabBar.insertSubview(blurView, at: 0)
As a result:
Attach bottom constraint to the bottom of the view instead of Safe Area
It just might not be a problem with your TabBar but with tableView constraints.
Tab bar is blurred by default.