ReeRay ReeRay - 2 months ago 19
Swift Question

How do you display text from a user input? Swift 3.0

I am new to the language of swift (3.0). I am working on a new application for iOS. How can I create a textbox where a user types in input, presses a button, then displays the text under the button? Thanks!

Answer

You can do this either using storyboards or programmatically. Both options works as of Xcode 8 Swift 3

Storyboards

  1. Drag in a UITextField, a UIButton and UILabel from the library, onto you view controller
  2. Create an IBOutlet for the UITextField and the UILabel to your ViewController.swift file.
  3. Then create an IBAction for the UIButton to the same ViewController.swift file.
  4. Write this code in the action function for your button:

    myLabel.text = myTextField.text

Your whole code should look like this:

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var myTextField: UITextField!

@IBOutlet weak var myLabel: UILabel!

@IBAction func myButtonPressed(_ sender: AnyObject) {

    myLabel.text = myTextField.text

}

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view, typically from a nib.

}
}

Or Programmatically:

import UIKit

class ViewController: UIViewController {

// First create your components

let myTextField: UITextField = {
    let textField = UITextField()
    textField.backgroundColor = .lightGray //Just so you can see it
    textField.translatesAutoresizingMaskIntoConstraints = false
    return textField
}()

let myLabel: UILabel = {
    let label = UILabel()
    label.text = "Label text" //You may want to set this to something else to start with
    label.textAlignment = .center
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let myButton: UIButton = {
    let button = UIButton()
    button.setTitle("Press me", for: .normal)
    button.setTitleColor(UIColor.blue, for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false
    return button
}()

//Then add them as subViews in the viewDidLoad method and set some constraints. 

override func viewDidLoad() {
    super.viewDidLoad()

    view.addSubview(myTextField)
    myTextField.widthAnchor.constraint(equalToConstant: 250).isActive = true
    myTextField.heightAnchor.constraint(equalToConstant: 50).isActive = true
    NSLayoutConstraint(item: myTextField, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
    NSLayoutConstraint(item: myTextField, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: -100).isActive = true

    view.addSubview(myLabel)
    myLabel.widthAnchor.constraint(equalToConstant: 250).isActive = true
    myLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
    NSLayoutConstraint(item: myLabel, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
    NSLayoutConstraint(item: myLabel, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0).isActive = true


    view.addSubview(myButton)
    myButton.widthAnchor.constraint(equalToConstant: 250).isActive = true
    myButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
    NSLayoutConstraint(item: myButton, attribute: .centerX, relatedBy: .equal, toItem: view, attribute: .centerX, multiplier: 1, constant: 0).isActive = true
    NSLayoutConstraint(item: myButton, attribute: .top, relatedBy: .equal, toItem: myTextField, attribute: .bottom, multiplier: 1, constant: 10).isActive = true

//This sets the function for when the button is pressed 
    myButton.addTarget(self, action: #selector(ViewController.myButtonPressed), for: .touchUpInside)
}

//Add code here to when the button is pressed
func myButtonPressed() {

    myLabel.text = myTextField.text

}

}