Vistas y Controles en UIKit

Vistas y Controles en UIKit

Hoy vamos a ver 9 componentes que usamos de forma nativa en nuestra aplicaciones iOS. Las vistas y controles de este post está creadas por código: UIButton, UILabel, UIImageView, UITextView, etc

SwiftBeta

En el post de hoy vamos a ver los componentes más usados en UIKit. Por si no lo sabes, UIKit es un framework de Apple para construir y manejar interfaces de usuario para aplicaciones iOS o tvOS.

Todos los componentes que verás a continuación tienen su ejemplo en código para que entiendas como funcionan a bajo nivel. Puedes ver todo el código y ejecutar los playgrounds en nuestro repositorio de Github.

Las vistas y controles que vamos a ver son:

UILabel UIButton UIImageView
UITextView UISwitch UISlider
UIStepper UISegmentedControl UIDatePicker

UILabel en Swift

Vista que muestra una o más líneas con texto.

final class MyViewController: UIViewController {
    private var myLabel: UILabel = {
        let label = UILabel()
        label.frame = CGRect(x: 85, y: 200, width: 200, height: 40)
        label.text = "UILabel in Swift"
        return label
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(myLabel)
        self.view = view
        
        updateLabelProperties()
    }
    
    func updateLabelProperties() {
        myLabel.numberOfLines = 4
        myLabel.backgroundColor = .blue
        myLabel.font = .systemFont(ofSize: 20)
        myLabel.textAlignment = .center
        myLabel.textColor = .white
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

UILabel es uno de los componentes más usados en las aplicaciones. Su misión es informar al usuario mediante un texto. En el método updateLabelProperties() hemos modificado algunas de sus propiedades:

text Texto que queremos mostrar en nuestro UILabel.
numberOfLines Podemos indicar el número máximo de líneas de nuestro UILabel (por defecto es 1). Si queremos que sea infinito solo debemos asignar 0.
backgroundColor Podemos cambiar el color del background de nuestro UILabel.
font Esta propiedad es para cambiar la fuente, podemos usar la del sistema o fuentes propias.
textAlignment Podemos alinear el texto a la izquierda, derecha, centrado, justificado o natural (.left, .right, .center, .justified o .natural).
textColor Podemos cambiar el color del texto.

UIButton en Swift

Cuando usamos un UIButton es para que el usuario haga alguna interacción con él y por lo tanto se realice alguna acción.

final class MyViewController : UIViewController {
    private var myButton: UIButton = {
        let button = UIButton(type: .system)
        button.frame = CGRect(x: 85, y: 200, width: 200, height: 40)
        button.setTitle("Tap me!", for: .normal)
        button.addTarget(self, action: #selector(didTapOnButton), for: .touchUpInside)
        return button
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(myButton)
        self.view = view
        
        updateButtonProperties()
    }
    
    @objc private func didTapOnButton() {
        print("Did tap on button")
    }
    
    func updateButtonProperties() {
        myButton.setTitleColor(.white, for: .normal)
        myButton.backgroundColor = .blue
        myButton.titleLabel?.font = .systemFont(ofSize: 20)
        myButton.layer.cornerRadius = 20
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Fíjate que al crear el UIButton podemos escoger entre distintos tipos, en nuestro caso hemos escogido .system.

Puedes cambiar por uno de los siguientes tipos para ver cómo cambia el diseño del botón:

UIButton.ButtonType
custom system detailDisclosure
infoLight infoDark contactAdd
plain close

Propiedades y métodos que debes tener en cuenta al crear un UIButton:

setTitle Al usar setTitle especificamos un título al UIButton en un estado en concreto. Podemos encontrar distintos estados: normal, hightlighted, disable, selected, etc
addTarget Con este método indicamos que método queremos que se ejecute al pulsar el botón. Hay distintos tipos de triggers, en nuestro caso hemos especificado que se llame al método cuando se pulse en el botón: .touchUpInside
setTitleColor Otro método para cambiar el color del texto del botón, aquí también podemos especificar qué color queremos para los distintos estados: normal, hightlighted, disable, selected, etc
backgroundColor También podemos cambiar el color del background de nuestro botón
titleLabel?.font Esta propiedad es para cambiar la fuente, podemos usar la del sistema o fuentes propias.
layer.cornerRadius Al modificar el cornerRadius de la propiedad layer, obtenemos el efecto de esquinas redondeadas.

UIImageView en Swift

Un objeto que muestra una única imagen. En este caso hemos añadido una imagen del sistema que representa un calendario.

final class MyViewController: UIViewController {
    private var myImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.frame = CGRect(x: 85, y: 200, width: 200, height: 40)
        return imageView
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(myImageView)
        self.view = view
        
        updateImageViewProperties()
    }
    
    func updateImageViewProperties() {
        let image = UIImage(systemName: "calendar")
        myImageView.image = image
        myImageView.contentMode = .scaleAspectFit
        myImageView.backgroundColor = .red
        myImageView.tintColor = .white
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedades y métodos que debes tener en cuenta al crear un UIImageView:

image Imagen que se dibujará dentro del UIImageView
contentMode Depende como queramos mostrar la imagen en nuestro UIImageView, podemos usar distintas opciones: scaleToFill, scaleAspectFit, scaleAspectFill, redraw, center, top, bottom, left, right, topLeft, topRight, bottomLeft y bottomRight.

Prueba a cambiar el contentMode y observa como se ajusta la imagen al tamaño de UIImageView.
backgroundColor También podemos cambiar el color del background de nuestro UIImageView
tintColor Para cambiar el color de la imagen, en este caso cambia a blanco.

UITextView en Swift

Es como un UILabel pero puedes editar texto y tiene scroll.

final class MyViewController : UIViewController {
    var myTextView: UITextView = {
        let textView = UITextView()
        textView.frame = CGRect(x: 85, y: 200, width: 200, height: 100)
        textView.text = "My TextView with some lines of text... you can add some lines and start scrolling."
        return textView
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(myTextView)
        self.view = view
        
        updateTextViewProperties()
    }
    
    func updateTextViewProperties() {
        myTextView.textColor = .white
        myTextView.backgroundColor = .blue
        myTextView.textAlignment = .left
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedas a tener en cuenta:

text Texto que quieres añadir a tu UITextView
textColor Color del texto
backgroundColor También podemos cambiar el color del background de nuestro UITextView
textAlignment Podemos alinear el texto a la izquierda, derecha, centrado, justificado o natural (.left, .right, .center, .justified o .natural).

UISwitch en Swift

Control que nos ofrece una opción binaria, encendido o apagado.

final class MyViewController : UIViewController {
    private var mySwitch: UISwitch = {
        let uiSwitch = UISwitch()
        uiSwitch.frame = CGRect(x: 85, y: 200, width: 200, height: 40)
        uiSwitch.addTarget(self, action: #selector(didTapOnSwitch), for: .valueChanged)
        return uiSwitch
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(mySwitch)
        self.view = view        
    }
    
    @objc private func didTapOnSwitch() {
        if mySwitch.isOn {
            print("Switch: On")
        } else {
            print("Switch: Off")
        }
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedades y métodos a tener en cuenta:

addTarget Con este método indicamos que método queremos que se ejecute al cambiar de valor en el UISwitch. Hay distintos tipos de triggers, en nuestro caso hemos especificado que se llame al método cuando se cambie el valor: .valueChanged
isOn Variable que nos indica si el UISwitch está activado o desactivado.

UISlider en Swift

Control que nos proporciona seleccionar un valor entre un rango de valores.

final class MyViewController : UIViewController {
    private var mySlider: UISlider = {
        let slider = UISlider()
        slider.frame = CGRect(x: 85, y: 200, width: 200, height: 40)
        slider.minimumValue = 0
        slider.maximumValue = 10
        slider.addTarget(self, action: #selector(didMoveSlider), for: .valueChanged)
        slider.minimumValueImage = UIImage(systemName: "lightbulb.slash")
        slider.maximumValueImage = UIImage(systemName: "lightbulb.fill")
        return slider
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(mySlider)
        self.view = view
    }
    
    @objc private func didMoveSlider(sender: UISlider) {
        print("Slider Value: \(sender.value)")
    }
}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedades y métodos a tener en cuenta:

minimumValue Valor mínimo que podremos seleccionar en nuestro rango.
maximumValue Valor máximo que podremos selecciona en nuestro rango.
addTarget Con este método indicamos que método queremos que se ejecute al cambiar de valor en el UISlider. Hay distintos tipos de triggers, en nuestro caso hemos especificado que se llame al método cuando se cambie el valor: .valueChanged.
minimumValueImage Imagen que estará en el lado de nuestro valor mínimo.
maximumValueImage Imagen que estará en el lado de nuestro valor máximo.

UIStepper en Swift

Control para aumentar o decrementar un valor.

import Foundation
import UIKit
import PlaygroundSupport


final class MyViewController: UIViewController {
    private var myStepper: UIStepper = {
        let stepper = UIStepper()
        stepper.frame = CGRect(x: 85, y: 200, width: 200, height: 40)
        stepper.minimumValue = 0
        stepper.maximumValue = 20
        stepper.addTarget(self, action: #selector(didChangeStepper), for: .valueChanged)
        return stepper
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(myStepper)
        self.view = view
    }
    
    @objc private func didChangeStepper(sender: UIStepper) {
        print("Stepper Value: \(sender.value)")
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedades y métodos a tener en cuenta:

minimumValue Valor mínimo que podremos asignar a nuestro UIStepper.
maximumValue Valor máximo que podremos asignar en nuestro UIStepper.
addTarget Con este método indicamos que método queremos que se ejecute al cambiar de valor en el UIStepper. Hay distintos tipos de triggers, en nuestro caso hemos especificado que se llame al método cuando se cambie el valor: .valueChanged.
value Valor de nuestro UIStepper.

UISegmentedControl en Swift

Control horizontal que consiste de múltiples segmentos, cada uno con su propio botón.

final class MyViewController: UIViewController {
    private var mySegmentedControl: UISegmentedControl = {
        let segmentedControl = UISegmentedControl(items: ["Sección 1", "Sección 2", "Sección 3"])
        segmentedControl.frame = CGRect(x: 40, y: 200, width: 300, height: 40)
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.addTarget(self, action: #selector(didChangeSegmentedControl), for: .valueChanged)
        return segmentedControl
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(mySegmentedControl)
        self.view = view
    }
    
    @objc private func didChangeSegmentedControl(sender: UISegmentedControl) {
        print("UISegmentedControl Value: \(sender.selectedSegmentIndex)")
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedades y métodos a tener en cuenta:

selectedSegmentIndex Segmento que queremos que esté seleccionado. En este caso hemos puesto 0, queremos que al cargar la vista la primera opción esté seleccionada.
addTarget Con este método indicamos que método queremos que se ejecute al cambiar de valor en el UISegmentedControl. Hay distintos tipos de triggers, en nuestro caso hemos especificado que se llame al método cuando se cambie el valor: .valueChanged.

UIDatePicker en Swift

Control para meter fechas o tiempo.

final class MyViewController: UIViewController {
    private var myDatePicker: UIDatePicker = {
        let datePicker = UIDatePicker()
        datePicker.datePickerMode = .date
        datePicker.addTarget(self, action: #selector(didChangeDateValue), for: .valueChanged)
        return datePicker
    }()
    
    override func loadView() {
        let view = UIView()
        view.backgroundColor = .white
        
        view.addSubview(myDatePicker)
        self.view = view
    }
    
    @objc private func didChangeDateValue(sender: UIDatePicker) {
        print("Date Value: \(sender.date)")
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Propiedades y métodos a tener en cuenta:

datePickerMode Depende lo que queremos mostrar, podemos escoger: time, date, dateAndTime o countDownTimer.
addTarget Con este método indicamos que método queremos que se ejecute al cambiar de valor en el UIDatePicker. Hay distintos tipos de triggers, en nuestro caso hemos especificado que se llame al método cuando se cambie el valor: .valueChanged.

Hoy hemos dado una pincelada a algunos elementos que podemos usar al construir nuestras vistas con UIKit, espero que te haya servido de utilidad ver qué componentes usar de forma nativa.

Hasta aquí el post de hoy, gracias por leernos! 🤓
Si tienes preguntas no dudes en contactar con nosotros a través de Twitter

Si quieres seguir aprendiendo sobre SwiftUI, Swift, Xcode, o cualquier tema relacionado con el ecosistema Apple


UIKit