Share
Una de las mejores herramientas que Apple proporciona a sus desarrolladores de iPhone es Interface Builder. Interface Builder es una aplicación que le permite a usted, el desarrollador, crear la Interfaz Gráfica de Usuario (GUI) para su aplicación en un editor de estilo WYSIWYG (Qué es lo que obtiene). Cuando se compila la aplicación, IB genera todo el código necesario para ti. Esto le permite crear interfaces rápida y fácilmente. Este tutorial lo guiará a través de la creación de interfaces en Interface Builder y el uso de los diferentes elementos que Apple proporciona
Antes de continuar con cualquiera de los ejemplos de este tutorial, debe leer las Pautas de interfaz humana de iPhone de Apple. Estos documentos contienen información esencial sobre la creación de interfaces para el iPhone, y el incumplimiento de las pautas que establece podría hacer que su aplicación sea rechazada cuando se envíe a la App Store. Este documento se tratará con más detalle a medida que avancemos, y todos los ejemplos de este tutorial se ajustarán a estas pautas.
Interface Builder tiene un diseño bastante simple. Consta de cuatro ventanas principales, la vista, la biblioteca, el explorador de documentos de la plumilla (o xib) y el inspector. Entonces, ¿qué hace cada una de estas ventanas? La vista es donde construyes tu interfaz. Arrastrará los elementos desde la ventana de la biblioteca hasta la vista para colocarlos. El explorador de documentos le permite explorar, jerárquicamente, los elementos que ha colocado en su archivo de plumilla. Finalmente, el inspector le muestra todos los atributos diferentes del elemento seleccionado y le permite editarlos.
En el lado más técnico, Interface Builder permite que el código fuente de su aplicación interactúe con la interfaz de dos maneras básicas: salidas y acciones. Los Outlets definen un elemento al que tendrá acceso en su código fuente, luego puede hacer la conexión desde sus Outlets a esos elementos específicos de IU en Interface Builder..
Una salida se define así:
IBOutlet id someElement;
La declaración de IBOutlet también podría incluirse en la declaración de propiedad de la siguiente manera:
@ propiedad (no atómica, retener) ID de IBOutlet someElement;
De cualquier manera es aceptable. Una acción es un tipo especial de método que se llama en respuesta a un evento (es decir, el usuario pulsa un botón) que define en Interface Builder. Una acción se define al hacer que los métodos devuelvan el tipo IBAction, de esta manera:
-(IBAction) someAction: (id) remitente;
Discutiremos puntos de venta y acciones con más detalle más adelante..
Lo primero que deberá hacer antes de poder jugar con Interface Builder es crear un nuevo proyecto de Xcode. Para abrir Xcode, haga clic en Crear un nuevo proyecto de Xcode y luego seleccione un proyecto basado en la vista. Titúlelo "contador".
NOTA:
Asegúrese de que ha establecido su objetivo para iPhone y no para iPad en Xcode.
Ahora que tiene un proyecto Xcode, queremos modificar el CounterViewController creado automáticamente para definir nuestros puntos de venta y acciones. Abra el archivo CounterViewController.h y modifíquelo para que tenga el siguiente aspecto:
#importar@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; Recuento de NSInteger; @ propiedad (no atómica, retener) UILabel * countLabel; @ propiedad (nonatomic) NSInteger count; - (IBAction) agregar: (UIButton *) remitente; - (IBAction) sub: (UIButton *) remitente; - (nulo) displayCount; @fin
Esto define un entero para mantener el conteo y una salida a una etiqueta que mostrará ese conteo. También define un conjunto de métodos que recibirán eventos del IB. Ahora debemos definir una implementación para estas acciones, así que abra el archivo CounterViewController.m correspondiente y realice los cambios siguientes:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; - (IBAction) agregue: (UIButton *) sender count ++; [auto displayCount]; - (IBAction) sub: (UIButton *) sender count--; [auto displayCount]; - (void) displayCount [self.countLabel setText: [[NSString alloc] initWithFormat: @ "% d", self.count]]; … - (void) dealloc [versión de countLabel]; [super dealloc]; @final
Esto es bastante simple archivo. Todo lo que hace es cada vez que se llama a la acción, modificar el recuento hacia arriba o hacia abajo y luego muestra ese recuento en la etiqueta.
Ahora expanda la carpeta de recursos en Xcode y verá tres archivos. Dos de estos son archivos .xib de Interfcae Builder. Por ahora puede ignorar MainWindow.xib, nos centraremos en CounterViewController.xib. Ábralo ahora, esto iniciará el generador de interfaces y verá una pantalla como esta:
¡Es hora de empezar a construir nuestra interfaz! Vaya a la pestaña de la biblioteca, y agarre un botón y arrástrelo a su vista. Si arrastra el botón por un momento, notará que aparecen guías azules. Interfcae Builder le dará diferentes guías para ayudar a colocar el elemento dentro de la vista. Verás esto más a medida que comencemos a colocar más elementos. Haz eso dos veces. Luego, encuentra una etiqueta y colócala en tu vista.
Ahora, seleccione uno de los botones, vaya a la pestaña de atributos en el inspector, y cambie su título a "+". Haga lo mismo para el otro botón, pero cambie su título a "-". Hacer doble clic también te permitirá cambiar el título. Haga doble clic en la etiqueta y cambie su texto a "0". También puede cambiar la alineación del texto para centrar, lo que se puede hacer en la pestaña de atributos del inspector.
Ahora deberías tener una interfaz que se parece aproximadamente a esto:
Lo último que debe hacer para que su aplicación de contador funcione es conectar la interfaz y la fuente.
Conecte la salida countLabel a la etiqueta real. Esto se puede hacer presionando y arrastrando los controles desde el objeto Propietario del archivo, en la ventana del documento, a la etiqueta, en la vista. Aparecerá una pequeña ventana gris con dos opciones, una será el countLabel que definimos anteriormente y la otra será la vista (esta es una salida predeterminada requerida para los controladores de vista, tendrá un guión para indicar que ya está conectado a algo) ). Haga clic en la opción countLabel para seleccionarlo.
Ahora, vamos a conectar nuestros botones a nuestras acciones de suma y resta. Para nuestros propósitos, simplemente puede controlar y hacer clic y arrastrar desde los botones hasta el objeto propietario del Archivo (y seleccionar la acción apropiada para cada botón), sin embargo, tome nota del hecho de que si abre el panel de conexión en el inspector (que puede Para llegar al presionar comando + 2, se enumeran una serie de eventos diferentes que puede utilizar para desencadenar sus acciones y le permite crear una amplia gama de funcionalidades desde un simple botón. Por defecto usa el evento Touch Up Inside..
Ahora puede volver a Xcode y hacer clic en compilar y ejecutar, y su aplicación debería iniciarse en el simulador. Si ha conectado todo correctamente, debería poder sumar y restar del conteo y debería ver el cambio de etiqueta para reflejar eso.
Un control UISegmentado es como un par de botones pegados, con una gran diferencia. El propósito general de un control UISegmentado no es ser como un botón, sino para la selección. Permite ampliar la funcionalidad de nuestra aplicación Counter, utilizando un control segregado para permitir al usuario seleccionar entre los modos "contar por uno" o "contar por dos".
Lo primero que deberá hacer es abrir el archivo CounterViewController.h en Xcode y agregar una definición IBAction y un entero para almacenar nuestro modo.
Cámbiala para que se vea así:
#importar@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; Recuento de NSInteger; Modo NSInteger @ propiedad (no atómico, retener) UILabel * countLabel; @ propiedad (nonatomic) NSInteger count; @property (nonatomic) modo NSInteger; - (IBAction) agregar: (UIButton *) remitente; - (IBAction) sub: (UIButton *) remitente; - Modo (IBAction): (UISegmentedControl) sender; - (nulo) displayCount; @fin
Este es un buen momento para señalar el hecho de que hasta ahora las definiciones de acción en este tutorial han definido un tipo de clase para el remitente, que restringe los objetos que pueden llamar a esta acción a los de ese tipo de clase. Considero que esto es una práctica útil porque le impide conectar cosas incorrectamente. Cabe señalar, sin embargo, que esto es no un requisito, estas definiciones podrían haber sido:
- (IBAction) agregar: (id) remitente; - (IBAction) sub: (id) remitente; - Modo (IBAction): (id) remitente;
Permitiendo que cualquier objeto los llame. De cualquier manera, debe hacer que la implementación de estas acciones coincida, así que abra CounterViewController.m y realice estos cambios:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthesize countLabel; modo @synthesize; - (IBAction) agregue: (UIButton *) sender switch (mode) case 0: count ++; descanso; caso 1: cuenta + = 2; descanso; por defecto: break; [auto displayCount]; - (IBAction) sub: (UIButton *) sender switch (mode) case 0: count--; descanso; caso 1: cuenta - = 2; descanso; por defecto: break; [auto displayCount]; - modo (IBAction): (UISegmentedControl) sender mode = sender.selectedSegmentIndex; … @final
Ahora necesitamos modificar la interfaz. Por lo tanto, abra el CounterViewController.xib.
Ir a la biblioteca y arrastrar en un control segmentado. Ahora necesitamos configurarlo. Asegúrese de que el control segmentado esté seleccionado y abra el panel de atributos del inspector. Avanzando un poco hacia abajo en el menú desplegable de segmentos, que debería leer "segmento 0 - primero", queremos cambiar el título a "Uno". Ahora despliegue el menú de segmentos y cambie al segmento "segmento 1 - segundo", y cambie su título a "Dos".
También necesitamos conectar esto a nuestra acción. Abra el panel de conexiones y arrastre desde "Valor modificado" al propietario de los archivos. Seleccione el modo "acción".
Eso es. Ahora debería tener una aplicación de contador que puede contar hacia arriba y hacia abajo por uno o dos.
Hasta ahora, los elementos de los que hemos hablado tienen numerosos usos posibles y muy pocas restricciones. La barra de herramientas es el primer elemento que analizaremos que tiene restricciones en las Pautas de interfaz humana del iPhone. Si planea usar mucho las barras de herramientas, debe consultar esas pautas, pero en resumen, las barras de herramientas siempre deben colocarse en la parte inferior de la interfaz y deben estar compuestas de botones con iconos que no superen los 44px por 44px. No es un elemento de navegación, y esa es una distinción importante. Si desea usarlo para cambiar la vista o los modos en su aplicación, use una barra de pestañas. Sin embargo, si sigues estas pautas, la barra de herramientas es muy simple; es una simple colección de botones en una barra, y por lo tanto puede usarse exactamente como lo haría con un montón de botones. La única diferencia es que Apple proporciona un conjunto más grande de ajustes preestablecidos del sistema que para los botones estándar. También puede colocar separadores en la barra de herramientas entre los botones para cambiar sus posiciones. Vamos a probarlo.
Regrese al CounterViewController.h y agregue la siguiente línea después de sus declaraciones de acción anteriores.
- (IBAction) restablecer: (UIBarButtonItem *) remitente;
Nota:
El remitente aquí es un UIBarButtonItem, no un UIToolbar. Cada UIBarButtonItem envía su propio evento, el UIToolbar es simplemente un contenedor.
Ahora, agregue esto a su CounterViewController.m, siguiendo las acciones que definimos anteriormente:
- (IBAction) restablecer: (UIBarButtonItem *) sender count = 0; [auto displayCount];
De vuelta en IB, dejemos caer una barra de herramientas de la biblioteca en la vista, tenga en cuenta que ya tiene un botón. Para seleccionar ese botón, debe hacer doble clic en él (el primer clic selecciona la barra de herramientas, el segundo selecciona el botón).
Ir a los atributos en el inspector. Notará que hay muchas menos opciones para un UIBarButtonItem que para otros elementos. Esto se debe al hecho de que las barras de herramientas deben ser uniformes, por lo que se deben configurar colores como para toda la barra de herramientas (puede probar esto simplemente haciendo clic una vez en la barra de herramientas y luego abriendo el inspector de atributos). Cambia el identificador del botón a "Basura".
Luego, conecte el botón a la acción de reinicio mediante el control arrastrando al propietario del archivo. Si ejecuta su aplicación, ahora debería poder descansar el conteo tocando la papelera.
El conmutador es probablemente el elemento más restringido proporcionado por Interface Builder. Casi no tiene opciones de personalización. Tiene un estado "On" y un estado "Off". No puedes cambiar las etiquetas o los colores. Los interruptores siempre deben verse iguales sin importar lo que pase. A pesar de que son muy restringidos, los interruptores son útiles en ocasiones. Por ejemplo, las configuraciones tienden a hacer un uso intensivo de los interruptores, y el interruptor puede ser útil para activar y desactivar las funciones de su aplicación, eso es exactamente lo que vamos a hacer. Vamos a hacer un cambio que encenderá y apagará si podemos contar los negativos en nuestra aplicación.
Lo primero que debe hacer es hacer las siguientes modificaciones a su CounterViewController.h:
#importar@interface CounterViewController: UIViewController … Booleano negativo; … @ Propiedad (no atómica) Negativa booleana;… - (IBAction) interruptor negativo ((UISwitch *) remitente;… @end
Esto simplemente define un valor booleano que se almacenará si estamos en modo negativo o no, y una acción enviada por un interruptor UIS que cambiará ese valor booleano. Así que ahora vamos a definir nuestra acción y hacer que el resto de nuestra aplicación responda a nuestro nuevo booleano negativo. Modifique su archivo CounterViewController.m para que coincida con lo siguiente:
#import "CounterViewController.h" @implementation CounterViewController… @synthesize negative;… - (IBAction) sub: (UIButton *) sender switch (mode) caso 0: count--; descanso; caso 1: cuenta - = 2; descanso; por defecto: break; if (negativo) // Esto simplemente verifica si el modo negativo está desactivado si (cuenta < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Todo lo que se está haciendo aquí es establecer el modo negativo según el estado del interruptor, y luego, cuando ocurre una resta, se verifica en qué modo se encuentra actualmente el interruptor (almacenado en el booleano negativo).
Vuelva a cambiar al generador de interfaces, busque un interruptor en la biblioteca y suéltelo en la vista. Ahora necesitamos conectar el interruptor a la acción, pero en el caso del interruptor como el control segmentado, queremos usar el evento de Cambio de Valor, no retocar el interior. Vaya a la pestaña de conexiones en el inspector, y arrastre hacia el propietario del archivo y conéctese a la acción negativeMode :. También puede colocar una etiqueta para marcar lo que hace el interruptor..
En este punto su aplicación debería verse como la anterior..
El último y el elemento más complicado que discutiremos es el control deslizante. Los controles deslizantes representan un rango de valores (que puede especificar), que cambian a medida que se mueve a lo largo del control deslizante. Este elemento es enormemente personalizable, pero la mayoría de estas personalizaciones deben realizarse en código y están fuera del alcance de este tutorial. Vamos a usarlo para hacer un multiplicador y un divisor para nuestro contador..
Lo primero que necesitamos es, si lo adivinaste, otra acción. Agregue lo siguiente a CounterViewController.h con el resto de sus declaraciones de acción:
- (IBAction) multiplicador: (UISlider *) remitente;
Luego debemos implementar la función de multiplicación y división para nuestro contador, así que modifique su CounterViewController.m de la siguiente manera:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize mult;… - (IBAction) agrega: (UIButton *) sender count + = mode; cuenta * = mult; si (! negativo) si < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Ahora, cuando sumas o restas, el número se multiplica o divide por el valor del control deslizante. Si el control deslizante está en 1 (que será el límite inferior), el contador actúa normalmente en 9 (que será el máximo).
De vuelta en IB, agarre y suelte un control deslizante de la biblioteca en la vista y abra sus atributos en el inspector. Lo primero que debes notar aquí son los valores. Queremos cambiarlos un poco. Como se mencionó anteriormente, desea que el valor mínimo sea 1, que el valor máximo sea 9 y que el valor inicial sea 1. Desactive la casilla continua para que no obtengamos ningún punto decimal allí y eso es todo. Simplemente conecte el evento de "valor cambiado" de su control deslizante al propietario del archivo y tendrá su multiplicador!
Su aplicación final debe parecerse a la que se muestra a continuación:
Este tutorial apenas ha arañado la superficie de lo que es posible en Interface Builder. Es una aplicación extremadamente potente. Hoy hemos cubierto el uso básico de IB y los elementos más básicos proporcionados en la biblioteca de IB. Este tutorial ha demostrado cómo puede crear una aplicación completamente funcional, utilizando Interface Builder, sin mucho código. Siempre recuerde consultar las Pautas de interfaz humana del iPhone antes de hacer algo drástico, y para obtener más inspiración y asistencia sobre la interfaz, asegúrese de revisar el UICatalog de Apple.
Accentsconagua