Share
La personalización del tema es una excelente manera de destacar en la App Store, pero no siempre es fácil de lograr. Este tutorial te enseñará varios trucos básicos de personalización de UIKit que te ayudarán a distinguir tus aplicaciones y crear experiencias de usuario más memorables..
Si ha pasado algún tiempo hurgando en la documentación en línea de Apple en su Centro de desarrollo de iOS, seguramente se familiarice con las infames Pautas de Interfaz Humana (más conocidas como "HIG"). Este documento proporciona a los desarrolladores y diseñadores de aplicaciones iOS pautas para saber cómo los usuarios esperan interactuar con las aplicaciones en la plataforma iOS, ejemplos de uso comunes y principios generales de UI / UX a seguir..
Si bien hay muchas maneras de personalizar la apariencia de su propia aplicación iOS, desde cambiar los colores y los tamaños hasta hacer rodar sus propios elementos de la interfaz de usuario, se considera la mejor práctica seguir el HIG y sus sugerencias para proporcionar una interfaz concisa y utilizable..
Teniendo esto en cuenta, echemos un vistazo a algunas formas en que podemos hacer eso al mismo tiempo que personalizamos nuestra interfaz para que se adapte a un tema visual más exclusivo..
La mayoría de los desarrolladores de iOS están familiarizados con los atributos comunes de la clase UIView que son fáciles de cambiar, como el color de fondo, el tamaño de la fuente o la opacidad. Pero a veces, ajustar estas propiedades simplemente no nos da el resultado que necesitamos.
Entonces, para demostrar más técnicas de personalización práctica, trabajaremos en una aplicación de visor de fotos simple. Así es como se verá la aplicación sin ninguna personalización, y luego con los cambios que realizaremos:
Antes de comenzar, necesitará algunas imágenes que puede descargar aquí..
Además, he configurado la aplicación básica que usaremos, que puede descargar aquí. No tienes que preocuparte por todo el trabajo de preparación; vamos a empezar a personalizar!
Con nuestra aplicación de preparación, tenemos algunos componentes básicos:
Comenzaremos haciendo que nuestro fondo se vea un poco más elegante al establecer una imagen de fondo. Para hacer esto, agreguemos un método en nuestra clase "MTViewController" llamada "-setupUI".
Agregaremos este método justo debajo de nuestras declaraciones @synthesize.
- (void) setupUI
Ahora, debemos agregar nuestro archivo de imagen de fondo a nuestro proyecto, así que obtenga el archivo "BG-pattern.png" de los recursos que descargó hace un minuto y arrástrelo a nuestra aplicación. He creado un nuevo grupo para nuestras imágenes de interfaz de usuario llamadas "Gráficos de interfaz de usuario".
Con la imagen en su lugar, podemos ir dentro de este método "setupUI", y solo necesitamos agregar una línea:
[self.view setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @ "BG-pattern.png"]]];
Para hacer este cambio en vivo en nuestra aplicación, necesitaremos llamar a nuestro método "setupUI" desde el método "viewDidLoad" de nuestro ViewController. Ya he agregado algunas llamadas al método "viewDidLoad", así que podemos agregar este al principio:
- (void) viewDidLoad // configura los elementos de IU personalizados [autoinstalaciónUI]; // construir arreglos para imágenes y títulos [auto setupData]; // iniciar la aplicación con el primer segmento seleccionado [self didChangeSegmentControl: aSegmentControl]; [super viewDidLoad]; // Realice cualquier configuración adicional después de cargar la vista, normalmente desde una plumilla.
Ahora, hagamos que nuestra imagen se destaque un poco agregando un borde blanco alrededor. Para hacer esto, trabajaremos con CALayers, lo que significa que primero debemos incluir el marco QuartzCore en nuestro proyecto.
Vaya a nuestro proyecto UIKitDemo y seleccionaremos nuestro objetivo (UIKitDemo). Luego iremos a la pestaña titulada "Crear fases" y mostraremos la sección "Vincular binarios con bibliotecas".
En la parte inferior, hacemos clic en el botón "+" y seleccionamos "QuartzCore.framework".
Finalmente, tenemos que #importar Cuarzo en nuestro ViewController (MTViewController.m).
#importar
Con Quartz en su lugar, podemos comenzar a jugar con las subcapas anImageView. Agregaremos lo siguiente a nuestro método "setupUI" para agregar el borde alrededor de nuestro ImageView:
[anImageView.layer setBorderWidth: 5.0f]; [anImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
Si construimos y ejecutamos nuestra aplicación ahora, podemos ver un borde blanco limpio alrededor de nuestro ImageView.
Ahora, para hacer que nuestra imagen destaque aún más, podemos poner una sombra sutil detrás de ella usando métodos similares:
[anImageView.layer setShadowRadius: 5.0f]; [anImageView.layer setShadowOpacity: .85f]; [anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)]; [anImageView.layer setShadowColor: [[UIColor blackColor] CGColor]]; [anImageView.layer setShouldRasterize: YES]; [anImageView.layer setMasksToBounds: NO];
Algunos de estos comandos no son inmediatamente obvios en cuanto a su función, por lo que los veremos línea por línea:
[anImageView.layer setShadowRadius: 5.0f];
Comenzamos estableciendo la cantidad de "desenfoque" que tendrá nuestra sombra.
[anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)];
A continuación, creamos un desplazamiento para nuestra sombra, de modo que no se encuentre justo detrás de nuestra imagen..
[anImageView.layer setShouldRasterize: YES];
Este comando ayudará con el rendimiento, ya que se asegura de que la sombra solo se dibuje una vez y luego se guarde como un mapa de bits, evitando la necesidad de que la aplicación vuelva a dibujar la capa transparente intensiva del procesador.
[anImageView.layer setMasksToBounds: NO];
Finalmente, queremos asegurarnos de que no estamos cortando nuestra sombra, ya que se extiende más allá de los límites de nuestra vista original.
Intenta ejecutar la aplicación nuevamente y verás una bonita sombra detrás de nuestra imagen..
Tenemos muchos bordes duros, así que suavicemos nuestra interfaz haciendo que nuestra UILabel (aLabel) tenga esquinas redondeadas.
Podemos hacer esto en el mismo método "setupUI" debajo de las personalizaciones de UIImageView. Todo lo que necesitamos es una línea simple para hacer que esto funcione:
[aLabel.layer setCornerRadius: 15.0f];
Ahora, el cambio final a nuestro método "setupUI" rotará ligeramente nuestro UIImageView, lo que romperá el sentimiento "cuadrado" del resto del diseño.
Podemos hacer esto con dos líneas más en la parte inferior de nuestro método "setupUI":
Transformación CGAffineTransform = CGAffineTransformMakeRotation (.03f); anImageView.transform = transform;
Y eso es todo para nuestro "setupUI". No está mal para solo unas pocas líneas de código, ¿verdad??
Con el lanzamiento de iOS 5 vino un nuevo protocolo para las subclases de UIViews llamado "apariencia". Este protocolo nos permite modificar ciertos aspectos de nuestros componentes UIKit estándar como nos gusta, como la configuración de imágenes de fondo personalizadas, sombras, efectos de color y más.
Un ejemplo simple de esto es el UINavigationBar. Ahora podemos configurar imágenes personalizadas para cambiar nuestras barras de navegación de UIN para que se ajusten a los temas de nuestra aplicación sin ningún problema:
[[Apariencia de UINavigationBar] setBackgroundImage: navBarImage para BarMetrics: UIBarMetricsDefault];
En este caso, tenemos un UIImage llamado "navBarImage", que estamos configurando como la imagen predeterminada para nuestro UINavigationBar. La llamada de "aparición" afectará nuestra clase UINavigationBar, no solo una instancia. Esto significa que nuestros cambios se aplicarán a todos los UINavigationBars que usamos en esta aplicación.
Para implementar este cambio en nuestro proyecto actual de Photo Viewer, debemos ir a nuestra clase AppDelegate (MTAppDelegate). Vamos a la AppDelegate porque queremos que nuestro cambio afecte a todas las instancias de UINavigationBars en nuestra Aplicación, por lo que para asegurarnos de que se realicen nuestros cambios, los implementaremos inmediatamente después de abrir la Aplicación..
Comencemos agregando el método a nuestra clase "MTAppDelegate" justo después de nuestra @sintetizar Declaraciones, al igual que hicimos en nuestra clase "MTViewController":
- (void) setupUI
Ahora, importaremos nuestra imagen "navBar.png" (de la carpeta de recursos de imagen que descargaste anteriormente).
Luego podemos crear la instancia de UIImage que usaremos para nuestro fondo:
UIImage * navBarImage = [UIImage imageNamed: @ "navBar.png"];
Y justo después de eso, podemos hacer nuestra llamada de "apariencia":
[[Apariencia de UINavigationBar] setBackgroundImage: navBarImage para BarMetrics: UIBarMetricsDefault];
Sin embargo, antes de que este cambio esté activo, debemos llamar a nuestro método "setupUI" desde el aplicación: didFinishLaunchingWithOptions: método.
- Aplicación (BOOL): (UIApplication *) aplicación didFinishLaunchingWithOptions: (NSDictionary *) launchOptions [auto setupUI];…
Puede ejecutar su aplicación ahora - note el fondo oscuro en nuestro UINavigationBar en la cima.
Para nuestro próximo truco, las cosas se complican un poco más. Vamos a configurar imágenes personalizadas para nuestro UISegmentedControl. La parte difícil aquí es que no solo estamos tratando con una o dos imágenes de fondo, sino que tenemos que trabajar con secciones específicas de imágenes; como los extremos redondeados, secciones intermedias seleccionadas o no seleccionadas, la línea divisoria entre dos segmentos, etc.
En primer lugar, si aún no lo ha hecho, importe las imágenes restantes en la carpeta de recursos de imágenes que descargó.
Al igual que con la barra UINavigation que modificamos hace un minuto, necesitamos hacer dos cosas para cambiar nuestro control UISegmentado..
No tengo suficiente tiempo aquí para desglosar cada una de estas acciones paso a paso, pero abordaré algunas de las principales en un minuto. Por ahora, agregue el siguiente código a su método "setupUI":
UIImage * segmentSelected = [[UIImage imageNamed: @ "segcontrol_sel.png"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)]; UIImage * segmentUnselected = [[UIImage imageNamed: @ "segcontrol_uns.png"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)]; UIImage * segmentSelectedUnselected = [UIImage imageNamed: @ "segcontrol_sel-uns.png"]; UIImage * segUnselectedSelected = [UIImage imageNamed: @ "segcontrol_uns-sel.png"]; UIImage * segmentUnselectedUnselected = [UIImage imageNamed: @ "segcontrol_uns-uns.png"];
Esto crea nuestros UIImages, y realiza el cambio de tamaño según sea apropiado. Notarás esto un poco:
resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)
Esto nos permite esencialmente "recortar" nuestro archivo de imagen al cortarlo por ciertos márgenes. En este caso, dejamos la parte superior tal como está, moviendo 15 puntos desde el lado izquierdo, dejando la parte inferior como está y moviendo 15 puntos desde el lado derecho. Eso nos deja con la sección central que se expandirá hasta el ancho necesario, pero los extremos redondeados permanecerán igual..
Para obtener más información sobre "resizableImageWithCapInsets:", consulte la documentación oficial de Apple.
Con nuestras imágenes dimensionadas y listas, podemos establecer los diferentes estados de nuestro control UISegmented. Cada una de las cinco imágenes que acabamos de agregar tendrá un estado correspondiente:
[[Apariencia de UISegmentedControl] setBackgroundImage: segmentUnselected forState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[Apariencia UISegmentedControl] setBackgroundImage: segmentSelected forState: UIControlStateSelected barMetrics: UIBarMetricsDefault]; [[Apariencia UISegmentedControl] setDividerImage: segmentUnselectedUnselected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[Aspecto UISegmentedControl] setDividerImage: segmentSelectedUnselected forLeftSegmentState: UIControlStateSelected rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[Apariencia UISegmentedControl] setDividerImage: segUnselectedSelected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateSelected barMetrics: UIBarMetricsDefault];
A diferencia de un UIButton simple, que está básicamente seleccionado o no, nuestro UISegmentedControl también puede verificar cuál es el estado a cada lado del segmento actual, pero no es demasiado complejo una vez que lo entendemos..
Con las nuevas funciones de iOS 5 y algunos trabajos creativos con Quartz, podemos hacer que nuestras aplicaciones se vean de la manera más rápida y sencilla. Algunos desafíos que se presentan con la personalización de la interfaz de usuario son:
Puede ser relativamente fácil encontrar buenos gráficos, y hay muchos buenos diseñadores dispuestos a ayudar. A veces puede ser más difícil mantener el enfoque en el "por qué" y no solo en el "cómo" de la personalización de la interfaz de usuario. Para citar al ficticio Dr. Ian Malcolm en Parque jurásico:
[Ellos] estaban tan preocupados por la posibilidad de que no se detuvieran a pensar si deberían.
Como siempre, salga, pruebe cosas nuevas, modifique la configuración y explore las muchas otras formas en que puede personalizar sus interfaces iOS!
Accentsconagua