如何在導航欄中的按鈕上設置約束？ 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
} }