19.11.2024

Aula 76: Lidando com Entrada do Usuário com Controles

Nesta aula, vamos explorar como lidar com a entrada do usuário usando vários controles em Swift, especificamente no contexto do desenvolvimento para iOS. Controles de interface de usuário como botões, campos de texto e deslizadores permitem que os usuários interajam com seu aplicativo. Vamos discutir como criar esses controles e responder à entrada do usuário de forma eficaz.

1. Criando uma Interface de Usuário Básica

Vamos começar criando uma interface de usuário simples usando o Interface Builder. Faremos um aplicativo básico que inclui um UILabel, um UITextField e um UIButton.

Passo 1: Configurando a UI

1. Abra o Xcode e crie um novo projeto de Aplicativo de Uma Única Tela.
2. No Storyboard, arraste um UILabel, um UITextField e um UIButton para a tela.
3. Defina as restrições para posicionar os elementos adequadamente.
4. Configure o UILabel para exibir uma mensagem, como “Digite seu nome:”.
5. Altere o título do botão para “Enviar”.

Passo 2: Conectando Elementos da UI ao Código

Em seguida, precisamos criar outlets e actions para conectar os elementos da UI ao nosso ViewController.

Abra o Editor Assistente e arraste o controle a partir do UITextField e do UIButton para criar um outlet e uma action em seu ViewController.swift.

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var nomeTextField: UITextField!
    @IBOutlet weak var respostaLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        respostaLabel.text = ""
    }

    @IBAction func botaoEnviarClicado(_ sender: UIButton) {
        if let nome = nomeTextField.text, !nome.isEmpty {
            respostaLabel.text = "Olá, \(nome)!"
        } else {
            respostaLabel.text = "Por favor, insira seu nome."
        }
    }
}

Explicação

• IBOutlet: @IBOutlet weak var nomeTextField: UITextField! conecta o campo de texto da UI ao código, permitindo que você o referencie no seu código.
• IBAction: @IBAction func botaoEnviarClicado(_ sender: UIButton) responde ao toque do botão. Quando o botão é clicado, essa função verifica se o campo de texto não está vazio e atualiza o rótulo de acordo.

2. Usando Eventos de Controle

Além dos botões, você pode usar vários eventos de controle para lidar com a entrada do usuário. Por exemplo, você pode ouvir mudanças em um UITextField para reagir conforme o usuário digita.

Exemplo: Respondendo a Mudanças no Campo de Texto

Para ouvir mudanças no campo de texto, você pode implementar o protocolo UITextFieldDelegate.

1. No seu ViewController, faça conformidade com UITextFieldDelegate.

class ViewController: UIViewController, UITextFieldDelegate {
    // ... outros outlets e métodos ...

    override func viewDidLoad() {
        super.viewDidLoad()
        respostaLabel.text = ""
        nomeTextField.delegate = self // Define delegate
    }

    // Função para lidar com mudanças na edição
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // Exemplo: Limitar o número de caracteres para 10
        let textoAtual = textField.text ?? ""
        let novoComprimento = textoAtual.count + string.count - range.length
        return novoComprimento <= 10
    }
}

Explicação

• Definir nomeTextField.delegate = self permite que o controlador de visualização gerencie eventos do campo de texto.
• O método textField(shouldChangeCharactersIn:replacementString:) é chamado toda vez que o usuário digita. Esta implementação limita a entrada a um máximo de 10 caracteres.

3. Usando um Controle Deslizante

Outro tipo de controle útil no iOS é o UISlider. Veja como usá-lo para obter entrada numérica do usuário.

Exemplo: Controle Deslizante

Primeiro, adicione um UISlider e um UILabel ao seu storyboard. Conecte o slider e o rótulo ao ViewController.

@IBOutlet weak var valorLabel: UILabel!
@IBOutlet weak var slider: UISlider!

override func viewDidLoad() {
    super.viewDidLoad()
    valorLabel.text = "Valor: \(slider.value)"
}

@IBAction func sliderValorMudou(_ sender: UISlider) {
    valorLabel.text = "Valor: \(sender.value)"
}

Explicação

• A action sliderValorMudou atualiza o rótulo para mostrar o valor atual do slider sempre que ele muda.

Conclusão

Nesta aula, exploramos como lidar com a entrada do usuário com diferentes controles em Swift. Criamos uma UI simples com um botão, campo de texto e controle deslizante, e lidamos com seus eventos para responder à entrada do usuário.

Ao entender como os controles de interface do usuário funcionam e como conectá-los ao seu código, você pode criar aplicativos interativos e amigáveis para os usuários. Continue experimentando com diferentes controles e seus eventos para aprimorar a funcionalidade e a usabilidade do seu aplicativo. Boa codificação!

Video

Navigation