Using closure in the function - ios

I like to know that whether there is a way to use a closure in the function updateView(), so that the code is not repeated for phone and pad in the code below. Here the closure should have parameters for width and height
#IBInspectable var leftImage: UIImage? {
didSet {
updateView()
}
}
func updateView() {
if let image = leftImage
{
leftViewMode = UITextField.ViewMode.always
if (UIDevice.current.userInterfaceIdiom == .phone)
{
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
imageView.contentMode = .scaleAspectFit
imageView.image = image
imageView.tintColor = color
leftView = imageView
}
if (UIDevice.current.userInterfaceIdiom == .pad)
{
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
imageView.contentMode = .scaleAspectFit
imageView.image = image
imageView.tintColor = color
leftView = imageView
}
}
else
{
leftViewMode = UITextField.ViewMode.never
leftView = nil
}
}
I ran out of ideas, trying it unsuccessfully. Thanks, in advance.

The code is identical except for the image view size. Set a variable for the size based on the device and don't repeat any of the other code.
func updateView() {
if let image = leftImage {
leftViewMode = UITextField.ViewMode.always
let size: CGFloat = UIDevice.current.userInterfaceIdiom == .phone ? 20 : 30
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: size, height: size))
imageView.contentMode = .scaleAspectFit
imageView.image = image
imageView.tintColor = color
leftView = imageView
} else {
leftViewMode = UITextField.ViewMode.never
leftView = nil
}
}
BTW - don't write code that makes decisions based on the device idiom. Make your decisions based on the size of the view controller's view.

Related

How can I add padding to UIImageView that is inside of a rightView of a UITextField?

So I added a UIImageView to the right of my UITextField, but I need to add a little bit of padding to the right side so that it doesn't anchor all the way to the right. I tried adding a custom frame but that didn't work, so I'm not too sure how to go about getting that padding. Any help would be much appreaciated.
See TextField Example Here
let titleField : UITextField = {
let titleField = UITextField()
titleField.placeholder = "Title"
titleField.textAlignment = .center
titleField.backgroundColor = .white
titleField.addDoneCancelToolbar()
var imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 10, height: 10))
let image = UIImage(systemName: "exclamationmark.circle")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)
imageView.image = image
titleField.rightView = imageView
titleField.rightViewMode = .always
// titleField.rightView?.isHidden = true
return titleField
}()
Subclass UITextField and override https://developer.apple.com/documentation/uikit/uitextfield/1619638-rightviewrect.
Just add the extension :
extension UITextField {
func rightImage(_ image: UIImage?, imageWidth: CGFloat, padding: CGFloat) {
let imageView = UIImageView()
imageView.frame = CGRect(x: padding + 2, y: 0, width: imageWidth, height: frame.height)
imageView.contentMode = .scaleAspectFit
imageView.image = image
let containerView = UIView(frame: CGRect(x: 0, y: 0, width: imageWidth + padding , height: frame.height))
containerView.addSubview(imageView)
rightView = containerView
rightViewMode = .always
}
}
To use it :
if let image = UIImage(named: imagename + ".png") {
titlefield.rightImage(image, imageWidth: 30, padding: 5)
}

Add icon or image in UITextField on left / right in Swift 4

I have set up the left icon in UITextField. When I set text, it is over the left icon. I want to set text after the icon in the UITextField. I have used below code.
let imageView = UIImageView(image: UIImage(named: strImgname))
imageView.frame = CGRect(x: 0, y: 0, width: imageView.image!.size.width , height: imageView.image!.size.height)
let paddingView: UIView = UIView.init(frame: CGRect(x: 0, y: 0, width: 50, height: 30))
paddingView.addSubview(imageView)
txtField.leftViewMode = .always
txtField.leftView = paddingView
You can use #IBDesignable to make a designable UITextField with these capabilities and even more and use it through out your project.
DesignableTextField with Delegate methods when icon in UITextField is tapped:
import Foundation
import UIKit
protocol DesignableTextFieldDelegate: UITextFieldDelegate {
func textFieldIconClicked(btn:UIButton)
}
#IBDesignable
class DesignableTextField: UITextField {
//Delegate when image/icon is tapped.
private var myDelegate: DesignableTextFieldDelegate? {
get { return delegate as? DesignableTextFieldDelegate }
}
#objc func buttonClicked(btn: UIButton){
self.myDelegate?.textFieldIconClicked(btn: btn)
}
//Padding images on left
override func leftViewRect(forBounds bounds: CGRect) -> CGRect {
var textRect = super.leftViewRect(forBounds: bounds)
textRect.origin.x += padding
return textRect
}
//Padding images on Right
override func rightViewRect(forBounds bounds: CGRect) -> CGRect {
var textRect = super.rightViewRect(forBounds: bounds)
textRect.origin.x -= padding
return textRect
}
#IBInspectable var padding: CGFloat = 0
#IBInspectable var leadingImage: UIImage? { didSet { updateView() }}
#IBInspectable var color: UIColor = UIColor.lightGray { didSet { updateView() }}
#IBInspectable var imageColor: UIColor = UIColor.init(hex: "3EB2FF") { didSet { updateView() }}
#IBInspectable var rtl: Bool = false { didSet { updateView() }}
func updateView() {
rightViewMode = UITextFieldViewMode.never
rightView = nil
leftViewMode = UITextFieldViewMode.never
leftView = nil
if let image = leadingImage {
let button = UIButton(type: .custom)
button.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
let tintedImage = image.withRenderingMode(.alwaysTemplate)
button.setImage(tintedImage, for: .normal)
button.tintColor = imageColor
button.setTitleColor(UIColor.clear, for: .normal)
button.addTarget(self, action: #selector(buttonClicked(btn:)), for: UIControlEvents.touchDown)
button.isUserInteractionEnabled = true
if rtl {
rightViewMode = UITextFieldViewMode.always
rightView = button
} else {
leftViewMode = UITextFieldViewMode.always
leftView = button
}
}
// Placeholder text color
attributedPlaceholder = NSAttributedString(string: placeholder != nil ? placeholder! : "", attributes:[NSAttributedStringKey.foregroundColor: color])
}
}
Now its Designable in the Storyboard as follows:
NOTE: Rtl when set to Off icon will move to left of UITextField
Conforming the Delegate in desired ViewController.
class MyViewController: UIViewController, DesignableTextFieldDelegate {
#IBOutlet weak var txtFieldSomeSearch: DesignableTextField!
txtFieldSomeSearch.delegate = self // can be done in storyboard as well
... // other codes
func textFieldIconClicked(btn: UIButton) {
print("MyViewController : textFieldIconClicked")
}
... // other codes
}
Finally Output :
Using the extension in Swift4, We can easily put the image on the right or on the left with padding to TextField.
extension UITextField {
//MARK:- Set Image on the right of text fields
func setupRightImage(imageName:String){
let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
imageView.image = UIImage(named: imageName)
let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
imageContainerView.addSubview(imageView)
rightView = imageContainerView
rightViewMode = .always
self.tintColor = .lightGray
}
//MARK:- Set Image on left of text fields
func setupLeftImage(imageName:String){
let imageView = UIImageView(frame: CGRect(x: 10, y: 10, width: 20, height: 20))
imageView.image = UIImage(named: imageName)
let imageContainerView: UIView = UIView(frame: CGRect(x: 0, y: 0, width: 55, height: 40))
imageContainerView.addSubview(imageView)
leftView = imageContainerView
leftViewMode = .always
self.tintColor = .lightGray
}
}
Use code as for right image setup:-
self.password_text_field.setupRightImage(imageName: "unlock")
Output :)
please use the below code
//Left side icon
textField.leftViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.leftView = imageView
//Right side icon
textField.rightViewMode = UITextFieldViewMode.Always
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
let image = UIImage(named: imageName)
imageView.image = image
textField.rightView = imageView
Extension to UITextField in Swift 5. This allows you to check if the image is a system image, otherwise, you use a custom image. You can also set which side of the text field you want the image on using the TextFieldImageSide enumeration.
enum TextFieldImageSide {
case left
case right
}
extension UITextField {
func setUpImage(imageName: String, on side: TextFieldImageSide) {
let imageView = UIImageView(frame: CGRect(x: 10, y: 5, width: 30, height: 30))
if let imageWithSystemName = UIImage(systemName: imageName) {
imageView.image = imageWithSystemName
} else {
imageView.image = UIImage(named: imageName)
}
let imageContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 45, height: 40))
imageContainerView.addSubview(imageView)
switch side {
case .left:
leftView = imageContainerView
leftViewMode = .always
case .right:
rightView = imageContainerView
rightViewMode = .always
}
}
}
Usage:
searchBar.setUpImage(imageName: "mappin.and.ellipse", on: .left)
Produces the following:

How to change the postion of the title after changing the height of Navigation Bar in Xcode

I want to change the position of the image title of the navigation bar after changing the height of navigation, but it doesn't work. I'm a rookie,please help me, thank you guys!
override func viewDidAppear(_ animated: Bool)
{
NavigationBarHeight()
}
func NavigationBarHeight() {
for subview in (self.navigationController?.navigationBar.subviews)! {
if NSStringFromClass(subview.classForCoder).contains("BarBackground") {
var subViewFrame: CGRect = subview.frame
subViewFrame.size.height = 75
subview.frame = subViewFrame
}
}
}
func addNavBarImage() {
let navController = navigationController
let image = UIImage(named: "文字logo")
let imageView = UIImageView(image: image)
let bannerWidth = navController?.navigationBar.frame.size.width
let bannerHeight = navController?.navigationBar.frame.size.height
let bannerX = bannerWidth! / 2 - image!.size.width / 2
let bannerY = bannerHeight! / 2 - image!.size.height / 2
imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth!/2, height: bannerHeight! / 2)
imageView.contentMode = .scaleAspectFit
navigationItem.titleView = imageView
}
Well you can use this to change :-
func title_Logo() {
let imageView = UIImageView(image: #imageLiteral(resourceName: "icon-logo"))
imageView.frame = CGRect(x: 0, y: 0, width: 170, height: 30)
imageView.contentMode = .scaleAspectFit
let titleView = UIView(frame: CGRect(x: 0, y: 0, width: 170, height: 30))
titleView.addSubview(imageView)
titleView.backgroundColor = .clear
self.navigationItem.titleView = titleView
}
and just call the function where you want to use

overlaying text on image using swift

I am trying to overlay some text on an image using Swift and am looking at this code here: (src: How do I add text to an image in iOS Swift)
This places the text right in the center. I have been changing the values in
var rect = CGRectMake(10,150, inImage.size.width,
inImage.size.height)
but I am unable to get the text to show in the lower left corner. Can someone help and show what I am missing here ?
I am adding the modified image using this line:
modImage = self.textToImage("000", inImage: UIImage(named:"thisImage.png")!, atPoint: CGPointMake(10, 400))
Below is the function...
func textToImage(drawText: NSString, inImage: UIImage, atPoint: CGPoint) -> UIImage{
// Setup the font specific variables
var textColor = UIColor.whiteColor()
var textFont = UIFont(name: "Helvetica Bold", size: 12)!
// Setup the image context using the passed image
let scale = UIScreen.mainScreen().scale
UIGraphicsBeginImageContextWithOptions(inImage.size, false, scale)
// Setup the font attributes that will be later used to dictate how the text should be drawn
let textFontAttributes = [
NSFontAttributeName: textFont,
NSForegroundColorAttributeName: textColor,
]
// Put the image into a rectangle as large as the original image
inImage.drawInRect(CGRectMake(0, 0, inImage.size.width, inImage.size.height))
// Create a point within the space that is as bit as the image
var rect = CGRectMake(atPoint.x, atPoint.y, inImage.size.width, inImage.size.height)
// Draw the text into an image
drawText.drawInRect(rect, withAttributes: textFontAttributes)
// Create a new image out of the images we have created
var newImage = UIGraphicsGetImageFromCurrentImageContext()
// End the context now that we have the image we need
UIGraphicsEndImageContext()
//Pass the image back up to the caller
return newImage
}
Details
xCode 9.1, Swift 4
Solution
extension UIView
extension UIView {
func copyObject<T: UIView> () -> T? {
let archivedData = NSKeyedArchiver.archivedData(withRootObject: self)
return NSKeyedUnarchiver.unarchiveObject(with: archivedData) as? T
}
}
extension UIImage
extension UIImage {
typealias EditSubviewClosure<T: UIView> = (_ parentSize: CGSize, _ viewToAdd: T)->()
func with<T: UIView>(view: T, editSubviewClosure: EditSubviewClosure<T>) -> UIImage {
if let copiedView = view.copyObject() as? T {
UIGraphicsBeginImageContext(size)
let basicSize = CGRect(origin: .zero, size: size)
draw(in: basicSize)
editSubviewClosure(size, copiedView)
copiedView.draw(basicSize)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage!
}
return self
}
}
extension UIImageView
extension UIImageView {
enum ImageAddingMode {
case changeOriginalImage
case addSubview
case addCopiedSubview
}
func drawOnCurrentImage<T: UIView>(view: T, mode: ImageAddingMode, editSubviewClosure: #escaping UIImage.EditSubviewClosure<T>) {
guard let image = image else {
return
}
let addSubView: (T) -> () = { view in
editSubviewClosure(self.frame.size, view)
self.addSubview(view)
}
switch mode {
case .changeOriginalImage:
self.image = image.with(view: view, editSubviewClosure: editSubviewClosure)
case .addSubview:
addSubView(view)
case .addCopiedSubview:
if let copiedView = view.copyObject() as? T {
addSubView(copiedView)
}
}
}
}
Usage
Sample 1
func sample1(label: UILabel) {
imageView.contentMode = .scaleAspectFit
imageView.image = UIImage(named: "wall")?.with(view: label) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.bounds = CGRect(x: 40, y: 40, width: 200, height: 40)
}
}
Sample 2
func sample2(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFit
imageView.drawOnCurrentImage(view: label, mode: .changeOriginalImage) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.textAlignment = .right
let width: CGFloat = 200
let height: CGFloat = 30
let indent: CGFloat = 40
viewToAdd.bounds = CGRect(x: parentSize.width - width - indent, y: parentSize.height - height - indent, width: width, height: height)
}
}
Sample 3
func sample3(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
Sample 4
func sample4(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addCopiedSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
Full sample
Do not forget to add the solution code here
import UIKit
class ViewController: UIViewController {
let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 300, height: 300))
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let label = UILabel(frame: CGRect(x: 20, y: 20, width: 80, height: 30))
label.text = "Blablabla"
label.font = UIFont.systemFont(ofSize: 20)
label.textColor = .black
view.addSubview(label)
sample1(label: label)
//sample2(label: label)
//sample3(label: label)
//sample4(label: label)
imageView.clipsToBounds = true
view.addSubview(imageView)
}
func sample1(label: UILabel) {
imageView.contentMode = .scaleAspectFit
imageView.image = UIImage(named: "wall")?.with(view: label) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.bounds = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
func sample2(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFit
imageView.drawOnCurrentImage(view: label, mode: .changeOriginalImage) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 40)
viewToAdd.textColor = .yellow
viewToAdd.textAlignment = .right
let width: CGFloat = 200
let height: CGFloat = 30
let indent: CGFloat = 40
viewToAdd.bounds = CGRect(x: parentSize.width - width - indent, y: parentSize.height - height - indent, width: width, height: height)
}
}
func sample3(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
func sample4(label: UILabel) {
imageView.image = UIImage(named: "wall")
imageView.contentMode = .scaleAspectFill
imageView.drawOnCurrentImage(view: label, mode: .addCopiedSubview) { (parentSize, viewToAdd) in
print("parentSize: \(parentSize)")
viewToAdd.font = UIFont.systemFont(ofSize: 16)
viewToAdd.textColor = .yellow
viewToAdd.frame = CGRect(x: 40, y: 40, width: 200, height: 20)
}
}
}
Great answer Vasily!
but in my situation I needed to add these fixes.
TEXT IS VERY SMALL
I ran a situation where the text was super small, maybe because the UIImage size was too small for the selected font of 14, so I fixed this by giving a huge font of 120.
TEXT IS NOT DISPLAYED AT THE GIVEN CGPOINT
In the same context of a big UIImage size, the position given to the extension was misplacing the text, the fix: added these 2 lets with the ratio of height and width computed and then multiplied for x,y points.
let widthRatio = size.width/UIScreen.main.bounds.width
let heightRatio = size.height/UIScreen.main.bounds.height
Hope that helps anybody!

Navigation bar with UIImage for title

I want to customize my app's look by using a logo image as the navigation bar's title, instead of plain text. When I use this code
let logo = UIImage(named: "logo.png")
self.navigationItem.titleView = logo;
I get the error "UIImage is not convertible to UIView". How can I do this correctly?
Put it inside an UIImageView
let logo = UIImage(named: "logo.png")
let imageView = UIImageView(image:logo)
self.navigationItem.titleView = imageView
I use this. It works in iOS 8
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let image = UIImage(named: "YOURIMAGE")
navigationItem.titleView = UIImageView(image: image)
}
And here is an example how you can do it with CGRect.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 38, height: 38))
imageView.contentMode = .ScaleAspectFit
let image = UIImage(named: "YOURIMAGE")
imageView.image = image
navigationItem.titleView = imageView
}
Hope this will help.
For swift 4 and you can adjust imageView size
let logoContainer = UIView(frame: CGRect(x: 0, y: 0, width: 270, height: 30))
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 270, height: 30))
imageView.contentMode = .scaleAspectFit
let image = UIImage(named: "your_image")
imageView.image = image
logoContainer.addSubview(imageView)
navigationItem.titleView = logoContainer
I tried #Jack's answer above, the logo did appear however the image occupied the whole Navigation Bar. I wanted it to fit.
Swift 4, Xcode 9.2
1.Assign value to navigation controller, UIImage. Adjust size by dividing frame and Image size.
func addNavBarImage() {
let navController = navigationController!
let image = UIImage(named: "logo-signIn6.png") //Your logo url here
let imageView = UIImageView(image: image)
let bannerWidth = navController.navigationBar.frame.size.width
let bannerHeight = navController.navigationBar.frame.size.height
let bannerX = bannerWidth / 2 - (image?.size.width)! / 2
let bannerY = bannerHeight / 2 - (image?.size.height)! / 2
imageView.frame = CGRect(x: bannerX, y: bannerY, width: bannerWidth, height: bannerHeight)
imageView.contentMode = .scaleAspectFit
navigationItem.titleView = imageView
}
Add the function right under viewDidLoad()
addNavBarImage()
Note on the image asset. Before uploading, I adjusted the logo with extra margins rather than cropped at the edges.
Final result:
You can use custom UINavigationItem so, you only need to change "Navigation Item" as YourCustomClass on the Main.storyboard.
In Swift 3
class FixedImageNavigationItem: UINavigationItem {
private let fixedImage : UIImage = UIImage(named: "your-header-logo.png")!
private let imageView : UIImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 37.5))
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
imageView.contentMode = .scaleAspectFit
imageView.image = fixedImage
self.titleView = imageView
}
}
Here is a handy function for Swift 4.2, shows an image with title text:-
override func viewDidLoad() {
super.viewDidLoad()
//Sets the navigation title with text and image
self.navigationItem.titleView = navTitleWithImageAndText(titleText: "Dean Stanley", imageName: "online")
}
func navTitleWithImageAndText(titleText: String, imageName: String) -> UIView {
// Creates a new UIView
let titleView = UIView()
// Creates a new text label
let label = UILabel()
label.text = titleText
label.sizeToFit()
label.center = titleView.center
label.textAlignment = NSTextAlignment.center
// Creates the image view
let image = UIImageView()
image.image = UIImage(named: imageName)
// Maintains the image's aspect ratio:
let imageAspect = image.image!.size.width / image.image!.size.height
// Sets the image frame so that it's immediately before the text:
let imageX = label.frame.origin.x - label.frame.size.height * imageAspect
let imageY = label.frame.origin.y
let imageWidth = label.frame.size.height * imageAspect
let imageHeight = label.frame.size.height
image.frame = CGRect(x: imageX, y: imageY, width: imageWidth, height: imageHeight)
image.contentMode = UIView.ContentMode.scaleAspectFit
// Adds both the label and image view to the titleView
titleView.addSubview(label)
titleView.addSubview(image)
// Sets the titleView frame to fit within the UINavigation Title
titleView.sizeToFit()
return titleView
}
this worked for me in Sept 2015 - Hope this helps someone out there.
// 1
var nav = self.navigationController?.navigationBar
// 2 set the style
nav?.barStyle = UIBarStyle.Black
nav?.tintColor = UIColor.yellowColor()
// 3
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
imageView.contentMode = .ScaleAspectFit
// 4
let image = UIImage(named: "logo.png")
imageView.image = image
// 5
navigationItem.titleView = imageView
I have written this for iOS 10 & iOS 11 and it worked for me:
extension UINavigationBar {
func setupNavigationBar() {
let titleImageWidth = frame.size.width * 0.32
let titleImageHeight = frame.size.height * 0.64
var navigationBarIconimageView = UIImageView()
if #available(iOS 11.0, *) {
navigationBarIconimageView.widthAnchor.constraint(equalToConstant: titleImageWidth).isActive = true
navigationBarIconimageView.heightAnchor.constraint(equalToConstant: titleImageHeight).isActive = true
} else {
navigationBarIconimageView = UIImageView(frame: CGRect(x: 0, y: 0, width: titleImageWidth, height: titleImageHeight))
}
navigationBarIconimageView.contentMode = .scaleAspectFit
navigationBarIconimageView.image = UIImage(named: "image")
topItem?.titleView = navigationBarIconimageView
}
}
Swift 5.1+, Xcode 13+
Sometimes if your image is in high resolution then, imageView shifts from centre, I would suggest using this method
lazy var navigationTitleImageView = UIImageView()
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.navigationTitleImageView.image = logo
self.navigationTitleImageView.contentMode = .scaleAspectFit
self.navigationTitleImageView.translatesAutoresizingMaskIntoConstraints = false
if let navC = self.navigationController{
navC.navigationBar.addSubview(self.navigationTitleImageView)
self.navigationTitleImageView.centerXAnchor.constraint(equalTo: navC.navigationBar.centerXAnchor).isActive = true
self.navigationTitleImageView.centerYAnchor.constraint(equalTo: navC.navigationBar.centerYAnchor, constant: 0).isActive = true
self.navigationTitleImageView.widthAnchor.constraint(equalTo: navC.navigationBar.widthAnchor, multiplier: 0.2).isActive = true
self.navigationTitleImageView.heightAnchor.constraint(equalTo: navC.navigationBar.widthAnchor, multiplier: 0.088).isActive = true
}
}
and viewWillDisappear()
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
self.navigationTitleImageView.removeFromSuperview()
}
or else just reduce the image size
If you'd prefer to use autolayout, and want a permanent fixed image in the navigation bar, that doesn't animate in with each screen, this solution works well:
class CustomTitleNavigationController: UINavigationController {
override func viewDidLoad() {
super.viewDidLoad()
let logo = UIImage(named: "MyHeaderImage")
let imageView = UIImageView(image:logo)
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
navigationBar.addSubview(imageView)
navigationBar.addConstraint (navigationBar.leftAnchor.constraint(equalTo: imageView.leftAnchor, constant: 0))
navigationBar.addConstraint (navigationBar.rightAnchor.constraint(equalTo: imageView.rightAnchor, constant: 0))
navigationBar.addConstraint (navigationBar.topAnchor.constraint(equalTo: imageView.topAnchor, constant: 0))
navigationBar.addConstraint (navigationBar.bottomAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 0))
}
Programmatically could be done like this.
private var imageView: UIView {
let bannerWidth = navigationBar.frame.size.width * 0.5 // 0.5 its multiplier to get correct image width
let bannerHeight = navigationBar.frame.size.height
let view = UIView()
view.backgroundColor = .clear
view.frame = CGRect(x: 0, y: 0, width: bannerWidth, height: bannerHeight)
let image = UIImage(named: "your_image_name")
let imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFit
imageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
view.addSubview(imageView)
return view
}
The just change titleView
navigationItem.titleView = imageView
let's do try and checkout
let image = UIImage(named: "Navbar_bg.png")
navigationItem.titleView = UIImageView(image: image)
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
imageView.contentMode = .ScaleAspectFit
let imageView = UIImageView(frame: (CGRect(x: 0, y: 0, width: 40, height:
40)))
imageView.contentMode = .scaleAspectFit
let image = UIImage (named: "logo") // logo is your NPG asset
imageView.image = image
self.navigationItem.titleView = imageView
Works for me in swift 4 (square image 40x40)
let imageView = UIImageView()
imageView.frame.size.width = 40
imageView.frame.size.height = 40
imageView.contentMode = .scaleAspectFit
let image = UIImage(named: "YOUR_IMAGE_NAME")
imageView.image = image
navigationItem.titleView = imageView
If you want other measures, try
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 50, height: 100.5)))
imageView.contentMode = .scaleAspectFit
let image = UIImage(named: "YOUR_IMAGE_NAME")
imageView.image = image
navigationItem.titleView = imageView
I hope it serves you. It works for me.
Objective-C version:
//create the space for the image
UIImageView *myImage = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 256, 144)];
//bind the image with the ImageView allocated
myImage.image = [UIImage imageNamed:#"logo.png"];
//add image into imageview
_myNavigationItem.titleView = myImage;
Just in case someone (like me) had arrived here looking for the answer in Objective-C.
This worked for me... try it
let image : UIImage = UIImage(named: "LogoName")
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
imageView.contentMode = .scaleAspectFit
imageView.image = image
navigationItem.titleView = imageView
In order to get the image view with the proper size and in the center, you should use the following approach:
let width = 120 // choose the image width
let height = 20 // choose the image height
let titleView = UIView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 44)) //44 is the standard size of the top bar
let imageView = UIImageView(frame: CGRect(x: (view.bounds.width - width)/2, y: (44 - height)/2, width: width, height: height))
imageView.contentMode = .scaleAspectFit //choose other if it makes sense
imageView.image = UIImage(named: "your_image_name")
titleView.addSubview(imageView)
navigationItem.titleView = titleView

Resources