Share
Este tutorial repasará los pasos necesarios para garantizar que sus aplicaciones de iOS se vean geniales cuando se muestren en la nueva pantalla del iPhone 5.
Para crear aplicaciones que sean compatibles con iOS 6 y iPhone 5, deberá asegurarse de tener Xcode 4.5 (o posterior) y el iOS 6 SDK instalado en su máquina de desarrollo. Con Xcode abierto, seleccione Xcode> Acerca de Xcode Desde la barra de menú para comprobar la versión actualmente instalada..
Para obtener las últimas herramientas, deberá ir al Centro de desarrolladores de Apple después de registrarse como desarrollador de Apple.
Recomendaría tomar el paso adicional de instalar los simuladores de iOS 5.1 y iOS 5.0 y las "herramientas de línea de comando" después de instalar la última versión de Xcode. Para ello, seleccione Xcode> Preferencias y luego ir a la Descargas lengüeta. Instale las opciones adicionales enumeradas. Cuando lo hayas hecho, la ventana debería verse así:
Tendrá que incluir una imagen llamada [email protected] en su proyecto para aprovechar al máximo la pantalla del iPhone 5. Puede parecer arbitrario, pero la existencia de este archivo es lo que determinará si su aplicación se ejecuta en modo de buzón (es decir, con bandas negras por encima y por debajo del contenido) o en modo de pantalla completa.
Por supuesto, el [email protected] El archivo también tiene otro propósito: será la imagen predeterminada que se mostrará cuando su aplicación se cargue en un iPhone 5. Esto cumple la misma función que la Default.png archivo para dispositivos iPhone / iPod touch sin retina y el [email protected] archivo para el iPhone 4 / 4S.
Al ejecutar un proyecto en Xcode 4.5 sin el [email protected] archivo, puede obtener una ventana emergente automatizada como esta:
Si es así, sigue adelante y haz clic en "Agregar" para que Xcode cree un lanzador negro sólido para ti, solo recuerda cambiarlo más adelante para que sea más apropiado para tu aplicación..
Si no ve la ventana emergente de Xcode, puede guardar esta imagen en su computadora y luego arrastrarla al área del navegador de proyectos de Xcode para agregarla a su proyecto. Una imagen de lanzamiento en negro no es ideal, pero satisfará los requisitos y colocará su aplicación en modo de pantalla completa.
Cree y ejecute su proyecto en un iPhone 5. ¡Idealmente, debería ser bueno sin más ajustes! Sin embargo, hay una serie de razones por las que su aplicación podría no verse correctamente en la nueva resolución. La segunda mitad de este tutorial cubrirá las aplicaciones de depuración que no se muestran correctamente después de seguir este paso.
Los desarrolladores de iOS han sido un tanto mimados en comparación con sus pares de Android cuando se trata de ver la programación de diseño. Para empezar, todas las pantallas iniciales de iPhone e iPod touch tenían la misma resolución de pantalla: 320x480 píxeles. Cuando la pantalla de retina utilizada por el iPhone 4 y 4S se introdujo en 2010, la resolución de la pantalla se duplicó a 640x960 píxeles, pero los desarrolladores aún estaban capaz de referirse al tamaño de la pantalla en código como 320x480. ¿Por qué? Porque con iOS 4, Apple introdujo el concepto de "puntos lógicos" en UIKit. Estos puntos podrían asignarse dinámicamente a píxeles físicos a través de contentScaleFactor propiedad de la Vista clase. los contentScaleFactor luego se configuró para reflejar lógicamente el cambio de resolución por defecto a 1.0 en el iPhone 3G / 3GS y 2.0 en el 4 / 4S.
Para citar de la Guía de dibujo e impresión de Apple para iOS:
El sistema asigna automáticamente puntos en el espacio de coordenadas de la vista a píxeles en el espacio de coordenadas del dispositivo, pero este mapeo no siempre es uno a uno. Este comportamiento conduce a un hecho importante que siempre debe recordar:
Un punto no corresponde necesariamente a un píxel físico.
El propósito de usar puntos (y el sistema de coordenadas lógicas) es proporcionar un tamaño consistente de salida que sea independiente del dispositivo. Para la mayoría de los propósitos, el tamaño real de un punto es irrelevante. El objetivo de los puntos es proporcionar una escala relativamente consistente que pueda usar en su código para especificar el tamaño y la posición de las vistas y el contenido representado. La forma en que los puntos se asignan realmente a los píxeles es un detalle que se maneja en los marcos del sistema. Por ejemplo, en un dispositivo con una pantalla de alta resolución, una línea que tiene un punto de ancho en realidad puede resultar en una línea que tiene dos píxeles físicos de ancho. El resultado es que si dibuja el mismo contenido en dos dispositivos similares, y solo uno de ellos tiene una pantalla de alta resolución, el contenido parece tener aproximadamente el mismo tamaño en ambos dispositivos.
Entonces, como desarrolladores de iOS lo hemos tenido bastante fácil gracias a esta innovación. Sin embargo, con la introducción de la resolución de 640x1136px del iPhone 5, usar un tamaño vertical de 480 puntos ya no llenará todo el espacio vertical disponible.
Para ver esto en acción, suponga que un programador está intentando agregar una vista de fondo personalizada mediante programación al controlador de vista raíz de su aplicación. Pretenda que el programador escribió este código para hacerlo:
UIView * customBackgroundView = [[UIView alloc] initWithFrame: CGRectMake (0.0f, 0.0f, 320.0f, 480.0f)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
Antes del iPhone 5, el bloque de código anterior hubiera funcionado bien. Los puntos lógicos de 320x480 se asignarían a 640x960 con el factor de escala predeterminado 2.0 del iPhone 4 / 4S. Sin embargo, en el iPhone 5, la altura todavía se asignará a 960 píxeles y se quedará corto:
Resolver este problema es bastante simple:
UIView * customBackgroundView = [[UIView alloc] initWithFrame: CGRectMake (0.0f, 0.0f, self.view.frame.size.width, self.view.frame.size.height)]; customBackgroundView.backgroundColor = [UIColor redColor]; customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; [self.view addSubview: customBackgroundView];
En este escenario, solo tuvimos que extraer dinámicamente el tamaño de la vista de raíz actual para colocar la nueva vista de fondo personalizada en toda el área.
Para otro ejemplo, supongamos que el programador quería crear una nueva vista programáticamente en el loadView: método:
- (void) loadView CGRect applicationFrame = [[UIScreen mainScreen] applicationFrame]; UIView * customView = [[UIView alloc] initWithFrame: applicationFrame]; customView.backgroundColor = [UIColor redColor]; customView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth; self.view = customView;
los applicationFrame propiedad de UIScreen devolverá los límites de marco de cuadro utilizados para la ventana de la aplicación actual, menos el área ocupada por la barra de estado (si está visible). Alternativamente, puede obtener solo el rectángulo delimitador de la pantalla con [[Pantalla principal de UIScreen] límites]. Ambos valores se devolverán en puntos lógicos, no en píxeles.
Si bien los ejemplos de código anteriores son útiles, también son algo limitados. En la práctica, es posible que tenga que lidiar con escenarios más complejos que involucren el dimensionamiento dinámico de muchas subvistas en función de la altura de la pantalla del dispositivo.
Afortunadamente, existen al menos tres enfoques diferentes que puede utilizar para hacerlo..
los Vista propiedad autoresizingMask es un medio simple pero efectivo para asegurar que los objetos de subvista se ajusten dinámicamente en relación con su supervisión. En el fragmento de código anterior, lo utilicé para asegurarme de que tanto el ancho como el alto del objeto de vista de fondo personalizado se escalarían adecuadamente con los cambios de orientación:
customBackgroundView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
Tenga en cuenta que el autoresizingMask La propiedad se puede controlar visualmente desde Xcode / Interface Builder también.
La mayoría de las aplicaciones que utilizan los controles UIKit y los contenedores predeterminados deberían poder funcionar bien en el iPhone 5 combinando valores variables para la creación de marcos (como se mostró anteriormente) y estableciendo propiedades de tamaño automático inteligente en subvistas..
Consulte la documentación oficial de Apple y la guía de programación de vistas para obtener más información..
El nuevo sistema Auto Layout introducido con iOS 6 proporciona un método avanzado para controlar la ubicación de la vista. El diseño automático usa un sistema de restricciones para explicar y hacer cumplir las relaciones de vista. El único inconveniente de usar Auto Layout es que no es compatible con iOS 5 y versiones anteriores..
La cobertura adicional de Auto Layout está fuera del alcance de este tutorial. Aquellos que deseen obtener más información deben consultar la Guía de diseño automático Cocoa de Apple y la sesión de Introducción al diseño automático WWDC 2012.
Otro enfoque adoptado por algunos es intentar verificar si el dispositivo actual es un iPhone 5 en tiempo de ejecución. La versión más avanzada de esto que he encontrado es de esta respuesta en StackOverflow.
La siguiente es una versión ligeramente modificada de las macros creadas en la publicación de StackOverflow:
#define IS_IPHONE ([[[UIDevice currentDevice] model] isEqualToString: @ "iPhone"]) #define IS_IPOD ([[[UIDevice currentDevice] model] isEqualToString: @acontactos.com) ] .size.height> = 568.0f #define IS_IPHONE_5 (IS_IPHONE && IS_HEIGHT_GTE_568)
La primera y la segunda macro comprueban si el dispositivo actual es un iPhone o iPod touch utilizando el UIDevice clase.
La tercera macro verifica si la altura de la pantalla es mayor o igual al valor de punto flotante 568. Recuerde desde arriba que [[Pantalla principal de UIScreen] límites] El mensaje devolverá el cuadro delimitador de la ventana de la aplicación en puntos lógicos, y esos 568 puntos lógicos se asignarán a 1136 píxeles con la vista predeterminada contentScaleFactor de 1.0.
Finalmente, la cuarta macro combina dos de las macros anteriores en una IS_IPHONE_5 macro que (por el momento) solo debería devolver VERDADERO si el código se está ejecutando en un iPhone 5. Podría usar la versión final en su propio código de esta manera:
if (IS_IPHONE_5) NSLog (@ "¡Hola, este es un iPhone 5! Bueno, quizás ... ¿de qué año es?"); else NSLog (@ "Bummer, esto no es un iPhone 5 ...");
Si bien el enfoque anterior es potencialmente útil, también es propenso a errores. Por ejemplo, ¿qué sucede si el iPhone 6 se lanza con dimensiones completamente nuevas? No aconsejaría utilizar este enfoque si es posible. En su lugar, manténgase en Autoresizing Masks o Auto Layout si puede hacer que uno de esos enfoques funcione..
Este tutorial ha explicado los diversos métodos disponibles para acomodar la pantalla ampliada del iPhone 5. Si ha estado luchando para adaptarse al nuevo tamaño de pantalla, es de esperar que haya encontrado el contenido útil!
No dude en dejar cualquier comentario que tenga en la sección de comentarios a continuación. También puedes conectarte conmigo en Twitter, Google Plus o LinkedIN. Aclamaciones!
Accentsconagua