The function self.navigationItem.rightBarButtonItem = cartBarButton won't show my item on the right of UINavigationController's NavBar
EDIT
let cartOriginalImage = UIImage.cart
let cartButton = UIImageButton(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
cartButton.setBackgroundImage(cartOriginalImage, for: .normal)
cartButton.tintColor = Colors.Navigation.Tint.default
cartButton.addTarget(self, action: #selector(MainViewController.cartButtonPressedInHomePage(sender:)), for: .touchUpInside)
let cartBarButton = UIBarButtonItem(customView: cartButton)
if let badge = badge {
cartBarButton.badgeValue = badge
cartBarButton.badge.backgroundColor = Colors.Navigation.Background.badge
cartBarButton.badge.textColor = Colors.Navigation.Text.badge
}
I had the similar issue with custom image view. My suggestion is to wrap your custom view into container view.
private func configureUserAvatarView() {
let tapRecognizer = UITapGestureRecognizer(target: self, action: #selector(avatarViewAction(_:)))
let customView = UIView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
customView.addGestureRecognizer(tapRecognizer)
let imageView = FUIImageView(image: #imageLiteral(resourceName: "avatar_default_30х30"))
imageView.isCircular = true
imageView.contentMode = .scaleAspectFit
imageView.frame = customView.bounds
customView.addSubview(imageView)
navigationItem.leftBarButtonItem = UIBarButtonItem(customView: customView)
}
Related
I am using a custom image as the back button of my Navigation Controller but the problem is that the image is not aligned correctly with the title and the right button item. I've been trying to move the back button down a few pixels with no success.
extension UINavigationController {
func addBackButton() {
let imgBack = UIImage(named: "ic_back")
navigationBar.backIndicatorImage = imgBack
navigationBar.backIndicatorTransitionMaskImage = imgBack
navigationBar.topItem?.backBarButtonItem = UIBarButtonItem(title: "",
style: .plain,
target: self,
action: nil)
}
}
This is what it looks like now:
As you can see I need to move the back button down a little, any help would be much appreciated.
This is my code for a custom back button. I added on viewDidLoad() with the image below. Maybe you need to test with your image how to size it correctly. And you can remove the part with the label.
let backButtonView = UIView(frame: CGRect(x: 0, y: 0, width: 60, height: 44))
let imageView = UIImageView(image: UIImage(named: "back-arrow"))
imageView.frame = CGRect(x: -5, y: 11, width: 12, height: 22)
imageView.image = imageView.image!.withRenderingMode(.alwaysTemplate)
imageView.tintColor = .blue
let label = UILabel(frame: CGRect(x: 10, y: 0, width: 40, height: 44))
label.textColor = .blue
label.text = "Back"
backButtonView.addSubview(imageView)
backButtonView.addSubview(label)
backButtonView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(backButtonClicked)))
let barButton = UIBarButtonItem(customView: backButtonView)
navigationItem.leftBarButtonItem = barButton
I'm trying to setup the custom navigation bar in my iOS app, but .frame = CGRect(...) doesn't change the size of buttons that I added to it. Buttons appeared inside the navigation bar, but they have wrong size, or maybe constraints, I don't know.
// Setting up the Navigation Bar
private func setupNavigationBar() {
// Remove the shadow under the Navigation Bar
self.navigationController?.navigationBar.shadowImage = UIImage()
let addButton = UIButton(type: .system)
addButton.setImage(UIImage(named: "ic_add")?.withRenderingMode(.alwaysOriginal), for: .normal)
addButton.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
let settingsButton = UIButton(type: .system)
settingsButton.setImage(UIImage(named: "ic_settings")?.withRenderingMode(.alwaysOriginal), for: .normal)
settingsButton.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
navigationItem.rightBarButtonItems = [UIBarButtonItem(customView: settingsButton), UIBarButtonItem(customView: addButton)]
}
(I call this function inside the viewDidLoad())
Here you can see the result on my iPhone:
This is work for me. Please try it. (iOS 11)
private func setupNavigationBar() {
// Remove the shadow under the Navigation Bar
self.navigationController?.navigationBar.shadowImage = UIImage()
let addButton = UIButton(type: .custom)
addButton.setImage(UIImage(named: "ic_add")?.withRenderingMode(.alwaysOriginal), for: .normal)
addButton.frame = CGRect(x: 0, y: 0, width: 25, height: 25)
let settingsButton = UIButton(type: .custom)
settingsButton.frame = CGRect(x: 0, y: 0, width: 10, height: 10)
settingsButton.setImage(UIImage(named: "ic_settings")?.withRenderingMode(.alwaysOriginal), for: .normal)
let menuBarItem = UIBarButtonItem(customView: settingsButton) // new line
let currWidth = menuBarItem.customView?.widthAnchor.constraint(equalToConstant: 10) // new line
currWidth?.isActive = true // new line
let currHeight = menuBarItem.customView?.heightAnchor.constraint(equalToConstant: 10) // new line
currHeight?.isActive = true // new line
navigationItem.rightBarButtonItems = [
menuBarItem, // modify
UIBarButtonItem(customView: addButton)]
}
Try to change the button type
Replace .system to .custom .
Also check the size of original image if it is very large.
(Swift3/iOS10)
I'm trying to put two buttons (save/cancel) inside of a UITextField using the rightView property. My basic setup code (called from viewDidLoad) is as follows:
private func accesorizeRenameField() {
let saveButton = UIButton(type: .system)
saveButton.setImage(#imageLiteral(resourceName: "buttonCheckmark"), for: .normal)
saveButton.addTarget(self, action: #selector(renameSave), for: .touchUpInside)
saveButton.tintColor = UIColor(white: 0.15, alpha: 1)
let cancelButton = UIButton(type: .system)
cancelButton.setImage(#imageLiteral(resourceName: "buttonX"), for: .normal)
cancelButton.addTarget(self, action: #selector(renameCancel), for: .touchUpInside)
cancelButton.tintColor = UIColor(227, 34, 60, 1)
let container = UIView()
container.addSubview(saveButton)
container.addSubview(cancelButton)
container.translatesAutoresizingMaskIntoConstraints = false
container.backgroundColor = UIColor.cyan
saveButton.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true
cancelButton.centerYAnchor.constraint(equalTo: container.centerYAnchor).isActive = true
saveButton.heightAnchor.constraint(equalTo: container.heightAnchor).isActive = true
cancelButton.heightAnchor.constraint(equalTo: container.heightAnchor).isActive = true
saveButton.leadingAnchor.constraint(equalTo: container.leadingAnchor).isActive = true
saveButton.trailingAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
cancelButton.leadingAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
cancelButton.trailingAnchor.constraint(equalTo: container.trailingAnchor).isActive = true
self.renameField.rightView = container
self.renameField.rightViewMode = .always
}
Later on, when I expose the rename field through some animation, I call
self.renameField.rightView?.bounds = CGRect(x: 0, y: 0, width: self.renameField.bounds.height * 2, height: self.renameField.bounds.height)
self.renameField.rightView?.setNeedsLayout()
"rightView.frame \(self.renameField.rightView?.frame)".print()
self.renameField.rightView?.subviews.enumerated().forEach() {index,child in
"child \(index) frame \(child.frame)".print()
}
However, I cannot get the buttons to show up. The cyan background (for debugging) shows up, but actually is square (it should be a 2:1 rectangle). The print shows that the subviews have frames of size 0. What is the right/idiomatic way to do this? I feel like I'm just throwing hammers here...
Create UIButton as type of .custom instead of .system.
And as you already know renameField's height in viewDidLoad, you don't need to bother with constraint.
The code below is enough.
override func
viewDidLoad() {
super.viewDidLoad()
let wSize = renameField.frame.size.height - 2
let saveButton = UIButton( type: .custom )
saveButton.setImage( #imageLiteral(resourceName: "buttonCheckmark"), for: .normal )
saveButton.addTarget( self, action: #selector(renameSave), for: .touchUpInside )
saveButton.frame = CGRect( x: 0, y: 0, width: wSize, height: wSize )
let cancelButton = UIButton( type: .custom )
cancelButton.setImage( #imageLiteral(resourceName: "buttonX"), for: .normal )
cancelButton.addTarget( self, action: #selector(renameCancel), for: .touchUpInside )
cancelButton.frame = CGRect( x: wSize, y: 0, width: wSize, height: wSize )
let wV = UIView()
wV.frame = CGRect( x:0, y:0, width: wSize * 2, height: wSize )
wV.addSubview( saveButton )
wV.addSubview( cancelButton )
renameField.rightView = wV;
renameField.rightViewMode = .always;
}
I am doing custom a navigation bar with items which y positions are lower than default. I tried many methods:
setBackButtonBackgroundVerticalPositionAdjustment:
set CGRectOffset of custom view
UIBarButtonItem.appearance().setTitlePositionAdjustment(UIOffset.init(horizontal: X, vertical: Y), forBarMetrics: UIBarMetrics.Default)
They made the items appeared in right positions, but I couldn't fire any actions when I clicked/touched on them. I think because I didn't touch the bar items, they were only the appearances/ copy views/images of these item.
Could anybody help me to resolve this problem?
My code:
let lblTitle = UILabel(frame: CGRectMake(0, 0, 100, 28))
lblTitle.text = FMLStringLocale("APP_name")
lblTitle.textColor = UIColor.whiteColor()
lblTitle.font = ROBOTO_THIN_24
lblTitle.textAlignment = NSTextAlignment.Left
lblTitle.backgroundColor = UIColor.clearColor()
lblTitle.transform = CGAffineTransformMakeTranslation(6, 11)
let lblTitleContainer = UIView(frame: lblTitle.frame)
lblTitleContainer.addSubview(lblTitle)
let leftTitle = UIBarButtonItem(customView: lblTitleContainer)
navigationItem.leftBarButtonItem = leftTitle
let rightView = UIView(frame: CGRectMake(0, 0, 134, 22))
rightView.backgroundColor = UIColor.whiteColor()
rightView.transform = CGAffineTransformMakeTranslation(0, 18)
let imvUSFlag = UIImageView(image: UIImage(named: "icon_us"))
imvUSFlag.frame = CGRectMake(0, 0, 19, 13)
imvUSFlag.transform = CGAffineTransformMakeTranslation(-2, 20)
rightView.addSubview(imvUSFlag)
let switcher = UISwitch(frame: CGRectMake(imvUSFlag.frame.maxX - 5, 12, 31, 16))
switcher.setOn(false, animated: false)
switcher.addTarget(self, action: Selector("tapToChangeLanguage:"), forControlEvents: UIControlEvents.ValueChanged)
switcher.transform = CGAffineTransformMakeScale(0.5, 0.5)
// let switchContainer = UIView(frame: switcher.frame)
// switchContainer.addSubview(switcher)
rightView.addSubview(switcher)
let imvFRFlag = UIImageView(image: UIImage(named: "icon_france"))
imvFRFlag.frame = CGRectMake(switcher.frame.maxX + 6, 0, 19, 14)
imvFRFlag.transform = CGAffineTransformMakeTranslation(0, 20)
rightView.addSubview(imvFRFlag)
let btnMenu = UIButton()
btnMenu.setImage(UIImage(named : "icon_menu"), forState: .Normal)
btnMenu.frame = CGRectMake(imvFRFlag.frame.maxX + 30, 0, 23, 21)
btnMenu.addTarget(self, action: "tapToMenu:", forControlEvents: UIControlEvents.TouchUpInside)
btnMenu.transform = CGAffineTransformMakeTranslation(0, 18)
rightView.addSubview(btnMenu)
rightView.transform = CGAffineTransformMakeTranslation(0, 18)
let rightViewItem = UIBarButtonItem(customView: rightView)
navigationItem.rightBarButtonItem = rightViewItem
navigationController?.navigationBar.barStyle = .BlackTranslucent
navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
navigationController?.navigationBar.shadowImage = UIImage()
The reason why you can't tap your button btnMenu is that you have positioned btnMenu outside the frame of its superview rightView. A subview outside its superview cannot receive touches.
Finally, I resolved my problem:
Check my new code:
let lblTitle = UILabel(frame: CGRectMake(7, 32, 100, 28))
lblTitle.text = FMLStringLocale("APP_name")
lblTitle.textColor = UIColor.whiteColor()
lblTitle.font = ROBOTO_THIN_24
lblTitle.textAlignment = NSTextAlignment.Left
lblTitle.backgroundColor = UIColor.clearColor()
let lblTitleContainer = UIView(frame: CGRectMake(0, 0, 100, 64))
// lblTitleContainer.bounds = CGRectOffset(lblTitleContainer.bounds, -6, -32)
lblTitleContainer.addSubview(lblTitle)
let leftTitle = UIBarButtonItem(customView: lblTitleContainer)
navigationItem.leftBarButtonItem = leftTitle
let rightView = UIView(frame: CGRectMake(0, 0, 134, 64))
// rightView.backgroundColor = UIColor.grayColor()
// rightView.transform = CGAffineTransformMakeTranslation(0, 18)
let imvUSFlag = UIImageView(image: UIImage(named: "icon_us"))
imvUSFlag.frame = CGRectMake(0, 40, 18, 12)
rightView.addSubview(imvUSFlag)
let switcher = UISwitch(frame: CGRectMake(imvUSFlag.frame.maxX - 5, 32, 31, 16))
switcher.setOn(false, animated: false)
switcher.addTarget(self, action: Selector("tapToChangeLanguage:"), forControlEvents: UIControlEvents.ValueChanged)
switcher.transform = CGAffineTransformMakeScale(0.5, 0.45)
let switchContainer = UIView(frame: switcher.frame)
switchContainer.addSubview(switcher)
rightView.addSubview(switcher)
let imvFRFlag = UIImageView(image: UIImage(named: "icon_france"))
imvFRFlag.frame = CGRectMake(switcher.frame.maxX + 6, 40, 18, 12)
rightView.addSubview(imvFRFlag)
let btnMenu = UIButton()
btnMenu.setImage(UIImage(named : "icon_menu"), forState: .Normal)
btnMenu.frame = CGRectMake(imvFRFlag.frame.maxX + 30, 35, 23, 21)
btnMenu.addTarget(self, action: "tapToMenu:", forControlEvents: UIControlEvents.TouchUpInside)
rightView.addSubview(btnMenu)
let rightViewItem = UIBarButtonItem(customView: rightView)
navigationItem.rightBarButtonItem = rightViewItem
navigationController?.navigationBar.barStyle = .BlackTranslucent
navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
navigationController?.navigationBar.shadowImage = UIImage()
I've created a modal segue to a viewController, however when i trigger this segue, there seem to be some delay when viewing the viewController. All i have in the viewController is in the viewDidLoad. what could course this slow modal segue?
override func viewDidLoad() {
super.viewDidLoad()
self.title = "Caption".uppercaseString
self.view.backgroundColor = UIColor(hexString: "#0B1E30")
self.navigationController?.navigationBar.barTintColor = UIColor(gradientStyle: UIGradientStyle.LeftToRight, withFrame: CGRectMake(0, 0, self.view.frame.width, (self.navigationController?.navigationBar.frame.height)! + 20), andColors: [UIColor(hexString: "#7F5CE6"), UIColor(hexString: "#9D8FE2")])
let closeButton = UIBarButtonItem(image: UIImage(named: "Cross"), style: UIBarButtonItemStyle.Done, target: self, action: "dismissController")
self.navigationItem.leftBarButtonItem = closeButton
textView?.text = "Add caption (optional)"
textView?.becomeFirstResponder()
textView?.keyboardAppearance = UIKeyboardAppearance.Dark
textView?.font = UIFont(name: "Montserrat-Light", size: 13)
textView?.textColor = UIColor(hexString: "#363636")
capturedImageView = UIImageView(image: capturedPhoto)
capturedImageView?.frame = CGRectMake(8,10, 85, 85)
let path = UIBezierPath(rect: CGRectMake(8, 10, 85, 85))
textView?.textContainer.exclusionPaths = [path]
textView?.addSubview(capturedImageView!)
facebookButton?.tag = 1
facebookButton!.adjustsImageWhenHighlighted = false
facebookButton?.addTarget(self, action: "tapSocial:", forControlEvents: UIControlEvents.TouchUpInside)
facebookButton?.tintColor = UIColor.whiteColor()
facebookButton?.backgroundColor = UIColor(hexString: "#395798")
facebookButton?.contentMode = UIViewContentMode.Center
facebookButton?.setTitle("", forState: UIControlState.Normal)
let fBorder = CALayer()
let width = CGFloat(1.0)
fBorder.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.05).CGColor
fBorder.frame = CGRect(x: 0, y: facebookButton!.frame.size.height - width, width: facebookButton!.frame.size.width, height: facebookButton!.frame.size.height)
fBorder.borderWidth = width
facebookButton!.layer.addSublayer(fBorder)
facebookButton!.layer.masksToBounds = true
twitterButton?.tag = 2
twitterButton!.adjustsImageWhenHighlighted = false
twitterButton?.addTarget(self, action: "tapSocial:", forControlEvents: UIControlEvents.TouchUpInside)
twitterButton?.contentMode = UIViewContentMode.Center
twitterButton?.tintColor = UIColor.whiteColor()
twitterButton?.setTitle("", forState: UIControlState.Normal)
let tBorder = CALayer()
tBorder.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.05).CGColor
tBorder.frame = CGRect(x: 0, y: twitterButton!.frame.size.height - width, width: twitterButton!.frame.size.width, height: twitterButton!.frame.size.height)
tBorder.borderWidth = width
twitterButton!.layer.addSublayer(tBorder)
twitterButton!.layer.masksToBounds = true
let tRightBorder = CALayer()
tRightBorder.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.05).CGColor
tRightBorder.frame = CGRect(x: 0, y: 0, width: width, height: twitterButton!.frame.size.height)
tRightBorder.borderWidth = width
twitterButton!.layer.addSublayer(tRightBorder)
instagramButton?.tag = 3
instagramButton!.adjustsImageWhenHighlighted = false
instagramButton?.addTarget(self, action: "tapSocial:", forControlEvents: UIControlEvents.TouchUpInside)
instagramButton?.contentMode = UIViewContentMode.Center
instagramButton?.tintColor = UIColor.whiteColor()
instagramButton?.setTitle("", forState: UIControlState.Normal)
let iBorder = CALayer()
iBorder.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.05).CGColor
iBorder.frame = CGRect(x: 0, y: instagramButton!.frame.size.height - width, width: instagramButton!.frame.size.width, height: instagramButton!.frame.size.height)
iBorder.borderWidth = width
instagramButton!.layer.addSublayer(iBorder)
instagramButton!.layer.masksToBounds = true
let iLeftBorder = CALayer()
iLeftBorder.borderColor = UIColor.whiteColor().colorWithAlphaComponent(0.05).CGColor
iLeftBorder.frame = CGRect(x: 0, y: 0, width: width, height: instagramButton!.frame.size.height)
iLeftBorder.borderWidth = width
instagramButton!.layer.addSublayer(iLeftBorder)
}
This came as a surprise for me but apparently there is a performance issue with textView's property "selectable" when set to true by default (checked on Storyboard).
Try going to your Storyboard, select each textView and uncheck the box "selectable". If you need the textView to be selectable, then just set selectable to true programatically on your viewDidLoad.