Os storyboards foram apresentados aos desenvolvedores no lançamento do iOS 5. Eles poupam ao desenvolvedor o trabalho de projetar a interface de cada tela em um arquivo diferente. O storyboard permite que você veja a maquete conceitual de seu aplicativo como um todo e as interações entre cada tela. Usando segues, você pode definir como o aplicativo fará a transição entre as telas fornecidas e transmitirá os dados. Neste tutorial, vou mostrar como fazer uma tela de login simples para um aplicativo.
Começando
A primeira coisa que você vai querer fazer é criar um novo projeto. Você vai querer um novo aplicativo de tela única definindo o idioma como Swift e os dispositivos como universal. Se você navegar para o storyboard, deverá ver uma cena do controlador de visualização vazia. A seta no lado esquerdo do controlador de visualização indica que ele é o controlador raiz.
Para adicionar marcadores para o nome de usuário e senha, você precisa ir até a caixa no canto inferior direito da tela, selecionar o círculo com um quadrado e arrastar e soltar dois marcadores em sua visualização. Ao escolher as preferências na barra lateral, você pode especificar muitos parâmetros importantes. Há muitos para revisar, mas a maioria é autoexplicativa.
Os dois importantes para nós são o texto de espaço reservado e a caixa de seleção de entrada de texto seguro. Queremos usar o texto de espaço reservado para permitir que o usuário saiba quais informações são exigidas dele e a entrada segura para ocultar a exibição da senha do usuário. Depois que isso for feito, precisamos de um botão para acionar nossa segue. Podemos arrastar um da mesma forma que fizemos com um campo de texto. Depois de dar um título ao botão e organizar seus objetos na tela, eles devem ficar assim:
Agora que nossa primeira tela do aplicativo está pronta, precisamos fazer outra para a transição. Faça isso arrastando para a tela um segundo controlador de visualização. Para conectar as duas telas, você deve fazer duas coisas. Primeiro você precisa controlar o clique no botão e arrastá-lo para a nova tela que você adicionou. Em seguida, você precisará selecionar o círculo entre as duas visualizações. Você precisará alterar o identificador para segue; para este exemplo, usarei “nextScreen”
Por último, colocaremos uma etiqueta na nova tela para que possamos visualizar o usuário e ver se nosso aplicativo funciona. Para poder acessar os campos do storyboard de maneira programática, precisaremos criar saídas para eles na classe que os usa da seguinte forma:
class FirstScreen: UIViewController {
@IBOutlet fraco nome de usuário var: UITextField!
@IBAction func loginButton (sender: AnyObject) {
perfromSegueWithIdentifier (“nextScreen”, remetente: self)
}
}
class SecondScreen: UIViewController {
var usuário: String!
@IBOutlet fraco nome de usuário var: UILabel!
substituir função viewDidload () {
username.text = user
}
}
Depois de fazer isso, certifique-se de vincular os objetos do storyboard usando o inspetor de conexões de cada tela. Seus pontos de venda devem aparecer e você pode clicar no círculo à direita deles para vinculá-los.
A última função a ser implementada é a função prepareForSegue na classe da primeira tela. Isso permite que você transmita dados para a nova visualização da seguinte forma:
override fun prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == “nextScreen” {
let destVC = segue.destinationViewController as UIViewController
destVC.user = self.username
}
}
Agora você tem uma compreensão básica de como alterar as telas e passar dados entre elas. Isso lhe dará um bom começo para fazer aplicativos funcionais, boa programação!
2 minutos lidos
