Utilización de diferentes versiones del Storyboard

Con el nuevo aspecto del interface en el iOS 7, probablemente os habréis encontrado con que vuestras aplicaciones diseñadas para versiones anteriores no quedan bien.

Para evitar tener que rediseñar toda la aplicación para que tenga la misma apariencia en todas las versiones de iOS, se pueden crear dos (o los necesarios) storyboards, uno para la versión 7 y posteriores y otro para las anteriores. De esta forma se consigue que los usuarios que migren a la nueva versión del iOS tengan un interfaz acorde con el aspecto del iOS 7 pero, los que no migren, mantengan la apariencia de las versiones anteriores con el que ya están familiarizados.

Lo primero que tenemos que hacer es asegurarnos que, dentro de la pestaña General,  el Main interface está vacío. De esta forma no asignamos ningún storyboard por defecto.

Después haremos una copia del storyboard actual a la que vamos a llamar, por ejemplo iPhoneiOS7.storyboard. A la versión actual la renombraremos a iPhoneiOS6.storyboard.

Es conveniente también que en el File inspector, se seleccionen las siguientes opciones para cada storyboard.

iPhoneiOS6.storyboard

iPhoneiOS7.storyboard

En el AppDelegate, añadiremos el siguiente código dentro del application:willFinishLaunchingWithOptions:

UIStoryboard *mainStoryboard = nil;

if ([[[UIDevice currentDevice] systemVersion] compare:@"7.0" options:NSNumericSearch] == NSOrderedAscending)

{

    // Versiones anteriores a iOS 7
    // Instaciamos un objeto storyboard usando el archivo iPhoneiOS6.storyboard

    mainStoryboard = [UIStoryboard storyboardWithName:@"iPhoneiOS6" bundle:nil];

    

}

else

{

    // Versiones iguales o posteriores a iOS 7
    // Instaciamos un objeto storyboard usando el archivo iPhoneiOS7.storyboard

    mainStoryboard = [UIStoryboard storyboardWithName:@"iPhoneiOS7" bundle:nil];

    

}

// Instanciamos un objeto UIWindow y lo inicializamos con el tamaño de pantalla del dispositivo

self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// Hacemos que el initialViewController sea el rootviewcontroller

self.window.rootViewController = [mainStoryboard instantiateInitialViewController];

Además, en el application:didFinishLaunchingWithOptions: añadiremos la siguiente línea de código justo antes del return:

[self.window makeKeyAndVisible];

Con esto, lo que faltaría sería modificar el iPhoneiOS7.storyboard para adaptarlo al interfaz de la nueva versión del iOS. Una vez modificado se ejecutaran diferentes storyboards según la versión de iOS en la que se ejecute la App.

@Fin

Localización de imagenes en iOS

En esta ocasión os voy a contar como podemos hacer la localización para diferentes idiomas de imagenes que incluyen texto sin utilizar ni una sola línea de código.

Basta con añadir la imagen a nuestro proyecto Xcode y, seleccionándola ..

... accedemos al menú Utilities, sección Localization y pulsamos Localize.

Aparecerá una ventana en la que debemos indicar el idioma de la imagen:

De esta forma, indicaremos el idioma de la imagen seleccionada y, automáticamente, en la sección Localization aparecerán todos los idiomas de nuestra App.

Deberemos seleccionar las localizaciones deseadas y copiar el archivo correspondiente en su directorio lproj. Por ejemplo, si vamos a añadir la imagen en español, marcaremos el check Spanish y copiaremos el archivo con la imagen en el directorio es.lproj.

Y eso es todo.

@Fin

Asignar el Anchor de una PopOver a una UITableViewCell

Vamos a ver una forma de colocar el Anchor de un Segue de tipo Popover apuntando a una celda de una tabla dinámica. En el storyboard lo que tenemos es un prototipo de la celda, por lo que que si intentamos cablear el segue hacia ella, nos va a dar un error.

Así que os voy a contar como podemos solucionarlo. Se trata de crear un botón oculto que va a ser al que va a apuntar la ventana popover. Y moveremos su posición en función de la celda seleccionada.

Lo primero que haremos es crear el popover segue desde el ViewControler. Le asignaremos un Identifier, por ejemplo cellSegue.

Después añadiriremos a nuestra View un UIButon. Lo podemos colocar en cualquier sitio por qué va a tener su propiedad Hidden marcada, luego va a estar oculto. En el texto del botón voy a poner Anchor, aunque esto nos daría igual.

Y seleccionaremos el botón creado como Anchor del segue.

Ahora crearemos un outlet para el botón, que voy a llamar popOverAnchor:

@property (weak, nonatomic) IBOutlet UIButton *popOverAnchor;

En el @implementation colocaremos su synthesize:

@synthesize popOverAnchor = _popOverAnchor;

Deberemos implementar el método tableView:didSelectRowAtIndexPath: del UITableViewDelegate de esta forma:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

{

//Recuperamos la celda que se ha seleccionado

        UITableViewCell *tableViewCell = [tableView cellForRowAtIndexPath:indexPath];

        

//Creamos el CGRect al que va a apuntar el popover en función de la posición de la celda seleccionada

        CGRect rect = CGRectMake(tableViewCell.frame.origin.x + tableViewCell.frame.size.width/2, tableViewCell.center.y + tableView.frame.origin.y - tableView.contentOffset.y, 1, 1);

        

//Movemos el botón a esa posición

        self.popOverAnchor.frame = rect;

//Y para terminar llamamos al segue        

        [self performSegueWithIdentifier:@"cellSegue" sender:tableViewCell];

}

Y ya lo tenemos, como podéis ver, el botón se mueve al centro de la celda seleccionada y al ser el anchor de la ventana popover, conseguimos nuestro proposito.

@Fin

Hacer Segue desde un UILabel o UIView

Los Segues son una especie de vínculos que nos permiten movernos entre los view controllers. Hacer segue desde botones es la opción más común, pero no la única. Os voy a mostrar como se puede hacer tambien desde UIView o UILabel.

Vamos a suponer que tenemos un View Controller tan simple como el de la siguiente figura, con solamente una etiqueta azul. Queremos conseguir que, al tocar sobre la etiqueta, nos lleve a otro View Controller.

Dentro del Attributes Inspector de la etiqueta es importante marcar el check User interaction Enabled.

A continuación arrastraremos un Tap Gesture Recognizer y lo soltamos sobre la etiqueta. 

Nos creamos otro View Controller simple hacia el que vamos a hacer segue al tocar sobre la etiqueta y, pinchando sobre el Tap Gesture Recognizer con el botón derecho arrastramos hacia el nuevo View Controller.

Y ya está, así de sencillo.

Lo mismo se podría hacer sobre una vista.

@Fin

Utilización de UIScrollView con UIPageControl

Vamos a ver como utilizar un UIScrollView con un UIPageControl, lo que nos va a permitir crear una aplicación con varias páginas.
La clase UIPageControl son los puntos que aparecen en la parte inferior la ventana de muchas aplicaciones y que indican la ventana en la que estáis cuando hay varias.
Lo primero que haremos será añadir un UIPageControl al UIVIewController en el StoryBoard:

Lo voy a hacer solo con 2 páginas, así que pongo la propiedad Pages a 2. Seleccionando el UIPagecontrol con el botón derecho, lo "cableo" hacía el código del UIViewController para crear la propiedad:

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl; 

Vamos con el UIScrollView. En esta ocasión lo voy a hacer por código, aunque también se podría añadir en el StoryBoard.

Lo primero que haremos es añadir el delegate de UIScrollView al interface ViewController:

@interface myViewController : UIViewController <UIScrollViewDelegate>

A continuación definimos un método que va crear dos vistas con dos etiquetas y las va a añadir al ScrollView:

-(void)createTwoViewsWithTwoLabels

{

    // ScrollView

    UIScrollView *scrollView=[[UIScrollView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 60)];

    

    // View 1

    UIView *view1=[[UIView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height - 40)];

    view1.backgroundColor=[UIColor colorWithRed:0.5f green:1.0f blue:0.5f alpha:1.0f];

    

    // Label 1

    UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(22, 20, 275, 38)];

    [label1 setBackgroundColor:[UIColor clearColor]];

    [label1 setText:@"Vista 1"];

    label1.textColor=[UIColor blueColor];

    label1.adjustsFontSizeToFitWidth=YES;

    label1.textAlignment = NSTextAlignmentRight;

    label1.font = [UIFont fontWithName:@"Chalkduster" size:50];

    label1.numberOfLines = 1;

    [view1 addSubview:label1];

    

    //Se añade la primera vista al scrollview

    [scrollView addSubview:view1];

    

    //View 2

    UIView *view2=[[UIView alloc]initWithFrame:CGRectMake(self.view.frame.size.width, 0, self.view.frame.size.width, self.view.frame.size.height - 40)];

    view2.backgroundColor=[UIColor colorWithRed:1.0f green:1.0f blue:0.7f alpha:1.0f];

    

    //Label 2

    UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(22, 20, 275, 38)];

    [label2 setBackgroundColor:[UIColor clearColor]];

    [label2 setText:@"Vista 2"];

    label2.textColor=[UIColor blueColor];

    label2.adjustsFontSizeToFitWidth=YES;

    label2.textAlignment = NSTextAlignmentRight;

    label2.font = [UIFont fontWithName:@"Chalkduster" size:50];

    label2.numberOfLines = 1;

    [view2 addSubview:label2];

    

     // Se añade la segunda vista al scrollview

    [scrollView addSubview:view2];

    

    // Propiedades necesarias del scrollview

    scrollView.pagingEnabled = YES;

    scrollView.delegate = self;

    scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * 2, scrollView.frame.size.height);

    scrollView.showsHorizontalScrollIndicator = NO;

    scrollView.showsVerticalScrollIndicator = NO;

    scrollView.bounces = NO;

    

    //Se añade el scroll view a la vista del ViewController

    [self.view addSubview:scrollView];

    

}

Este método se llamará en el viewDidLoad:

- (void)viewDidLoad

{

    [super viewDidLoad];

    [self createTwoViewsWithTwoLabels]; 

}

Por último voy a implementar la función del UIScrollViewDelegate que detecta el cambio de página en el scroll:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView

{

    

    CGFloat pageWidth = scrollView.frame.size.width;

    int pagina = floor((scrollView.contentOffset.x- pageWidth / 2) / pageWidth) + 1;

    self.pageControl.currentPage=pagina;

    

}

Y con esto ya tendríamos un sencillo scroll con page control:

@Fin

Ejecución de un proyecto con una localización específica en iOS

Cuando tengáis un proyecto con varias localizaciones, al ejecutarlo en el simulador, se verá la localización definida por defecto.

Necesitaréis comprobar como se comporta la App en los distintos idiomas. La mejor solución es utilizar un argumento que se pasan al ejecutable. Se trata del -AppleLanguages. Se le pueden pasar una lista de idiomas, separados por comas, en el orden preferido. En nuestro caso como lo que necesitamos es probar las diferentes localizaciones de nuestro proyecto, le indicaremos el idioma que queramos verificar en cada momento. Para ello, desde Xcode se accede al menú Product > Edit Scheme...  

A continuación, en la configuración del Run, acceder a la pestaña Arguments, pulsar '+' y añadir el argumento -AppleLanguages "(<localización>)". En el ejemplo de la siguiente imagen, la localización a probar es la española.

Otra forma de probar las diferentes localizaciones es desde un dispositivo iOS. Se cambia el idioma del dispositivo desde las preferencias y se ejecuta el proyecto. Aunque esta otra solución yo la veo más para las últimas fases de los tests.

@Fin

Indicador de actividad

Una de las cosas que se debe evitar por todos los medios cuando se está desarrollando una App es que la ventana se quede bloqueada y no se muestre algún indicador que informe que está trabajando. Por ejemplo cuando se está cargando una página web. 

Una solución para evitar esta situación tan frustrante para el usuario es utilizar la propiedad setNetworkActivityIndicatorVisible de la clase UIApplication. Con esto se consigue añadir el circulo con rayitas que van cambiado de tono en la parte superior de la aplicación:

Otra posible forma sería utilizar la clase UIActivityIndicatorView. Vamos a ver un sencillo en el que mostraremos estos dos tipos de indicadores mientras se carga una página web.

Crearemos un Story Board con un View Controller al que añadiremos un Web View. Además cablearemos este UIWebView hacía el controller para especificarlo como su delegate. A continuación lo metemos en un Navigation Controller.

Network Activity Indicator

El interface del View Controller será así:

#import <UIKit/UIKit.h>

@interface WebViewController : UIViewController <UIWebViewDelegate>

@property (nonatomic, weak) NSString *webPage;

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

Como veis el modelo va a ser un string con la URL. Además hemos añadido el protocolo UIWebViewDelegate.

El UIWebView lo voy a definir como local:

@interface WebViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

La implementación de viewDidLoad será así:

- (void)viewDidLoad

{

    [super viewDidLoad];

    //Cargamos la página web en el web view

    NSURL *url = [NSURL URLWithString:self.webPage];

    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

    [self.webView loadRequest:requestObj];

}

Y se necesita añadir dos métodos del UIWebViewDelegate:

•  webViewDidStartLoad: indica cuando comienza a cargarse la página web. Es en ese momento cuando se debe poner la propiedad NetworkActivityIndicator a YES.
• webViewDidFinishLoad: indica cuando termina de cargarse la página web. Se pondrá NetworkActivityIndicator a NO.

- (void)webViewDidStartLoad:(UIWebView *)webView {

    [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:YES];

}

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:NO];

}

Activity Indicator View

Añadiremos una propiedad local para el  UIActivityIndicatorView:

@interface  WebViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@property (strong, nonatomic) UIActivityIndicatorView *activityIndicator;

@end

Y voy a definir su método set así:

- (UIActivityIndicatorView *)activityIndicator

{

    if (_activityIndicator == nil) 

    {

        _activityIndicator = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];

    }

    return _activityIndicator;

}

En este caso el viewDidLoad será: 

- (void)viewDidLoad

{

    [super viewDidLoad];

//  Con esto añadimos un botón al navigation bar con el activity indicator   

    UIBarButtonItem * barButton = [[UIBarButtonItem alloc] initWithCustomView:self.activityIndicator];

   [self navigationItem].rightBarButtonItem = barButton;

    

    NSURL *url = [NSURL URLWithString:self.webPage];

    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

    [self.webView loadRequest:requestObj];

}

Para terminar en los métodos webViewDidStartLoad y webViewDidStartLoad  empezaremos y terminaremos la animación:

- (void)webViewDidStartLoad:(UIWebView *)webView {

    [self.activityIndicator startAnimating];

}

//Called whenever the view finished loading something

- (void)webViewDidFinishLoad:(UIWebView *)webView{

   [self.activityIndicator stopAnimating];

}

El resultado de esta segunda opción será este:

En este caso el indicador de actividad se muestra en la barra del Navigation Controller.

@Fin