Create label associated with buttons on clicks programmatically

Question

Suppose I have a textfield and button. There is an IBaction associate with the button and the textfield.

When the button is clicked, it will create a label with the text typed in the text field. And at the same time create buttons next to the label field. (like play or pause buttons)

It's easy to add a static element, just drag and drop. But I don't know how to add those UI elements programmatically with layout and constraints.

Please tell me more about it or provide some links to me.

score 1 · Accepted Answer · answered Jul 12 '17 at 04:43

There should be various ways to achieve your goal. The following is an example of how you add sub views containing a label and button and constraints to the sub view. The default textField and button are added in the storyboard.

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)        
    }
}

score 0 · Answer 2 · answered Jul 12 '17 at 03:14

Your questions is about how to programmatically create button and textfield, and then set constraint. First, initiate the UI element, set it up and add it to your view controller. Then assign constraint to it. My favorite constraint sets are padding top, padding left, view height and view width.

Use a UIButton for example

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

Create label associated with buttons on clicks programmatically

2 Answers2