Le blog by wookipster

Tips de teks velus.

mercredi 8 août 2012, 21:47

funfid factory *litlle* secrets : la lib iOS de nos fenêtres d'alerte

Chez funfid, nous développons actuellement une application mobile. Nous sommes toujours à la recherche de solutions techniques à la fois cools et jolies, alors quand on en trouve on aime les partager.

Notre designer en voulait une toute jolie, il l'a redessiné. Notre développeur voulait des blocks, il a fureté sur github et il a trouvé BlockAlertsAnd-ActionSheets par Gustavo Ambrozio.

Cette lib permet de customiser entièrement le style de l'alertview et ajoute une animation d'apparition et de disparition "à la" fenêtre de tweet. Et biensur la possibilité d'utiliser les blocks.

Pour customiser votre alertview, les fichiers à créer :

  • alert-windows.png : le background de l'alertview.
  • alert-red-button.png : le bouton de destruction.
  • alert-black-button.png : le bouton d'annulation.
  • alert-gray-button.png : les autres boutons.
  • un fichier BlockUI.h : qui spécifie l'alertview (cf. exemple).

Note : Vous pouvez changer les valeurs 'red/black/gray' directement dans le code de BlockAlertView.m si vous avez des couleurs de boutons différents et avoir un code plus propre

Voici le BlockUI.h que nous utilisons pour notre application :

//global configuration const
#define kAlertViewBounce         20
#define kAlertViewBorder         10
#define kAlertButtonHeight       44

//title configuration
#define kAlertViewTitleFont             [UIFont boldSystemFontOfSize:20]
#define kAlertViewTitleTextColor        [UIColor colorWithRed:255.0/255.0 green:107.0/255.0 blue:90.0/255.0 alpha:1.0]
#define kAlertViewTitleShadowColor      [UIColor whiteColor]

//message configuration
#define kAlertViewMessageFont           [UIFont systemFontOfSize:18]
#define kAlertViewMessageTextColor      [UIColor colorWithRed:88.0/255.0 green:88.0/255.0 blue:88.0/255.0 alpha:1.0]
#define kAlertViewMessageShadowColor    [UIColor whiteColor]
#define kAlertViewMessageShadowOffset   CGSizeMake(0, -1)

//buttons configuration
#define kAlertViewButtonFont            [UIFont boldSystemFontOfSize:18]
#define kAlertViewButtonTextColor       [UIColor whiteColor]
#define kAlertViewButtonShadowColor     [UIColor lightGrayColor]
#define kAlertViewButtonShadowOffset    CGSizeMake(0, 0)

//background configuration
#define kAlertViewBackground            @"alert-window.png"
#define kAlertViewBackgroundCapHeight   38

Parlons maintenant de l'utilisation.

Nous utilisons AFNetworking (nous en parlerons dans un prochain article) et il permet de détecter les changements au niveau du réseau (déconnection, reconnexion…). Nous affichons une fenêtre d'alerte customisée pour alerter l'utilisateur qu'il n'est pas connecté.

Voici le code :

[[FFPfunfidAPIClient sharedClient] setReachabilityStatusChangeBlock:^(AFNetworkReachabilityStatus status) {
    if (status == AFNetworkReachabilityStatusNotReachable)
    {
        //alert
        BlockAlertView *alert = [BlockAlertView alertWithTitle:@"Problème réseau" message:@"Impossible de se connecter aux serveurs funfid."];
        [alert addButtonWithTitle:@"OK" block:nil];
        [alert show];
    }
}];

Dans ce cas nous n'utilisons pas de block.

Voila ce que ça donne :

Le cas suivant montre comment nous affichons une fenêtre d'alerte pour demander à l'utilisateur s'il veut voir ou non le tutorial.

[self.navigationController dismissViewControllerAnimated:YES completion:^{
             //show alerview
             BlockAlertView *alert = [BlockAlertView alertWithTitle:@"Bonjour" message:@"Voulez vous voir un tutorial avant de commencer à utiliser funfid ?"];

             [alert setCancelButtonWithTitle:@"Non merci" block:nil];
             [alert setDestructiveButtonWithTitle:@"Voir le tutorial" block:^{
                 //show tuto view controller here
                 FFPTutoViewController * settingController = [[FFPTutoViewController alloc] initWithNibName:@"FFPTutoViewController" bundle:nil];
                 UINavigationController * navigationController = [[UINavigationController alloc] initWithRootViewController:settingController];

                 FFPAppDelegate *app =  (FFPAppDelegate*)([UIApplication sharedApplication].delegate);
                 [app.navigationController presentViewController:navigationController animated:YES completion:nil];
             }];
             [alert show];
         }];

Tips : Nous utilisons FFPAppDelegate pour récupérer le controller car notre code est dans une fenêtre modal qui a disparu au moment où nous affichons la fenêtre d'alerte (dismissViewControllerAnimated).

Merci de nous avoir lu. Et à bientôt pour de prochaines aventures.

tweetez   ★   likez