[Xcode] gestion d’une scrollView dans un long formulaire

samedi 27 février 2016

Lorsque vous développez un écran qui comporte un certain nombre de champs à compléter pour un formulaire d’inscription par exemple, il est souvent nécessaire d’y inclure une scrollView car on a pas assez de place pour mettre tous les champs dans l’écran. Dans ce genre de cas, il est aussi nécessaire de gérer cette scrollview lorsque le clavier apparait pour encoder dans les différents champs.

Apple fournit dans sa documentation une manière efficace à utiliser avec les méthodes Insets au lieu d’utiliser le contentsize. Voici le lien ici

Voici comment j’ai gérer ce petit soucis:

Dans viewDidLoad de votre viewController, on créé une scroll view et ensuite:

[self registerForKeyboardNotifications];

Cette méthode permet d’observer quand le clavier est montré et caché.

- (void)registerForKeyboardNotifications
{
  [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWasShown:)
                                                 name:UIKeyboardDidShowNotification object:nil];
  [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(keyboardWillBeHidden:)
                                                 name:UIKeyboardWillHideNotification object:nil];
}

Maintenant, on définit les deux méthodes qui seront appelées lorsque le clavier sera affiché ou retiré de l’écran.

// Called when the UIKeyboardDidShowNotification is sent.
- (void)keyboardWasShown:(NSNotification*)aNotification
{
    if(self.currentTextfield == textfield_city || self.currentTextfield == textfield_birthdate || self.currentTextfield == textfield_email){
        NSDictionary* info = [aNotification userInfo];
        CGSize kbSize = [[info objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue].size;
        CGRect bkgndRect = self.currentTextfield.superview.frame;
        bkgndRect.size.height += kbSize.height;
        [self.currentTextfield.superview setFrame:bkgndRect];
        [myscrollview setContentOffset:CGPointMake(0.0, self.currentTextfield.frame.origin.y-kbSize.height) animated:YES];
    }
}

// Called when the UIKeyboardWillHideNotification is sent
- (void)keyboardWillBeHidden:(NSNotification*)aNotification
{
    UIEdgeInsets contentInsets = UIEdgeInsetsZero;
    myscrollview.contentInset = contentInsets;
    myscrollview.scrollIndicatorInsets = contentInsets;
}

Dans ce cas-ci la variable « currentTextfield » comme son nom l’indique représente le textfield dans lequel on se trouve. Ces deux méthodes s’occupe de centrer le textfield juste au dessus du clavier même si celui-ci était caché par le clavier avant qu’il apparaisse. Dans mon cas à moi, mon formulaire est long et donc c’est seulement sur trois textfield caché par le clavier que j’applique le déplacement du contenu de la scrollview pour permettre de voir correctement le champs qu’on souhaite remplir.

Il bous reste à implémenter les deux méthodes delegate de textfield lorsque l’utilisateur clique sur un champs de type textfield du formulaire.

- (void)textFieldDidEndEditing:(UITextField *)textField
{
    [myscrollview setContentOffset:CGPointZero animated:YES];
}
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
    self.currentTextfield = textField;
}

La première méthode permet de remettre le formulaire correctement lorsqu’on quitte le formulaire qu’on a rempli et la seconde permet juste de sauver le textfield dans lequel on se trouve lorsque le focus est dessus dans la variable « currentTextfield ».

Tags: form , scrollView , textfield , Xcode