我需要幫助來設計一個連接到 imageView 的按鈕

Question

我正在嘗試構建一個 imageview，它帶有一個附加到自身的設置頁面按鈕。 我想告訴用戶，如果他們想更改圖像，請點擊圖像。 所以我想做的是類似於：這個

我正在使用 storyboard 設計我的應用程序，但我找不到實現它的方法。

所以我嘗試以編程方式設置約束。

例如，

`

editButton.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            editButton.trailingAnchor.constraint(equalTo: imageView.trailingAnchor, constant: -66),
            editButton.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: -60)
   ])

`

此約束適用於 iPad 屏幕，但不適用於任何 iPhone。 必須有另一種方法來設計這樣的東西。 我該怎么做？

Answer 1

所有這些都可以通過故事板或在代碼中使用約束來完成。 iPhone 或 iPad 應相同。例如：

//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

class MyViewController : UIViewController {
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white

        let myImageView = UIImageView()
        
        let myImageViewCornerRadius: CGFloat = 40.0
        
        // Just using a color for the example...
        myImageView.backgroundColor = .blue
        myImageView.layer.cornerRadius = myImageViewCornerRadius
        myImageView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(myImageView)
        
        let myEditButton = UIButton()
        // Again using a color...
        myEditButton.backgroundColor = .red
        myEditButton.translatesAutoresizingMaskIntoConstraints = false
        myEditButton.layer.cornerRadius = 10.0
        view.addSubview(myEditButton)
        
        NSLayoutConstraint.activate([
            myImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            myImageView.widthAnchor.constraint(equalToConstant: 80.0),
            myImageView.heightAnchor.constraint(equalToConstant: 80.0),
            myEditButton.centerYAnchor.constraint(equalTo: myImageView.bottomAnchor,
                                                  constant: -myImageViewCornerRadius / 4.0),
            myEditButton.centerXAnchor.constraint(equalTo: myImageView.trailingAnchor,
                                                 constant: -myImageViewCornerRadius / 4.0),
            myEditButton.widthAnchor.constraint(equalToConstant: 20.0),
            myEditButton.heightAnchor.constraint(equalToConstant: 20.0)
        ])
 
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Answer 2

我會讓按鈕框架的原點參考個人資料照片的框架。 因此，無論照片大小如何，按鈕都呈現在相對於照片的相同位置。 也許是這樣的：

editButton.frame = CGRect(x: profileImageView.width - 60, y: profileImageView.height - 66, width: 50, height: 50)

您還可以考慮向照片添加 tapGestureRecognizer 以觸發編輯選項。