如何在导航栏中的按钮上设置约束？ iOS 13 Swift 5（将圆形轮廓图像按钮添加到导航控制器）

Question

I'm trying to implement a profile image button in the top left of my application. I'm having trouble getting it to look correct. It seems that no matter what constraints I put on the button it always comes out much larger and more lopsided than what I want. Before implementing the actual navigation controller, I just used a navigation bar object and placed the button on top of it. However I can't do that with an actual navigation controller bar.

Here is what it looked like before: How I want it to Look

Here is what it looks like after embedding the view in a navigation controller: Current

Here is how I have the button embedded in the Navigation Bar: Storyboard

And finally here is my code:

class HomeViewController: UIViewController {
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    profileButton.layer.borderWidth = 1
    profileButton.layer.masksToBounds = false
    profileButton.layer.borderColor = Global.redColor.cgColor
    profileButton.layer.cornerRadius = (profileButton.frame.height/2)
    profileButton.clipsToBounds = true
    profileButton.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    setUpGestures()
}

func setUpGestures() {
    let profileEdge = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(profileEdgeSwiped))
    profileEdge.edges = .left
    view.addGestureRecognizer(profileEdge)

    let settingsEdge = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(settingsEdgeSwiped))
    settingsEdge.edges = .right
    view.addGestureRecognizer(settingsEdge)
}

@objc func profileEdgeSwiped(_ recognizer: UIScreenEdgePanGestureRecognizer) {
    if recognizer.state == .recognized {
        accountAction()
    }
}

@objc func settingsEdgeSwiped(_ recognizer: UIScreenEdgePanGestureRecognizer) {
    if recognizer.state == .recognized {
        // Open settings menu (implement later)
    }
}

@objc func profileAction() {
    NotificationCenter.default.post(name: NSNotification.Name("ToggleSideMenu"), object: nil)
}

@IBOutlet weak var profileButton: UIButton!

@IBAction func profileAction(_ sender: Any) {
    //NotificationCenter.default.post(name: NSNotification.Name("ToggleSideMenu"), object: nil)
        accountAction()
}

func accountAction() {
    let alert = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
    alert.view.tintColor = Global.redColor
    alert.addAction(UIAlertAction(title: "Log Out", style: .default, handler: { _ in
        self.dismiss(animated: true, completion: nil)
    }))
    alert.addAction(UIAlertAction(title: "Add Account", style: .default, handler: { _ in
        // Add additional account (implement later)
    }))
    alert.addAction(UIAlertAction.init(title: "Cancel", style: .cancel, handler: nil))
    self.present(alert, animated: true, completion: nil)
}    }

Answer 1

Can you check one time commenting as of now i am not having a mac right now

also check this post as you may have width issue Change width of a UIBarButtonItem in a UINavigationBar

//comment this code

profileButton.clipsToBounds = true

i hope it helps as one time am having same issue.

also can you check it with using init(customView: UIView) hope it helps

Answer 2

Here is my temporary solution: First, scale the default profile image in photoshop to 90 x 90 px or use this website: Resize Image . Delete any previous buttons and drag a new button into the navigation bar from the storyboard. Set the button name to "" and the image to whichever asset is your resized image. In viewDidLoad() set the boarder radius to 15. What I do when I need to change the image is call this extension and resize the width to 30. The reason it's temporary is because if you change anything in the story board, the image stops rendering properly and you have to repeat the steps above to get it working again.

extension UIImage {
func resizeImage (newWidth: CGFloat) -> UIImage {
    let scale = newWidth / self.size.width
    let newHeight = self.size.height * scale
    let newSize = CGSize(width: newWidth, height: newHeight)

    let renderer = UIGraphicsImageRenderer(size: newSize)

    let image = renderer.image { (context) in
        self.draw(in: CGRect(origin: CGPoint(x: 0, y: 0), size: newSize))
    }
    return image
} }