I have a problem working on the UI. I was using a navigationController to move the screen.
But I didn't want to use the basic back button, so I hid the basic back button, added the navigation bar to the storyboard,
and added items to make the back button. However, the screen does not move to the previous screen. How can I get to the previous screen?
Basic backButton // I'm hiding it now.
I want to use the back button I made.
Backward command for back button items.
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
self.navigationController?.setNavigationBarHidden(true, animated: animated)
}
#IBAction func backButton(_ sender: UIBarButtonItem) {
self.dismiss(animated: false, completion: nil) // Did not worked!
}
In addition, I would like to remove the underline of the navigation header. How can I remove it?
I use this in a project for the same situation:
UIApplication.shared.keyWindow?.rootViewController?.dismiss(animated: false, completion: nil)
this can be used after iOS 13 deprecation of keyWindow:
let keyW = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
keyW?.rootViewController?.dismiss(animated: false, completion: nil)
This can also be used:
self.navigationController?.popViewController(animated: false)
or
self.navigationController?.popToRootViewController(animated: false)
About the button:
Why not just use the navigation button by creating this hierarchy in storyboard:
Then just change the image for btn to your custom image (I use burger1.png) like this:
You can customize back button with following code
let buttonView = UIView(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
let buttonImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
buttonImageView.contentMode = .scaleAspectFit
buttonImageView.image = UIImage(named: "back_button")
let btnLogo = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
btnLogo.setTitle("", for: .normal)
btnLogo.backgroundColor = UIColor.clear
btnLogo.layer.masksToBounds = true
btnLogo.addTarget(self, action: #selector(backButton), for: .touchUpInside)
buttonView.addSubview(buttonImageView)
buttonView.addSubview(btnLogo)
let barButton = UIBarButtonItem(customView: buttonView)
self.navigationItem.leftBarButtonItem = barButton
if you are using navigationbar you should use navigationController.popViewController instead of dismiss method
Related
I want to make a tab bar with 5 tab items. I want the middle one ( third ) to be out of tab bar's corner it may be tough to understand therefore I decided to add screenshot
I want to make something like you can see above but I don't know how it's possible.
I would appreciate any way you recommend to do it.
select tabbar Item and set its image insets
Make sure to get proper image (if using an image) goto Assets-> select desired image -> set property to always original
create a class of UITabBarController and assign it to the TabBarController.
initialise Variable
let button = UIButton.init(type: .custom)
Then in viewDidLoad
override func viewDidLoad() {
super.viewDidLoad()
button.setImage(UIImage(named: "IMAGE_NAME_FROM_ASSETS"), for: .normal)
button.backgroundColor = UIStyle.Color.CameraBG
button.layer.cornerRadius = 40
button.addShadow(offset: CGSize(width: 5, height: 5), color: UIStyle.Color.CameraShadow, radius: 5, opacity: 0.1)
button.addTarget(self, action: #selector(pressedAction(_:)), for: .touchUpInside)
self.view.insertSubview(button, aboveSubview: self.tabBar)
}
Add viewDidLayoutSubviews in your class
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// safe place to set the frame of button manually
button.frame = CGRect.init(x: self.tabBar.center.x - 40, y: self.view.bounds.height - 100, width: 80, height: 80)
}
Action You Want To Perform on button click
#objc func pressedAction(_ sender: UIButton) {
// do your stuff here
let nc = UINavigationController(rootViewController: YOURVC.storyboardInstance())
nc.modalPresentationStyle = .fullScreen
present(nc, animated: true, completion: nil)
}
I have two view controllers and i am using push segue to show them. My storyboard looks like this:
But i want to use standalone navigation bar on second view controller. To do this i wrote following code:
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.navigationController?.setNavigationBarHidden(true, animated: true)
self.navigationController?.interactivePopGestureRecognizer?.delegate = nil
placeNavigationBar()
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
var normalButton: UIButton!
var counter = 0
let item = UINavigationItem()
let navigationBar = UINavigationBar()
private func placeNavigationBar() {
let backButtonImage = UIImage(named: "backButton")
normalButton = UIButton(frame: CGRect(x: 0, y: 0, width: backButtonImage!.size.width, height: backButtonImage!.size.height))
normalButton.setImage(backButtonImage, for: .normal)
normalButton.setTitleColor(.systemBlue, for: .normal)
normalButton.contentHorizontalAlignment = .leading
normalButton.contentVerticalAlignment = .center
normalButton.titleEdgeInsets = UIEdgeInsets(top: 0, left: 3.0, bottom: 0.0, right: -3.0)
normalButton.contentEdgeInsets = UIEdgeInsets(top: 0, left: -10, bottom: 0, right: 0)
let backBarButton = UIBarButtonItem(customView: normalButton)
backBarButton.tintColor = .systemBlue
let leftLabel = UILabel()
leftLabel.text = "anony-12345678645"
leftLabel.textColor = .black
let profilePicture = UIImageView(frame: CGRect(x: 0, y: 0, width: 30, height: 30))
profilePicture.translatesAutoresizingMaskIntoConstraints = false
profilePicture.image = #imageLiteral(resourceName: "test2")
profilePicture.contentMode = .scaleAspectFill
profilePicture.clipsToBounds = true
profilePicture.widthAnchor.constraint(equalToConstant: 30).isActive = true
profilePicture.heightAnchor.constraint(equalToConstant: 30).isActive = true
profilePicture.layer.cornerRadius = 15
item.leftBarButtonItems = [backBarButton, UIBarButtonItem(customView: profilePicture) ,UIBarButtonItem(customView: leftLabel)]
navigationBar.isTranslucent = false
navigationBar.barTintColor = .white
self.view.addSubview(navigationBar)
navigationBar.translatesAutoresizingMaskIntoConstraints = false
navigationBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
navigationBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
navigationBar.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
navigationBar.items = [item]
navigationBar.delegate = self
}
It is working well but i am not happy with the navigation bar transition animation. This video shows how it looks now:
https://www.youtube.com/watch?v=1wakUhA940c
What i want:
https://youtu.be/h3-HzKQsxWc
Check the navigation bar transitions on both videos, in second video the navigation bar comes to top of the first view controller's navigation bar. But in the first video the second navigation bar just pushes the first navigation bar to off screen.
How can i achive the same tranisiton in second video?
I did something similar where the initial controller had a custom navigation bar look-alike, and what I did was to call navigationController.setNavigationBarHidden(_, animated: true) on each controller on their viewWillAppear methods, with true on the main controller and false on the rest.
You could do the same, and add a separate UINavigationBar to your view. If you set its constraints properly (basically pin it to the safeArea.top of your controller), it will expand to the safe area.
You will have to populate the navigation bar by accessing it directly instead of your controller's navigationItem, but it's not a big deal and you'll get the transition you want.
If you want this to happen between all the controllers in the stack, just hide the navigation bar on the navigation controller and set a navigation bar on each view yourself.
What you don't prefer is actually the default behavior, animation of iOS. Now, one way to do what you do prefer is making your own navigation bar.
You may hide or show (toggle) the visibility of your navigation bar in your viewWillAppear method by using the following:
/// Shows the navigation bar.
public func showNavBar(animated: Bool) {
self.navigationController?.setNavigationBarHidden(false, animated: animated)
}
/// Hides the navigation bar.
public func hideNavBar(animated: Bool) {
self.navigationController?.setNavigationBarHidden(true, animated: animated)
}
And then start doing the layout of your navigationBar in Storyboard.
Lastly, making use of Simulated Metrics, like selecting NONE to Top Bar will help you visualize what you're doing.
actually I don't know the correct way how to make an image inside the navigation bar like this, either using navigation controller or by using custom view by myself
I need to insert these 2 image as bar button and image title
so I tried to use navigation controller and insert an image in viewDidLoad like the code below:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// insert image title
let aspectRatio : CGFloat = 0.25
let widthOfImageHeader = view.frame.width * 0.5
let heightOfImageHeader = widthOfImageHeader * aspectRatio
let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: widthOfImageHeader, height: heightOfImageHeader))
imageView.contentMode = .scaleAspectFit
let image = UIImage(named: "testImage2")
imageView.image = image
navigationItem.titleView = imageView
// set bar button image
//create a new button
let button = UIButton(type: .custom)
//set image for button
button.setImage(UIImage(named: "hamburgerIcon"), for: .normal)
//set frame
button.frame = CGRect(x: 0, y: 0, width: 53, height: 51)
let barButton = UIBarButtonItem(customView: button)
//assign button to navigationbar
self.navigationItem.leftBarButtonItem = barButton
}
}
but the result is like the image below:
the position of image title is not exactly in the center for iPhone 5s and bar button seems a little bit off in the right.
and if I assign the image right bar button, using
/
/create a left button
let button = UIButton(type: .custom)
//set image for button
button.setImage(UIImage(named: "hamburgerIcon"), for: .normal)
//set frame
button.frame = CGRect(x: 0, y: 0, width: 53, height: 51)
let barButton = UIBarButtonItem(customView: button)
//assign button to navigationbar
self.navigationItem.leftBarButtonItem = barButton
//create a right button
let button2 = UIButton(type: .custom)
//set image for button
button2.setImage(UIImage(named: "backButton"), for: .normal)
//set frame
button2.frame = CGRect(x: 0, y: 0, width: 53, height: 51)
let barRightButton = UIBarButtonItem(customView: button)
//assign button to navigationbar
self.navigationItem.rightBarButtonItem = barRightButton
the result is even weirder
one of the button dissapears, the hamburger icon that should be on the left, now in the right
it will be far easier if I use custom view, but...is it weird if I use custom view that use like navigation bar? I am new in iOS Developer. Thanks in advance
Okay so here's what I usually do in a project with such kind of requirements (image at the navBar's title, and custom bar button items).
To answer first your question, you can actually do whatever you want.
Have indeed a custom view while having your viewController embedded inside a UINavigationController. But be sure to hide the navBar.
Have a visible navBar and viewContorller embedded in UINavigationController.
The ideal way for me is the latter.
The sample project below was made using my own old framework: https://github.com/glennposadas/gpkit-ios
You can copy any pieces of codes from that framework, modify/rename everything on it, and put in your production project.
If you want the result below, here's how I do it:
import GPKit
import UIKit
class ViewController: UIViewController {
// MARK: - Properties
internal lazy var button_Close: UIButton = {
let button = UIButton(type: .custom)
button.setImage(UIImage(named: "ham"), for: .normal)
button.imageEdgeInsets = UIEdgeInsets.init(top: 0, left: -30, bottom: 0, right: 0)
//button.addTarget(self, action: #selector(hamburger(_:)), for: .touchUpInside)
return button
}()
// MARK: - Functions
// MARK: Overrides
override func viewDidLoad() {
super.viewDidLoad()
GPLog(classSender: self, log: "viewDidLoad!")
// Title View Test: -
let navBarImage = UIImage(named: "ic_logo_navbar")!
self.setNavBarTitleWithFeedback(image: navBarImage, navBarTintColor: .white)
self.makeNavBarColor(color: UIColor.colorWithRGBHex(0x332F39), itemsTintColor: .white)
// Barbutton
let barButton = UIBarButtonItem(customView: self.button_Close)
self.button_Close.frame = CGRect(x: 0, y: 0, width: 55.0, height: 44.0)
let negativeSpacer = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.fixedSpace, target: nil, action: nil)
if #available(iOS 11.0, *) {
negativeSpacer.width = -30
}
self.navigationItem.leftBarButtonItems = [negativeSpacer, barButton]
}
}
extension ViewController: GPTitleViewDelegate {
func gpTitleView(userDidTapTitleView gpTitleView: GPTitleView) {
GPLog(classSender: self, log: "userDidTapTitleView🌈")
}
func gpTitleView(userDidFinishLongPress gpTitleView: GPTitleView) {
GPLog(classSender: self, log: "userDidFinishLongPress🌺")
}
}
Result:
I don't have your hex color, so it looks ugly.
I hope thish elps.
I created a navigation bar which I'm trying to call in another view controller. I set it up by calling the methods which I separated into left, center and right buttons. In my other controller I call the navbarcontroller and try and call the method for which i setup the navigation toolbar. Nothing happens, however there is no crash.
import UIKit
class NavBarController : UIViewController{
var screenSize: CGRect!
override func viewDidLoad() {
super.viewDidLoad()
setupNavigationBarItems()
setupToolBarItems()
self.navigationController?.isToolbarHidden = false
self.view!.backgroundColor = .white
}
and my method for the navigation bar is this
func setupNavigationBarItems() {
setupCenterNavButton()
setupLeftNavButton()
setupRightNavButton()
}
func showCalendarController() {
let navController = CalendarController()
self.present(navController, animated: true, completion: nil)
} //connect bottom bar buttons to controller
func showEventsController() {
let navController = EventsController()
self.present(navController, animated: true, completion: nil)
} //connect bottom bar buttons to controller
func setupNavigationBarItems() {
setupCenterNavButton()
setupLeftNavButton()
setupRightNavButton()
} // top bar button setup
private func setupCenterNavButton() {
let buttonFrame = UIView(frame: CGRect(x: 0, y: 0, width: 165,
height: 20))
mainFeedButton.frame = CGRect(x: 0,y: 0, width: 80,height: 20) as
CGRect
mainFeedButton.backgroundColor = UIColor.blue
peekFeedButton.frame = CGRect(x: 85,y: 0, width: 80,height: 20) as
CGRect
peekFeedButton.backgroundColor = UIColor.blue
buttonFrame.addSubview(mainFeedButton)
buttonFrame.addSubview(peekFeedButton)
navigationItem.titleView = buttonFrame
} //center bar buttons / action setup
private func setupLeftNavButton() {
navigationItem.leftBarButtonItem = UIBarButtonItem(customView:
favoriteButton)
}// left bar buttons / action setup
private func setupRightNavButton() {
navigationItem.rightBarButtonItem = UIBarButtonItem(customView:
moreButton)
} //right bar buttons / action setup
lazy var mainFeedButton: UIButton! = {
let button = UIButton(type: .custom) // button type
button.setTitle("Main",for: .normal) //button title
button.sizeToFit() // size button to fit the title
var frame = button.frame //create frame to manipulate the body
button.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
button.addTarget(self, action:
#selector(self.showMainFeedController),
for: .touchUpInside)
return button
}() //mainFeed button connected to Feed Controller
lazy var peekFeedButton: UIButton! = {
let button = UIButton(type: .custom) //button type
button.setTitle("Spy",for: .normal) //button title
button.sizeToFit() // size button to fit the title
var frame = button.frame //create frame to manipulate the body
button.frame = CGRect(x: 20, y: 0, width: 100, height: 40)
button.addTarget(self, action:
#selector(self.showSpyFeedController),
for: .touchUpInside)
return button
}()//peekFeed button frame and action setup
lazy var favoriteButton: UIButton! = {
let button = UIButton(type: .system) //default button with blue
text
button.setImage(#imageLiteral(resourceName:
"star").withRenderingMode(.alwaysOriginal), for: .normal)
button.contentMode = .scaleAspectFit
button.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
button.addTarget(self, action: #selector(favoriteButton_tapped),
for: .touchUpInside)
return button
}() //favorites button frame and action setup
lazy var moreButton: UIButton! = {
let button = UIButton(type: .system) //default button with blue
text
button.setImage(#imageLiteral(resourceName:
"more").withRenderingMode(.alwaysOriginal), for: .normal)
button.contentMode = .scaleAspectFit
button.frame = CGRect(x: 0, y: 0, width: 24, height: 24)
button.addTarget(self, action: #selector(moreButton_tapped),
for: .touchUpInside)
return button
}() //more button frame and action setup
func showMainFeedController() {
let navController = MainFeedController()
self.present(navController, animated: true, completion: nil)
} //mainFeed button connected to Feed Controller
func showSpyFeedController() {
let navController = SpyFeedController()
self.present(navController, animated: true, completion: nil)
}//peekFeed button connected to SpyFeedController
func favoriteButton_tapped(sender: UIButton) {
print("You touched this!")
}
func moreButton_tapped(sender: UIButton) {
print("You touched this!")
}
}
I then try and call the function by setupNavigationBarItems() like this
import UIKit
class EventsController: UIViewController{
override func viewDidLoad() {
super.viewDidLoad()
let navbar = NavBarController()
navbar.setupNavigationBarItems()
self.navigationController?.isToolbarHidden = false
self.view.backgroundColor = .white
}
}
I'm not sure if this a valid way. I'm still kinda new to all of this.
It's not clear what you expect to happen, but here's what does happen:
let navbar = NavBarController()
A completely new NavBarController object is created.
navbar.setupNavigationBarItems()
That NavBarController object's setupNavigationBarItems is called.
self.navigationController?.isToolbarHidden = false
self.view.backgroundColor = .white
Your code comes to an end. navbar was a local variable, so the NavBarController object vanishes in a puff of smoke. The end. This object was created and configured to no purpose.
I remember my first month in iOS way back 2015 :D, didn't have any knowledge in OOP, I didn't know too how to pass a data to another screen or class.
Anyways, you DO NOT create a new instance of your NavBarController class in your EventsController. If you want to talk to your NavBarController from your EventsController, then you will need a reference that is currently alive. You can also use delegate (search for that later).
So before you show or present your EventsController from your NavBarController, pass your current NavBarController instance to the next screen which is EventsController. BUT FIRST, you need to declare a variable in your EventsController, correct? :)
Declare a variable with a type of NavBarController inside your EventsController class, like so:
var navBarController: NavBarController!
Then in this piece of code of yours, pass your self (the NavBarController instance) to the EventsController class before showing or presenting, take note that you mistakenly gave a wrong name to your EventsController new instance, so I renamed it:
func showEventsController() {
let eventsController = EventsController()
eventsController.navBarController = self // THIS :)
self.present(eventsController, animated: true, completion: nil)
}
Lastly, instead of this:
let navbar = NavBarController()
navbar.setupNavigationBarItems()
Make use of your declared variable, like so:
self.navBarController.navbar.setupNavigationBarItems()
Hope this helps! :)
I have a navigation controller with a home view controller on its root. Then I push a tab bar view controller. The back button disappears. How can I return from the tab bar view controller to the home view controller via back button? How can I make it visible again?
I have tried:
let navItem = self.navigationController?.navigationItem
let navItem2 = self.navigationItem;
leftBarButton = UIBarButtonItem()
leftBarButton.image = UIImage(named: "arrows-back-icon-24.png")
leftBarButton.action = #selector(self.popViewController);
leftBarButton.target = self
navItem?.leftBarButtonItem = leftBarButton
navItem2.leftBarButtonItem = leftBarButton;
I also have tried:
let navItem = self.navigationController?.navigationItem
let navItem2 = self.navigationItem;
navItem?.leftBarButtonItem = nil;
navItem2.leftBarButtonItem = nil;
All is not working. Please help. Thanks.
Try this: Assign UITabBarController class file to Tab Bar Controller, just like view controller.
import UIKit
//this is TabBarController.swift file
class TabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
}
}
And push it from the HomeVC like this (here, I am using UIButton for Push):
#IBAction func btnPush(_ sender: UIButton) {
let vc = self.storyboard?.instantiateViewController(withIdentifier: "TabBarController") as! TabBarController
self.navigationController?.pushViewController(vc, animated: true)
}
I had the same issue, but in my case, it was due to the viewWillAppear method. Try adding the following to each of the UIViewControllers embedded in the corresponding UITabBarController:
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(true)
self.navigationController?.setNavigationBarHidden(false, animated: true)
}
Hope this works for you.
let btn1 = UIButton(type: .custom)
btn1.setImage(UIImage(named: "image"), for: .normal)
btn1.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
btn1.addTarget(self, action: #selector(methodname), for: .touchUpInside)
let item1 = UIBarButtonItem(customView: btn1)
let btn2 = UIButton(type: .custom)
btn2.setImage(UIImage(named: "image"), for: .normal)
btn2.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
btn2.addTarget(self, action: #selector(methodName), for: .touchUpInside)
let item2 = UIBarButtonItem(customView: btn2)
self.navigationItem.setLeftBarButtonItems([item1,item2], animated: true)
Try this