How to customize the navigation back symbol and navigation back text? - ios

This is the back icon and back text now:
But if I want my navigation back like this:
I have tried to set the back to my want icon image:
But it useless.

You can hide back button text in many ways.Try this simple approach.
Step1: Goto your mainstoryBoard and click navigationBar.
Step 2: Goto Attributes Inspector under Navigation Item add a BLANK SPACE in Back Button
Step 3: If you want to change backButton text method is pretty much the same.
Update 1: If you want to use an image as a back button check this link
Update 2:
Method 2: Using custom image as a back button.
Paste below code into your detailVC and set image for your back Button.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
title = "Detail VC"
let customButton = UIBarButtonItem(image: UIImage(named: "back"), style: .plain, target: self, action: #selector(backButtonTapped)) //
self.navigationItem.leftBarButtonItem = customButton
}
func backButtonTapped() {
_ = navigationController?.popToRootViewController(animated: true)
}
I am setting back button image in assets catalogue with the 32pixel size.I am not sure about the asset image size.Check with apple doc about the size class.
Output:

Create a new UIBarButton and add it the navigationItem.leftBarButton.
let backButton = UIBarButtonItem(image: UIImage(named:"yourImage"), style: .plain, target: self, action: #selector(yourBackMethod(sender:))
navigationItem.leftBarButtonItem = = backButton
#objc internal func yourBackMethod(sender: AnyObject) {
navigationController.popViewController()
}
Hope this helps.

Related

Create Default Back Button with Custom Button in LeftBarButtonItems ios

I am creating a project where I need to have a default back button and custom filter button on the left side of the navigation bar.
I have created custom back button, custom filter button and add both of them to leftBarButtonItems
navigationItem.leftBarButtonItems = alignedLeftBarButtonItems()
func alignedLeftBarButtonItems() -> [UIBarButtonItem] {
let filterButton = createLeftCustomBarButton()
// back button creation
let backButton = UIBarButtonItem(image: R.image.navBackArrow(), style: .plain, target: self, action: #selector(self.backButtonPressed(_:)))
backButton.tintColor = UIColor.white
let barButtonsItems = [
backButton,
UIBarButtonItem(customView: filterButton)
]
return barButtonsItems
}
Things are fine and working.
Concern:
Default, User can go to the previous VC by sliding from left to
right. This functionality is lost in making this. Is there a way I can
have both buttons with the sliding functionality.
You need to use UIBarButtonItem to use default left or right swipe functionality for back button:
let backButton = UIBarButtonItem(image: Image.backButton, style: UIBarButtonItemStyle.plain, target: self, action: #selector(actionBackButton))
self.navigationItem.leftBarButtonItem = backButton
With Custom button, you cannot get this functionality

Adding multiple buttons in NavigationBar

My app requires me to add multiple buttons in my navigation bar.
Here is an image of what my nav bar looks like
How do i achieve this type of design?
You can configure your view controller's navigationItem in various ways to achieve this design.
Left side
To allow additional buttons next to the system "back button" on the left:
navigationItem.leftItemsSupplementBackButton = true
This allows you to add a left bar button item for the circular image:
navigationItem.setLeftBarButtonItem(imageItem, animated: trueOrFalse)
imageItem would be a UIBarButtonItem initialized with a customView or image, as discussed in some of the other answers here.
For the back button itself, to achieve a simple "<" without showing the title of the previous view or showing "< Back", you can open the storyboard and set the Back Button text of the previous view controller to a single space, as described in this post.
Title area
For the title area, as discussed in the other answers:
navigationItem.titleView = (a custom view)
Right side
For the right side, you can add multiple buttons:
navigationItem.setRightBarButtonItems([button1, button2, button3, button4], animated: trueOrFalse)
Here, button1, button2, button3, and button4 are each UIBarButtonItems. You would likely initialize these buttons with images.
Looks like you also will want to set the tintColor of the navigation bar to black, so that the bar buttons are rendered in black:
navigationController?.navigationBar.tintColor = .black
All of this code would be done in the view controller, usually in viewDidLoad, unless you need to dynamically change which buttons are shown as the content of your view controller changes.
Try this:
let callImage = UIImage(named: "call")!
let videoImage = UIImage(named: "video")!
let searchImage = UIImage(named: "search")!
let callButton = UIBarButtonItem(image: callImage, style: .plain, target: self, action: #selector(didTapCallButton))
let videoButton = UIBarButtonItem(image: searchImage, style: .plain, target: self, action: #selector(didTapVideoButton))
let searchButton = UIBarButtonItem(image: searchImage, style: .plain, target: self, action: #selector(didTapSearchButton))
navigationItem.rightBarButtonItems = [callButton, videoButton, searchButton]
Selector methods
func didTapCallButton(sender: AnyObject){
...
}
func didTapVideoButton(sender: AnyObject){
...
}
func didTapSearchButton(sender: AnyObject){
...
}
You can create your own view and put down your Images, Labels, etc...
After that, you write:
self.navigationItem.titleView = yourView
UINavigationItem has a property called rightBarButtonItems, this expects an array of UIBarButtonItem which would in your case be each of your buttons.
You can use the initialiser on UIBarButtonItem to specify the image and style:
init(image: UIImage?, style: UIBarButtonItemStyle, target: Any?, action: Selector?)
Initializes a new item using the specified image and other properties.
On your view controller you can access the navigation item through the accessor navigationItem, if you embed your view controller inside a UINavigationController you will need to access the navigationItem on that instance and not the view controller.
You can Add UIView in navigation bar so that you can add multiple buttons in that view.

Can't change text of navigation item back button

I want to hide the text of the back button on the navigation bar and so have found past questions such as this: UINavigationBar Hide back Button Text
However I can't change the text at all, either via using the storyboard, or in code.
See screenshot below for attempt at changing it using the storyboard:
Or if I try to do it programatically by adding the following to viewDidLoad of the pushed view controller
self.navigationItem.backBarButtonItem?.title = "stuff"
It has no effect, nor does moving the same line of code to the view controller doing the pushing.
How come it won't change at all regardless of how I'm trying to change it?
How come using the storyboard, the navigation item title can be set, but not the back button text?
If I add the following to the pushed view controller then I can get the text to change:
UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.clearColor()], forState: UIControlState.Normal)
UIBarButtonItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName:UIColor.clearColor()], forState: UIControlState.Highlighted)
But I would like to understand why none of the other ways of trying to change it have any effect
The title of the back button gets automatically set to the title of the view controller that it will go back to.
To do what you want, you'll have to hide the back button and insert your own button with your own image.
Annoying == #YES.
As Brett mentioned above, a new bar button must be created to change the text.
To set the title of the back button, try the following code:
self.navigationItem.backBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:#"Stuff" style:UIBarButtonStylePlain target:nil action:nil];
Or make it in storyboard by adding a bar button item to your navigation bar.
When it comes to segue from tabBarController to a normal navigation controller, it is always easy to get confused in implementing backBarItem.
The trick is about which controller the backBarItem belongs to. If we navigate from controller A to controller B, then the backBarItem, which is the back button appearing on the controller B's navigation bar, actually belongs to controller A. So we just need to find the right controller to edit the backBarItem.
Solution 1. In the controller A, set the backBarButton self.tabBarController?.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .done, target: self, action: nil)
//M: In controller A
override func viewDidLoad() {
super.viewDidLoad()
self.tabBarController?.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .done, target: self, action: nil)
}
Solution 2. We can use a customised leftBarButton in controller B to cover controller A's backButton. navigationItem.leftBarButtonItem = UIBarButtonItem(title: "<", style: .done, target: self, action: #selector(tapBackButton)), then set the action of the leftBarButton to go back to the previous controller.
//M: in Controller B
override func viewDidLoad() {
super.viewDidLoad()
//M: Hide the default back button.
//M: backBarItem will be covered by the leftBarItem anyway, here is to add an extra handling.
navigationItem.hidesBackButton = true
//M: Customize a leftBarButton.
navigationItem.leftBarButtonItem = UIBarButtonItem(title: " < ", style: .done, target: self, action: #selector(tapBackButton))
//M: Customize the color and font size to the leftBarButton
navigationItem.leftBarButtonItem?.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white, NSAttributedString.Key.font : UIFont.boldSystemFont(ofSize: 25)], for: .normal)
}
//M: Set the action of the leftBarButton to go back.
#objc func tapBackButton(_ sender:Any){
self.navigationController?.popToRootViewController(animated: true)
}

How change the back button to a custom image in Swift2

Hi,
I'm trying to figure out how to change the back button to a custom image on all ViewControllers. I read though a few questions regarding to this solution, but it was mostly outdated.
I want to change < Back to a stock image I have
I was able to disable to hide the back but that's not my goal my goal is to change the default image to a custom one, I added the custom image to the images.xcassets and that didn't work also I tried to set the System Item to Custom and under Bar Item I selected my image which is image.png, but still didn't work, can someone help me approach this solution? Thanks.
override func viewDidLoad() {
let image: UIImage = UIImage(named: "images")!
self.navigationController?.navigationItem.backBarButtonItem?.image = image
}
override func viewDidAppear(animated: Bool) {
// let backButton = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.Plain, target: navigationController, action: nil)
// navigationItem.leftBarButtonItem = backButton
self.navigationItem.setHidesBackButton(false, animated: false)
}
Instead of doing that you can create your own custom button and assign it to leftBarButtonItem. Try this out
var backBtn = UIBarButtonItem()
let image: UIImage = UIImage(named: "images")!
backBtn.image = image
//set other properties for your button
//set traget and action
self.navigationItem.leftBarButtonItem = backBtn
You can just pop the current view controller in action of the back button.
You can add this in AppDelegate
UIBarButtonItem.appearance().setBackButtonBackgroundImage(UIImage(named: name), forState: .Normal, barMetrics: .Default)
This will set back button through out the app

Change back button title when pushing a UIViewController on UITableViewController

View hierarchy:
UINavigationController
->UITableViewController(1)
->UITableViewController(2)
->UIViewController(3)
In 1 and 2 I have this code:
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
self.navigationItem.backBarButtonItem?.title = ""
}
It should override the back button title of the next view controller pushed on the current view controller. It works from 1 -> 2. But it does not work for 2 -> 3. In 3 the back button title has a title, the name of the previous UITableViewController.
Any ideas whats wrong? I am using swift, xcode6.1 and iOS8.1
You could init a new back button with no title. Just put this in the viewDidLoad() of each view controller.
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: UIBarButtonItemStyle.Plain, target: nil, action: nil)
--
I am going to extend this answer with my experience. So I managed to remove the title of the back button to display just the back arrow. In storyboard you have to select the navigation item that displays the title inside the navigation bar of the previous view controller. There is a property called Back Button. Just enter a space and save. It will remove the back button title.
Update
UIBarButtonItemStyle.Bordered was deprecated in iOS 8.0. Use UIBarButtonItemStyle.Plain instead.
thanks,
if you want using customer back button image, you can use this
self.navigationController?.navigationBar.backIndicatorImage = UIImage(named: “backImage”)
self.navigationController?.navigationBar.backIndicatorTransitionMaskImage = UIImage(named: “ backImage”)
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: “”, style: UIBarButtonItemStyle.Plain, target: nil, action: nil)

Resources