Revista Informática

iOS 7 Decodificado: imágenes y textos

Publicado el 08 noviembre 2013 por Codehero @codeheroblog

Imagenes

En esta nueva versión de iOS Apple nos facilita la gestión de imágenes en nuestras aplicaciones, habilitando una sección o carpeta en nuestros proyectos para guardar las imágenes que usaremos en la aplicación. Esta nueva sección se llama Images.xcassets

Algunos se preguntaran que beneficios puede traer un directorio nuevo a nuestros proyectos, pues en mi opinión muchísimos, empezando con mantenernos nuestro código y estructura de proyectos más organizada y segundo es bien sabido que apple con sus diferentes dispositivos y resoluciones de pantalla nos ha obligado a usar diferentes imágenes que se adapten a cada uno de sus dispositivos.

  • iPhone 3gs – 320×480 1x
  • iPhone 4 – 320×480 1x and 2x
  • iPad 1+2 – 768×1024 1x
  • iPad 3 – 768×1024 1x and 2x
  • iPhone 5 – 320×568 1x and 2x
  • Futuros dispositivos ¿?

Con esta nueva versión podremos ubicar en nuestro proyecto rápidamente donde están las imágenes a utilizar y como veremos en la imagen a continuación están agrupadas por nombre.

En la imagen podemos ver como dentro de la carpeta de imágenes antes mencionada contiene tres objetos (AppIcon,LaunchImage,logo) y en este caso el seleccionado (lobo) contiene las dos imágenes correspondientes para las diferentes versiones de iPhone que hay por el momento (Retina y no retina).


Fuentes y campos de texto

El manejo de las fuentes y los campos de texto en esta nueva versión del sistema imperativo a traído cambios significativos en su uso. Deprecando muchos de los métodos de los campos de texto y agregando algunos nuevos que estudiaremos a continuación:

Asignación de fuentes (UIFontDescriptor)

En iOS 7 cambiaron la forma de asignarle una fuente a un campo de texto, recordemos cual era la sintaxis antes de esta nueva versión.

UIFont *fuente = [UIFont fontWithName:@"HelveticaNeue-Italic" size:18];

1 UIFont *fuente=[UIFont fontWithName:@"HelveticaNeue-Italic"size:18];

Ahora en esta nueva versión del sistema operativo incorporaron un nuevo elemento que nos permite describir una fuente, para luego ser utilizada mas adelante. Con este nuevo objeto podemos guardar primero la familia de la fuente y luego crear nuevos objetos a partir de el, con nuevas características (negrita, cursiva, ligera, regular, etc.).

Veamos un ejemplo para generar un tipo de letra HelveticaNeue y cursiva:

UIFontDescriptor *fuenteBase = [UIFontDescriptor fontDescriptorWithFontAttributes: @{UIFontDescriptorFamilyAttribute:@"Helvetica Neue"}]; UIFontDescriptor *cursiva = [fuenteBase fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitItalic]; UIFont *fuente = [UIFont fontWithDescriptor:cursiva size:18]; self.label.font = font;

123456789101112 UIFontDescriptor *fuenteBase=  [UIFontDescriptor fontDescriptorWithFontAttributes:  @{UIFontDescriptorFamilyAttribute:@"Helvetica Neue"}];   UIFontDescriptor *cursiva=  [fuenteBase fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitItalic];   UIFont *fuente=[UIFont fontWithDescriptor:cursiva size:18]; selflabelfont=font;

Como ven primero declaramos una descripción con la fuente base, luego, partiendo de esa, creamos nuestra letra cursiva para posteriormente crear la fuente que asignaremos a nuestro objeto de texto.

Tamaño de un texto

Este es otro de los métodos que fueron cambiados para iOS 7, este método nos permite saber el tamaño que necesita un campo de texto para mostrar un texto. Veamos como se hacia antes:

CGSize tamanioLabel = [@"Bienvenidos a nuestros cursos en CodeHero" sizeWithFont:self.label.font]; self.label.frame = CGRectMake(0, 0, tamanioLabel.width, tamanioLabel.height);

123 CGSize tamanioLabel=[@"Bienvenidos a nuestros cursos en CodeHero"sizeWithFont:selflabelfont]; selflabelframe=CGRectMake(0,0,tamanioLabelwidth,tamanioLabelheight);

En iOS 7 descubrir el tamaño que requiero un texto para poder ser visto completo en un label se calcula de la siguiente manera:

CGSize tamanioLabel = [@"Bienvenidos a nuestros cursos en CodeHero" sizeWithAttributes: @{NSFontAttributeName: fuente, UIFontDescriptorTraitsAttribute: @(UIFontDescriptorTraitBold)}; ]; self.label.frame = CGRectMake(0, 0, labelSize.width, labelSize.height);

123456 CGSize tamanioLabel=[@"Bienvenidos a nuestros cursos en CodeHero"sizeWithAttributes:  @{NSFontAttributeName:fuente,  UIFontDescriptorTraitsAttribute:@(UIFontDescriptorTraitBold)};]; selflabelframe=CGRectMake(0,0,labelSizewidth,labelSizeheight);

Como ven el nuevo método es bastante sencillo, contiene nuevos elementos y se le puede asignar un diccionario de atributos para mejorar la precisión en que este detecta el tamaño, para este caso le hemos dicho la fuente que estamos utilizando.

Campos de texto

Los campos de textos también han sido foco de modificaciones en el nuevo sistema operativo. Se le agregaron una serie de clases, que nos dan a los programadores mas opciones para manipular estos objetos que usamos tan frecuentemente. Veamos el kit de clases de los campos de texto

  • UITextView: Esta clase es simplemente la vista que muestra el texto dentro de un UIScrollView
  • NSTextContainer Determina el espacio que tiene el texto para ser distribuido y proporciona el tamaño de este espacio
  • NSLayoutManager Cumple la function de un especie de conductor entre el NSTextStorage y el NSTextContainer.
  • NSTextStorage es el NSMutableAttributedString

Veamos en que nos afecta esto al momento de programar, a través de en unas imágenes que estoy seguro que ayudaran a comprender mejor estos conceptos, al menos el uso del NSTextContainer, que para este curso es el importante

En la imagen vemos un poco la estructura de un nuevo UITextView. Lo primero que vemos en la imagen es que prácticamente que hay una gran vista que contiene al textContainer y este a su vez nuestro texto. Las ventajas principal que vemos con esta estructura es que podemos adaptar el texto con los márgenes que queramos fácilmente. En la siguiente imagen vemos como están definidos los márgenes.

Textos Dinámicos

Entre otra de las novedades de Apple en iOS 7 para los campos de textos, es el uso de textos dinámicos que permiten a los usuarios de nuestras aplicaciones elegir un tamaño de texto base que se utiliza en todo el dispositivo.

En este sistema operativo ya viene con unas fuentes por defecto que hacen uso de esta propiedad ajustando los textos según as necesidades del usuario. Estas fuentes son las siguientes.

  • UIFontTextStyleHeadline (Títulos)
  • UIFontTextStyleSubheadline (Subtitulos)
  • UIFontTextStyleBody (Parrafos)
  • UIFontTextStyleCaption1
  • UIFontTextStyleCaption2
  • UIFontTextStyleFootnote

Al usar estos componentes como nuestras fuentes aumentara y disminuirá el tamaño según la configuración que el usuario final tenga en su dispositivo. La forma de agregar estos atributos a un campo de texto es la siguiente:

UIFontDescriptor *body = [UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleBody];  UIFont *fuente = [UIFont fontWithDescriptor:body size:0];

12345 UIFontDescriptor *body=[UIFontDescriptorpreferredFontDescriptorWithTextStyle:UIFontTextStyleBody]; UIFont *fuente=[UIFont fontWithDescriptor:body size:0];

En este ejemplo vemos como se crea una fuente utilizando estos atributos que por defecto son para párrafos y contenido.

Llegado a este punto probablemente te estés preguntando cómo ponerle estilo propio a estas fuentes dinámicas. Pues es bastante fácil y lo vamos a ver con un ejemplo sencillo.

// Primero declaramos nuestro descriptor con la fuente dinámica que prefieran UIFontDescriptor *baseFont =[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleBody]; // Luego le agregamos estilo a la fuente (negrita en este caso) UIFontDescriptor *boldBase = [baseFont fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold]; // Creamos nuestra fuente final con size 0 (!importante) UIFont *labelFont = [UIFont fontWithDescriptor:boldBase size:0]; self.label.font = labelFont; [self.view setNeedsLayout];

123456789101112 // Primero declaramos nuestro descriptor con la fuente dinámica que prefieranUIFontDescriptor *baseFont=[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleBody]; // Luego le agregamos estilo a la fuente (negrita en este caso)UIFontDescriptor *boldBase=[baseFont fontDescriptorWithSymbolicTraits:UIFontDescriptorTraitBold]; // Creamos nuestra fuente final con size 0 (!importante)UIFont *labelFont=[UIFont fontWithDescriptor:boldBase size:0]; selflabelfont=labelFont; [selfview setNeedsLayout];

En este ejemplo tenemos que destacar un par de novedades importantes, primero nos damos cuento que lo que hacemos es añadirle estilos extra a una fuente dinámica ya existente y segundo y más importante el tamaño de la fuente debe ser 0 para que este se adapte al sistema.

Luego de asignar nuestra fuente, debemos agregar un observador que escuche la petición del sistema de hacer crecer o decrecer las fuentes de la aplicación. Esto lo pudiéramos hacer en el método viewDidLoad y es algo así:

- (void)viewDidLoad { [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(contentSizeChanged:) name:@"UIContentSizeCategoryDidChangeNotification" object:nil]; }

12345678 -(void)viewDidLoad{  [[NSNotificationCenter defaultCenter]  addObserver:self selector:@selector(contentSizeChanged:)  name:@"UIContentSizeCategoryDidChangeNotification"   object:nil];   }

Por último para terminar con este punto veamos donde se cambia la configuración del tamaño de letra en nuestros dispositivos. Tendremos que acceder a Settings > General > Text Size y ahí veremos que tenemos un slider que configuramos a nuestro gusto.


Conclusión.

En este nueva serie estaremos estudiando los cambios y bondades que nos ofrece Apple con su nuevo sistema operativo iOS 7 a nivel de programación. En este capítulo estuvimos los cambios mas importantes que impactaron en el uso de campos de textos y los beneficios de el nuevo directorio de imágenes incorporado en nuestros proyectos.

Una vez más te recomiendo echarle un vistazo a la serie iOS desde cero y a mantenerte alerta a los nuevos capítulos de esta nueva serie, agradeciendo de antemano todas sus dudas y comentarios en la sección de comentarios.

¡Hasta el próximo capítulo!


Volver a la Portada de Logo Paperblog