Pyxis

Ce billet a pour objectif de créer une barre de progression avec l’iPhone SDK “from scratch”. Ma configuration : iPhone SDK 3.1.2, XCode 3.2.1 et SnowLeopard 10.6.2.

Entrons dans le vif du sujet :

Tout d’abord, commençons par créer un projet sous XCode que l’on nommera par exemple “PyxisProgressBar” et choisir le template “View-Based Application”.

Dans le répertoire “Resources”, ouvrir le fichier XIB nommé “PyxisProgressBarViewController” et ajouter un bouton (UIButton) en faisant un drag & drop à partir de la fenêtre Library. Puis dans le fichier “PyxisProgressBarViewController” ajouter une IBAction que l’on nommera startProgressBar et ne pas oublier de la binder dans Interface Builder.

Ensuite, ajouter une nouvelle classe héritant de la classe UIView et qui représentera les attributs de la vue qui est associée à notre contrôleur . Puis on associe cette classe à la vue correspondante dans Interface Builder.

Ce qui donne :

Ouvrir la classe MainView.m et ajouter les lignes de codes (penser à faire les déclarations nécessaires dans le .h) :

- (void)drawRect:(CGRect)rect {
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 1, 1, 1, 1);
CGContextStrokeRect(context, CGRectMake(9, 89, 302, 32));
CGContextSetRGBFillColor(context, 0.808, 0.216, 0.161, 1.0);
CGContextFillRect(context, progressBar);
}
- (void) updateProgressBar:(CGRect)aRect {
progressBar = aRect;
[self setNeedsDisplay];
}


Une petite explication s’impose :
Dans drawRect, la vue va tout d’abord dessiner le contour de la barre de progression en blanc qui est un rectangle vide en fait(ligne 2-3). Puis on va remplir ce rectangle vide avec un autre rectangle rempli cette fois de couleur rouge Pyxis(ligne 4-5).
Le principe de la progress bar est d’augmenter la taille du rectangle plein pour donner l’effet de la progression.
La méthode updateProgressBar permettra de mettre à jour ce fameux rectangle. La deuxième ligne de cette méthode indique à la vue de redessiner le rectangle. Penser à déclarer la variable progressBar de type CGRect dans le fichier .h.

Implémentation de l’action dans le controleur :

- (void) viewDidLoad {
[super viewDidLoad];
mainView = (MainView *)self.view;
}
- (IBAction) startProgressBar {
timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(onTimer) userInfo:nil repeats:YES];
}
- (void) onTimer {
step += 10;
[mainView updateProgressBar:CGRectMake(10, 90, step, 30)];
}


On crée une variable timer que l’on va instancier avec la classe NSTimer et qui mettra à jour la barre de progression à chaque seconde écoulée avec la méthode (selector) onTimer.
Dans onTimer, la variable step définit le pas de progression de la barre. Je l’ai délibérément fixé à 10 pour avoir le “feeling” que la barre progresse rapidement. La vue est mise à jour avec le “rectangle plein” de largeur égale à la variable step.

On build le tout et l’exécution sur le simulateur donne:

Et voilà ! la barre de progression devrait fonctionner maintenant.
Feedback welcome