Introdución a Storyboards [Parte 1]

06 Publicado a Storyboards

1. Introdución

Apple presentou os storyboards no lanzamento de iOS 5.

Fai moitos anos …

Con todo recibín 2 correos electrónicos de lectura de efectos comentario que atoparon algunhas dificultades para seguir tutoriais porque non dominan as historias.

Polo tanto, esta semana será obxecto sobre a que centraremos o noso tutorial.

antes do lanzamento Dos storyboards, os desenvolvedores de iOS só tiñan a opción de crear as interfaces das nosas aplicacións a través de ficheiros con extensión .xib ou programalos directamente a través de código.

Cada un destes ficheiros representou unha pantalla da nosa aplicación.

Esta forma de traballar tiña as súas vantaxes (moitas veces .xib aínda é mellor opción que storyboards) e, por suposto, tamén os seus inconvenientes.

Polo tanto, hoxe tes tres opcións para crear as túas interfaces :

1. progresa directamente Vía Código
2. Use ficheiros .XIB
3. Usar storyboards

No tutorial desta semana, imos ver todo o que precisa saber para sentirse cómodo usando storyboards E non ten ningún problema sempre que queira crear unha nova aplicación de iOS.

Vantaxes de usar Storyboards Nos seus desenvolvementos

Quizais máis tarde desenvolva un tutorial sobre como crear interfaces a través do código ou usar directamente .xib.

Como esta semana imos centrarnos nas historias, imos ver algunhas das vantaxes que nos ofrecen.

1. son perfectos para ver a navegación completa fluxo dunha aplicación.
2. Permítelle crear unha aplicación multivieta sen ter que escribir prácticamente código.
3. son moi útiles para os desenvolvementos de pequenas medios.

Como calquera opción, tamén teñen desvantaxes.

Só vou comentar sobre a.

porque toda a nosa interface está concentrada nun \ O ficheiro Nico, hai moitos conflitos que complican o desenvolvemento do equipo dunha aplicación.

Con todo, en moitos equipos de desenvolvemento son a opción preferida ao crear calquera interface, polo que é importante que poida traballar con eles.

3. Que imos ver neste tutorial sobre storyboards?

Os puntos máis importantes que veremos son os seguintes:

1. Vantaxes de usar storyboards nos seus desenvolvementos
2. Saber a interface de constructor
3. Cal é o dock
4. especificando a interface principal da nosa aplicación
5. secuencia de inicio dun
6. Como seleccionar o controlador de visualización de inicio
7. Establecer os modos de retrato e paisaxe da nosa aplicación
8. Como engadir un tableviewcontroller, un navegaciónController e un tabbarcontroller?

Comezamos a emitir as bases básicas dos storyboards.

Creando o noso proxecto en Xcode

Para comezar a crear un novo proxecto en Xcode, acceder ao menú Ficheiro > Novo > Proxecto … e escolla o modelo de aplicación única:

A continuación, faga clic en Seguinte e dálle o non Queres. No meu caso chamarémoslle storyboards_demo. Deixar o resto das opcións, como as ves na imaxe:

Prema en Seguinte, gardar o proxecto Onde queira que queira e termine de premer o botón Crear.

Despois de crear o proxecto, Xcode mostraralle algo así:

Con este proxecto de demostración, veremos todo o necesario para dominar as storyboards.

5. Conceptos básicos de storyboards

Prema no ficheiro principal. Establecer algúns conceptos que debes saber:

constructor de interface

a pantalla que se abriu ao acceder O Main.storyBoard é coñecido como a interface do constructor e ten a seguinte aparencia:

Nas primeiras versións de iOS, Interface Builder foi unha aplicación independente de Xcode e do mesmo xeito que agora, foi usado para crear as interfaces das nosas aplicacións.

A parte esquerda da interface do constructor é coñecida como contorno de documentos e móstranos a Lista de todas as escenas que compoñen a nosa interface.

Unha escena representa cada unha das pantallas da nosa aplicación

dentro de cada escena, todos os obxectos que están engadindo á interface, ademais de restricións e outros elementos.

Para mostrar ou ocultar o contorno do documento pode usar o seguinte botón, situado na parte inferior esquerda:

Como ves, no noso proxecto recentemente creado só temos unha pantalla. Esta pantalla está representada polo noso controlador de visualización.

Na parte superior dereita do constructor de interface temos o inspector de atributo. A través das opcións que ofrece, podemos facer modificacións ás propiedades de calquera obxecto que sexa parte da nosa interface.

Dentro do inspector de atributo ten 6 menús diferentes, onde todos controlan un aspecto diferente de calquera obxecto:

Por outra banda, na parte inferior dereita, elimina a biblioteca de obxecto:

A partir de aquí pode engadir calquera elemento á interface da súa aplicación.

proba por exemplo Para arrastrar unha etiqueta, un botón, un campo de texto e un control deslizante ao seu servizo de visualización:

Vostede mira Vostede, ademais de engadilos á nosa interface, Xcode agregounos á lista de elementos que aparecen no contorno do documento:

Si Alecu TAS A aplicación, facendo CMD + R, verá que os elementos que engadimos á nosa interface amósanse no simulador.

Dock

Xusto por riba de cada ViewController pode ver o dock

O dock mostra os obxectos de alto nivel de cada escena. Cada escena terá polo menos un obxecto de visualización, un obxecto de primeira resposta e un obxecto de saída, pero tamén pode ter outros elementos. O dock é simplemente un documento de esquema en miniatura.

ViewController Evidentemente representa a nosa única resposta de visualización.

A primeira resposta xestiona o foco da nosa aplicación. Probablemente, prácticamente non o usen.

A saída pode usarse para engadir opcións de navegación ás nosas interfaces.

interface principal

antes, ao executar o noso proxecto , a aplicación que creamos, xa sabía perfectamente o que tiña que ligar o guión de guión ao executar a aplicación.

Isto non ten ningún misterio, só temos un arquivo principal. que o noso proxecto sabe que este é o ficheiro que contén a nosa interface.

Con todo, nalgún outro proxecto pode usar varios storyboards diferentes, polo que é importante que entenda, onde especificamos cal é o storyboard principal .

Simplificar moito, calquera aplicación iOS, por defecto, inicia a súa execución na clase AppDelegate.swift.

Prema nesta clase e comproba a parte inicial:

O atributo @uiapplicationmain situado na parte superior determina que a nosa clase de aplicación é o punto de entrada da nosa aplicación.

É obrigatorio que o noso AppDelegate Herdar de UreSondon e ter unha propiedade tipo UIWindow para que a aplicación funcione.

Se ollades os métodos que aparecen nesta clase, todos están prácticamente baleiros. Só DidFinishLaunchingWithoptions () ten algún código e o único que fai é devolver a verdadeira.

Unha vez que a clase inicial da nosa aplicación é revisada, é probable que o faga. Onde fai a nosa referencia á aplicación Storyboard?

o ficheiro de ficheiro.plist

Para responder a isto terá que abrir o ficheiro de info.plist e localizar a entrada de Nome Base de Base de Storyboard.

Cando executamos a aplicación, o obxecto UIAPplication carga o storyboard que se especifica nesta tecla, inicializa a ViewController que está marcado como controlador de visión inicial (agora veremos onde está feito) e despois coloca a vista dese visualizador no obxecto UIWindow.

Hai outro punto onde debemos especificar cal é a principal Interface da nosa aplicación. Se fai clic no nome do proxecto, na parte superior esquerda e fas desprácese ata a sección de información de implantación, verás como outra opción chamada interface principal, onde aparece o nome do noso storyboard.

Estas dúas opcións son fundamentais para que a súa aplicación inicie correctamente.

Controlador de visión inicial

Revisamos no punto anterior, que unha vez que especificou cal será o noso storyboard principal, tamén debemos determinar cal será o ViewController que a nosa aplicación debe cargarse primeiro.

Para seleccionar isto, o acceso Main.StoryBoard, faga clic no noso único servizo de visualización e na cuarta opción do inspector de propiedade, verá a opción de control de visualización inicial.

Esa opción especifica que cando se carga o storyboard, a primeira pantalla que a maioría Rárá A nosa aplicación será a que está seleccionada como un controlador de visión inicial.

De feito, se mira, verá que no constructor de interface, só para a esquerda do visualizador aparece unha frecha apuntando cara á dereita. Se arrastras esa frecha e colóquea apuntando a outro ViewController, este último converteríase no controlador de visión inicial.

Como conclusión, se nalgún momento tes problemas coa túa aplicación, porque ves que fas Non cargue o storyboard que debería ou porque a primeira pantalla que mostra non é a que queira, é conveniente que comprobe estas 3 últimas opcións que acaba de ver, porque é máis probable que teña modificado calquera deles e Non te lembro.

Retrato / Paisaxe

Ao desenvolver unha aplicación, ten varias opcións.

Pode querer que a súa aplicación se execute só en retrato ( Cando o dispositivo está en posición vertical) ou tamén en paisaxe (cando o dispositivo está nunha posición horizontal).

Estas opcións e máis pode controlalos desde o menú que vimos antes: información de implantación.

Na sección de orientación do dispositivo pode ver o que E ten 4 opcións para escoller.

Se executamos a aplicación, coas opcións que ve na imaxe, a nosa aplicación xirará a súa interface sempre que usemos o iPhone nunha posición vertical co botón de inicio a continuación e tamén na posición horizontal, tanto co botón de inicio cara á dereita como á esquerda.

Con todo, se o noso dispositivo está nunha posición vertical co botón de inicio, a nosa aplicación non estaría adaptada a Esta posición, xa que a opción de arriba abaixo está desactivada.

Polo tanto, isto é o que cada unha das opcións representa:

• Retrato: posición vertical co botón de inicio a continuación
• de arriba: posición vertical co botón de inicio
• Esquerda a paisaxe: posición horizontal co botón de inicio á esquerda
• Paisaxe dereito: posición horizontal co botón de inicio cara á dereita

Cando se trata de desenvolver o seu proxecto, ten que ter en conta todo isto.

Engadir un TableViewController

Por defecto, cando creamos unha única aplicación de visualización, Xcode Project crea un ViewController no noso storyboard.

Ás veces, probablemente queira traballar directamente cun TableViewController.

Nestes casos, para reemplazarse, tan rápido como segue estes pasos:

1. Seleccione o noso ViewController no main.storyboard
2. Retire-lo presionando o borrar tecla
3. Engadir unha táboaViewController da biblioteca de obxectos
4. Escolla esta táboaViewController como controlador de visualización de inicio

A continuación pode ver esta secuencia de accións:

Se executas actualmente a aplicación, verás como a visión inicial que mostra é a de tableview baleiro.

Engadir un navegaciónController

O navegaciónController é a opción perfecta Ta para engadir navegación entre pantallas cando creamos aplicacións multivistas.

Un navegaciónController debe estar sempre asociado con outro controlador. Este controlador pode ser de calquera tipo: ViewController, TableviewController, colecciónViewController.

Este controlador asociado ao navegaciónController convértese no seu controlador principal, é dicir, no seu rotaViewController.

Para engadir un navegaciónController á súa aplicación pode seguir algúns pasos similares aos que vimos Na sección anterior:

1. Seleccione a nosa táboaViewController no main.storyboard
2. Elimina premendo a tecla Eliminar
3. Engadir un navegaciónController do obxecto Biblioteca
4. Escolla este navegaciónController como controlador de visualización de inicio

Aquí tes estes pasos en vídeo:

Como puidera observar, o navegaciónController foi asociado por defecto a TableviewController.

Se actualmente executas o proxecto, verás como A nosa aplicación mostra a táboa ViewController xunto cunha barra de navegación na parte superior co título do controlador de visión raíz, que indica que a nosa aplicación ten unha naveiga Tioncontroller.

Engadir un tabbarcontroller

Los tabbarcontrollers, como o que permite que o permiten Para crear aplicacións multivistas.

Con todo, se nos navegacionesControllers establecemos unha navegación xerárquica, desde os pais ata os nenos, no tabbarcontroller os diferentes opcións de visualización que usamos estarán ao mesmo nivel de navegación.

Para engadir un tabbarcontroller a través dun storyboard, seguiremos algúns pasos similares aos que se ven nas seccións anteriores:

1. Seleccione o noso navegaciónController no main.storyboard
2. Elimalo premendo a tecla Eliminar
3. Seleccione o controlador de visualización da raíz do controlador de navegación
4. Tamén o elimina coa tecla Eliminar
5. Engadir un tabbarcontroller da biblioteca de Obxectos
6. Escolla este tabbarcontroller como controlador de visualización de inicio

Estes son os pasos seguido:

Se executas a aplicación verás como a nosa pantalla principal é agora un tabbarcontroller que conta con 2 ViewControllers, identificados como elemento 1 e elemento 2.

9. Resumo final

Fixemos unha revisión rápida para os aspectos fundamentais dos storyboards. Vimos como engadir elementos básicos que nos permitirán crear interfaces complexas.

Con todo, non tratamos un dos temas máis importantes dos storyboards: os membros.

Este concepto verémolo na segunda parte deste tutorial. Acceda agora á segunda parte desde aquí.

10. Terminou o tutorial

Terminou o tutorial desta semana en efectos. Como sempre, aquí está a túa recompensa. O video chorra esta semana:

11. Onde ir agora?

Accede á segunda parte do tutorial en storyboards, onde veremos conceptos máis avanzados que serán moi útiles, desde aquí,

pode acceder a máis tutoriais dispoñible en efectos a partir de aquí.

Se este artigo parecía útil, faríame un gran favor compartíndoo nas súas redes sociais.