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

Question

我正在尝试在我的应用程序的左上角实现一个个人资料图片按钮。我很难让它看起来正确。似乎无论我对按钮施加什么限制，它总是比我想要的更大、更不平衡。在实现实际的导航控制器之前，我只是使用了一个导航栏对象并将按钮放在它上面。但是我不能用实际的导航控制器栏来做到这一点。

这是之前的样子： How I want it to Look

这是将视图嵌入导航控制器后的样子：Current

这是我将按钮嵌入导航栏的方式：Storyboard

最后是我的代码：

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

你能检查一次评论吗我现在没有mac

还要检查这个 post 因为你可能有宽度问题 Change width of a UIBarButtonItem in a UINavigationBar

//注释这段代码

profileButton.clipsToBounds = 真

我有一次遇到同样的问题，希望对您有所帮助。

你也可以用 初始化（自定义视图：UIView） 希望对你有帮助

Answer 2

这是我的临时解决方案：首先，将 photoshop 中的默认个人资料图像缩放为 90 x 90 像素或使用此网站：Resize Image。删除任何以前的按钮并将一个新按钮从故事板拖到导航栏中。将按钮名称设置为“”，将图像设置为您调整大小后的图像资源。在 viewDidLoad() 中，将边框半径设置为 15。当我需要更改图像时，我所做的是调用此扩展并将宽度调整为 30。它是临时的，因为如果您更改故事板中的任何内容，图像就会停止正确渲染，您必须重复上述步骤才能使其再次工作。

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
} }

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

How to set constraints on a button in a navigation bar? iOS 13 Swift 5 (Add circular profile image button to navigation controller)

uibarbuttonitem

navigationbar

ios

swift