Després de la passada entrega, titulada aprèn a programar jocs per iOS: Coneixent Xcode, I abans d'endinsar-nos en Cocos2D, aprofundirem una mica més en Xcode. En aquesta ocasió, interactuarem amb els elements creats, en lloc de limitar-nos a un simple «Hola món».
Amb això, guanyareu destresa en el maneig de Xcode, i podreu fer les vostres primeres aplicacions «útils» de forma ràpida; a l'aprendre l'ús bàsic de botons i etiquetes de text. Per ser aquesta classe una mica més complexa que l'anterior, tindreu disponible per a descàrrega l'exemple pràctic a la fin de l'entrada, perquè pugueu executar-lo i comprovar que funciona correctament!
En primer lloc, vam obrir Xcode i vam crear un nou projecte triant la plantilla «single view application», igual que a la classe anterior; això ens crearà un espai de treball basat en una sola finestra, amb el seu «assistent gràfic». Un cop obert, seleccionem l'arxiu viewcontroller.xib (Recordem que és la «cara gràfica» de la nostra primera vista o escena, anomenada viewcontroller, i la part de «codi» està en els arxius viewcontroller.m y viewcontroller.h), I ens dirigim a el quadre d'objectes, situat a baix a la dreta, per començar a arrossegar components a la nostra escena: labels, botons ... va a tenir de tot!
Com veiem en la imatge, en aquesta ocasió hem arrossegat el següent:
- Un objecte «etiqueta«, A manera de títol. No va a interactuar amb res.
- Un altre objecte «etiqueta«, Que albergarà valors numèrics.
- Un «pas a pas«, Encarregat d'augmentar o disminuir el valor numèric de l'« label »anterior.
- Un botó per comprovar que el «label» numèric coincideix amb un valor que nosaltres haurem triat prèviament.
Sabeu ja que es tracta aquest exercici? Molt senzill; haurem de triar la nostra edat (any a any amb el «stepper»), i després, mitjançant el botó comprovar, esbrinar si som majors d'edat. Tan absurd com educatiu, amb aquest exercici aneu a aprendre d'un cop de ploma diverses coses.
Com veieu a la imatge superior, la mida i color dels «label» es pot personalitzar. Cada objecte té multitud de paràmetres que podreu anar esbrinant si investigueu una mica. Un cop hagueu deixat cada objecte amb les característiques que més us agradin, és hora de fer balanç: per ara hem «dibuixat»Nostra aplicació; res interactua amb res ... necessitem donar-li unitat.
Per a això, anem a ficar-nos amb una mica de codi (Molt bàsic, i explicat rudimentàriament); concretament amb l'arxiu viewcontroller.h, Que alberga les definicions bàsiques de la classe viewcontroller (la nostra principal finestra!). No executa codi ni accions, tan sols planteja les bases i les funcions necessàries, perquè viewcontroller.m pugui usar-les i fer el treball dur ... que veurem plasmat en viewcontroller.xib! Les tres cares de la mateixa moneda.
Explicat això, podem començar a definir en el «codi» tots els objectes que hem definit visualment. Ens dirigim a l'arxiu viewcontroller.h, I afegim el següent:
Hi ha diverses formes de definir variables o elements, però en aquest cas, com necessitem que un element accedeixi (la nostra finestra, la part gràfica), els assignem d'aquesta forma (començant per @property). És un tema que abordarem en futures classes, per ara val amb que sapigueu intuir o identificar a què es refereix cada un: un «etiqueta»(Només un, ja que el títol que vam crear no va a interactuar amb res, i no necessitem definir-lo en el codi), una variable d'numeros sencers anomenada«majoriaD'Edat»(Aquesta és nova, no la vam posar en l'apartat gràfic .. tan sols emmagatzemarà la majoria d'edat per fer comparacions), un«pas a pas»(Anomenat stepper1).
A més d'això, també hi ha dues funcions (les dues que comencen per un guió, són funcions); d'elles s'encarregarà de fer alguna cosa quan estrenyem el stepper (¿Per exemple, fer que el «label» canviï la nostra edat? exacte), i una altra encarregada de comparar l'edat actual de l' «label» amb la qual nosaltres hem fixat.
Fins ara tenim la part gràfica definida, i també la part de codi. No obstant això, com li ensenyem a la nostra aplicació a què correspon cada variable o element de el codi, amb el seu equivalent en la part gràfica? Doncs molt fàcil. Fem clic sobre viewcontroller.xib, I donem a el botó rodó i gris amb forma de «play» i text 'mostra document outline », que trobem sota a l'esquerra del full quadriculada. Amb això es desplegarà un panell amb els elements de la nostra finestra.
Ens fixem dalt, en «Placeholders», que conté dues galledes: un de groc (File 's owner), que és on associarem els objectes amb el codi (labels, botons, etc); i un altre vermellós (First Respondre), on associarem les funcions que hem definit a diverses accions (per exemple, que a l'prémer un botó s'executi una funció).
Comencem amb els objectes. Fem clic dret sobre la galleda «Files Owner», i es desplegarà un menú negre. Despleguem l'apartat «Outlets», i veurem tots els elements que hem definit en el codi (només n'hi ha dos, label i stepper1); hem de arrossegar fins a la seva corresponent element gràfic: etiqueta amb el label numèric que hem creat, i stepper1 amb el stepper.
A l'arrossegar-veurem com es crea un «tentacle blau» que segueix el nostre ratolí a l'objecte que volem associar. (Nota: per començar el procés d'arrossegar, cal fer clic en els cercles buits al costat de el nom de cada objecte, com a la foto)
Ara cal fer el mateix amb les funcions; un clic dret a «First Comentar», i fem el següent:
- Fem clic en «checkEdad», i sense deixar anar, arrosseguem fins al botó de la nostra finestra gràfica, el de comprovar edat. S'obre un nou menú desplegable i triem «Touch down».
- Fem el mateix amb «stepperValueChanged», però aquesta vegada ho arrosseguem fins al nostre «stepper» gràfic, i al menú desplegable triem «Value Changed».
Ara mateix només queda afegir el «codi real» a viewcontroller.m; hem de dir-li què ha de fer amb cada acció que passi. Comencem per indicar-li que estigui a la diana de les variables definides en viewcontroller.h (La variable d'edat legal, la variable de l'stepper, i la variable de label; ambdues associades al seu homòleg gràfic) mitjançant «@synthesize nom_de_la_variable_u_element«, Just com veiem a la imatge:
Sense sortir de viewcontroller.m, Ens vam dirigir a la funció viewDidLoad (A la fi de l'arxiu), i just a sota del que ja està escrit, però abans de l' «}«, Definim quina ha de ser la majoria d'edat al nostre país. En aquest cas, 18:
Finalment, crearem i programar les funcions que hem definit en viewcontroller.h (són només dos). Una s'executarà cada vegada que pressionem el stepper, i ha de mostrar l'edat que vagi canviant, en el nostre «label».
L'altra, s'executarà quan estrenyem a el botó de comprovar edat, I comprovarà (valgui la redundància) si l'edat que hem introduït és igual o superior que la majoria d'edat: Si la resposta és afirmativa, el fons de l'App canviarà a verd; si no ho és, es posarà vermell. Les dues cal col·locar-les a l'arxiu viewcontroller.m; per exemple, immediatament abans de la funció - (void) viewDidLoad.
Ara arriba el millor. Cal provar-ho! Adreceu-vos a el botó play de dalt, comprovant que estigui elegit el «iPhone Simulator», i doneu-li. Se us obrirà la vostra finestra, i podreu interactuar amb ella!
L'exercici es podria fer més complex, però amb això teniu les bases per a investigar pel vostre compte, i provar noves opcions. Perquè sigui més fàcil seguir el tutorial, per curiositat, o simplement per si no aconseguiu fer-lo funcionar, aquí teniu el projecte en un Arxiu comprimit! Espero que us hagi servit ... fins a la propera!
Més informació - Aprèn a programar: coneixent Xcode (I)
Descàrrega - Segona classe de programacion per Xcode
Perfecte, espero que no tardes és publicar més cursos. Però podries especificar detallada ment que fa cada funció, per exemple: «*) sender» i «Triada:% d» ja que hi ha persones que no tenim coneixements en s'objectivi-c. Molt bon post.
Salutacions Sergio Abril.
Hola!
Moltes gràcies, t'explico breument, d'una manera una mica «ràpida» i «fàcil», ja que és una pregunta molt encertada:
Generalment quan defineixes una funció, has d'afegir els paràmetres que vols enviar a aquesta funció, i amb els quals vols treballar-hi; en el cas de botons i steppers, els afegim perquè la funció sàpiga que està cridant-li cert objecte (en el cas d'una, XNUMX UIButton, i en el cas de l'altra, un UIStepper), a què posem el nom que vulguem per treballar amb el dins de la funció (en aquest cas els dos «sender», però val qualsevol). D'aquí que després del nom de la funció, hagi dos punts, i després (UIButton *) Sender.
Per demostrar-te que aquestes funcions estan rebent «l'objecte que les anomena», encara que és cert que jo no ho he aprofitat, prova el següent:
Substitueix en la funcio checkerValuechanged (dins viewcontroller.m), tots els «stepper1» que trobis, per «sender». Veuràs que segueix funcionant igual, i el resultat és el mateix (encara que en el cas d'aquest exercici, no m'he aprofitat de les dades que rep i emmagatzema «sender», sinó que he fet referència directa a l'stepper1 (que és el mateix) ... d'aquí que sorgeixin dubtes .. així que bé preguntat!
Quant al segon, un NSLog no és mes que un «log» de pantalla, perquè a baix a la consola de Xcode aparegui el text que nosaltres fiquem entre les cometes. Si a més, volem que mostri determinats valors, per veure, per exemple en aquest cas, que valor té el stepper1 en cada moment, aquesta és la forma correcta d'afegir; col·locant on volem que vagi el valor XNUMX% d, i darrera de les cometes, el nom de la variable. (% D fa referència al fet que és un valor sencer. Si fos per exemple un decimal, hauria de posar% f).
En un moment podries pensar que hauríem de posar NSLog (@ »triat: VARIABLE») ;, però com tot el que va entre cometes surt «literal», no sortiria el valor sinó la paraula VARIABLE ... i cal recórrer a NSLog (@ »elegit :% d ", VARIABLE), perquè a l'detectar el '%» sàpiga que ahi va un valor que col·locarem després de la coma.
És una mica embolicat, però espero haver-me explicat 😉
Gràcies per la teva generositat; segueix així 🙂
Si us plau no deixis de fer el post, és molt útil i segur que a molta gent, m'incloc, li agrada.
Excel·lents els dos articles que portes fins ara Espero els propers per seguir aprenent sobre aquest nou llenguatge. Una pregunta, ¿perquè les funcions que es van utilitzar són de l'tipus IBAction i no simplement void?
Mai avía programat alguna cosa i fas que tot sigui tan senzill moltes gràcies per escriure aquests articles espere els altres amb moltes ànsies, disculpa però alguns llibres o pàgines web per seguir estudiant del tema tinc molta curiositat per aprendre a fer aplicacions no importa si estan en anglès espere em puguis ajudar gràcies.
¿Hi haurà tercera part ?, ja estem al març