以编程方式创建与点击按钮关联的标签

Question

假设我有一个文本框和按钮。有一个与按钮和文本字段关联的 IBaction。

单击该按钮后，将创建一个标签，其中包含在文本字段中键入的文本。同时在标签字段旁边创建按钮。（如播放或暂停按钮）

添加静态元素很容易，只需拖放即可。但我不知道如何使用布局和约束以编程方式添加那些 UI 元素。

请告诉我更多相关信息或提供一些链接给我。

Answer 1

您的问题是关于如何以编程方式创建按钮和文本字段，然后设置约束。首先，启动 UI 元素，设置它并将其添加到您的视图控制器。然后为其分配约束。我最喜欢的约束集是顶部填充、左侧填充、视图高度和视图宽度。

例如使用UI按钮

let button = UIButton()
//Set up button, like title, color, etc

self.view.addSubView(button)//Add the button to the current view

//Set up constraints
let margins = view.layoutMarginsGuide
button.trailingAnchor.constraint(equalTo: margins.trailingAnchor, constant: 0).isActive = true
button.topAnchor.constraint(equalTo: margins.topAnchor, constant: 70).isActive = true
button.widthAnchor.constraint(equalToConstant: 100).isActive = true
button.heightAnchor.constraint(equalToConstant: 30).isActive = true

Answer 2

应该有多种方法可以实现您的目标。以下示例说明如何向子视图添加包含标签和按钮以及约束的子视图。默认的 textField 和 button 添加到故事板中。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var button: UIButton!

    var lastY: CGFloat = 100

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func buttonClicked(_ sender: UIButton) {
        let contentView = UIView()
        addViewsTo(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(contentView)

        // Add size constraints to the content view (260, 30)
        NSLayoutConstraint(item: contentView, attribute: .width, relatedBy: .equal,
                           toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 260.0).isActive = true
        NSLayoutConstraint(item: contentView, attribute: .height, relatedBy: .equal,
                           toItem: nil, attribute: .notAnAttribute, multiplier: 1.0, constant: 30.0).isActive = true
        // Add position constraints to the content view (horizontal center, 100 from the top)
        NSLayoutConstraint(item: contentView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: lastY).isActive = true
        NSLayoutConstraint(item: contentView, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1.0, constant: 0.0).isActive = true

        // Update last Y position to have the gaps between views to be 10
        lastY += 40
    }

    // Add label and button to the content view
    func addViewsTo(_ contentView: UIView) {
        // Add a label with size of (100, 30)
        let label = UILabel()
        label.text = textField.text
        label.frame = CGRect(x: 0.0, y: 0.0, width: 100.0, height: 30.0)
        contentView.addSubview(label)

        // Add a button with size of (150, 30)
        let button = UIButton()
        button.setTitle("Button of \(textField.text ?? "")", for: .normal)
        button.setTitleColor(.blue, for: .normal)
        button.layer.borderWidth = 1
        button.layer.borderColor = UIColor.black.cgColor
        button.frame = CGRect(x: 110.0, y: 0.0, width: 150.0, height: 30.0)
        contentView.addSubview(button)        
    }
}

以编程方式创建与点击按钮关联的标签

Create label associated with buttons on clicks programmatically

uiview

ios

uielement

swift