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

Question

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

这是它以前的样子：我希望它看起来如何

这是在导航 controller 中嵌入视图后的样子：当前

这是我在导航栏中嵌入按钮的方式： 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

还要检查这篇文章，因为您可能有宽度问题在 UINavigationBar 中更改 UIBarButtonItem 的宽度

//注释这段代码

profileButton.clipsToBounds = true

我希望它会有所帮助，因为有一次我遇到了同样的问题。

你也可以使用init(customView: UIView)检查它希望它有帮助

Answer 2

这是我的临时解决方案：首先，将 Photoshop 中的默认个人资料图像缩放为 90 x 90 像素或使用此网站：调整图像大小。 删除任何以前的按钮并将新按钮从 storyboard 拖到导航栏中。 将按钮名称设置为“”，并将图像设置为您调整大小的图像的任何资产。 在 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
} }