如何以编程方式将 UIImageView 添加到 UIStackView（故事板）

Posted 2023-02-27

【中文标题】如何以编程方式将 UIImageView 添加到 UIStackView（故事板）

【英文标题】：How to add an UIImageView programmatically into a UIStackView (Storyboard)

【发布时间】：2018-01-14 18:30:28

【问题描述】：

我主要在 Storyboard 中设计布局。但是现在我想删除/隐藏一个 UIButton （故事板），然后以编程方式添加一个 UIImageView 。

我已设法以编程方式隐藏 UIButton，但难以在 UIStackView 中正确显示 UIImageView。

UIStackView 已经包含在 Storyboard 中设计的 UIView。我需要以编程方式将 UIImageView 添加到此水平 UIStackView 中的 UIView 的右侧。

有什么建议吗？

import UIKit
import Firebase
import Photos
import Kingfisher

class editProfileVC: UIViewController 

    var userArray = [User]()

    // StackView outlets needed to set background color
    @IBOutlet weak var backgroundStackView: UIStackView!

    // Normal outlets
    @IBOutlet weak var firstName: UITextField! // required
    @IBOutlet weak var lastName: UITextField! // required - type of hunt
    @IBOutlet weak var email: UITextField! // required - weapon name
    @IBOutlet weak var city: UITextField! // optional (eg. 1)
    @IBOutlet weak var country: UITextField! // optional (eg. 2)
    @IBOutlet weak var primaryHunt: UITextField! // optional short description of the hunt

    @IBOutlet weak var saveBtn: UIButton!
    @IBOutlet weak var cancelBtn: UIButton!

    @IBOutlet weak var addImageBtn: UIButton!
    @IBOutlet weak var addImageStackView: UIStackView!

    override func viewDidLoad() 
        super.viewDidLoad()

        if Auth.auth().currentUser == nil 
            let authVC = self.storyboard?.instantiateViewController(withIdentifier: "authVC") as? authVC
            self.present(authVC!, animated: true, completion: nil)
        

        pinBackground(backgroundView, to: backgroundStackView)

        // Get userdata from Firebase
        let userId = (Auth.auth().currentUser?.uid)!

        DataService.instance.getUserdata(userId: userId)  (returnedUserArray) in

            if returnedUserArray.isEmpty == false 

                // if user exist populate textfields with information from database
                self.firstName.text = returnedUserArray[0].firstName
                self.lastName.text = returnedUserArray[0].lastName
                self.city.text = returnedUserArray[0].city
                self.country.text = returnedUserArray[0].country
                self.primaryHunt.text = returnedUserArray[0].defaultHunt

                if returnedUserArray[0].profileImageURL.isEmpty == false 
                    // hide addImageBtn
                    self.addImageBtn.isHidden = true

                    // show profile image
                    let imageView = UIImageView()
                    imageView.kf.setImage(with: URL.init(string:returnedUserArray[0].profileImageURL))
                    self.addImageStackView.addSubview(imageView)

                    imageView.translatesAutoresizingMaskIntoConstraints = false
                    imageView.heightAnchor.constraint(equalToConstant: 50).isActive = true
                    imageView.widthAnchor.constraint(equalToConstant: 50).isActive = true
                
            
        
    

UIStackView 是绿色条下方的顶部。灰色配置文件图标中的 addImageBtn 带有“添加配置文件图像”文本。

【问题讨论】：

你能展示一下 UI 在模拟器上的样子吗？

@Spark - 我现在添加了 UI 的照片

【参考方案1】：

要将任何视图添加到 UIStackView，请执行以下操作：

stackView.addArrangedSubview(view)

如果您想在某个位置添加视图，请执行以下操作：

stackView.insertArrangedSubview(view, at: 1) // Be careful you get the index correct.

然后你需要删除你这样做的视图：

stackView.removeArrangedSubview(view)
view.removeFromSuperview() // This is needed because the view still remains a sub view of the UIStackView.

它的外观取决于您如何设置堆栈视图。