Pour avoir un aperçu complet, veuillez lire . Ceci est le deuxième blog de la série d'applications iOS.
Si vous êtes un développeur expérimenté et curieux de connaître le fonctionnement du sélecteur MultiComponent, vous êtes sur le bon blog. Dans ce blog, je parlerai de la façon d'étendre notre application de conversion avec plus de fonctionnalités en implémentant un sélecteur à plusieurs composants, et aussi comment effectuer une gestion exceptionnelle à l'aide d'alertes.
dans ledernier blog,nous avons vu que lorsque nous tapons quelque chose dans le champ de texte, le clavier apparaît. La valeur à convertir est saisie dans le champ de texte, puis on voit que le clavier ne disparaît pas.
Pour résoudre ce problème, nous devons ajouter un bouton qui couvre toute la vue. Lorsque l'utilisateur touche n'importe où sur l'arrière-plan, le clavier doit disparaître.
Maintenant, allons-y et faisons-le. Faites glisser un bouton, définissez le type de bouton comme personnalisé et la couleur du texte comme couleur claire à partir de l'inspecteur d'attributs.
et sélectionnez Editeur> Réorganiser> Envoyer à l'arrière
et redimensionnez le bouton de manière à ce qu'il s'adapte à la vue entière.
Ce bouton agit maintenant comme un bouton invisible d'arrière-plan sur lequel on clique pour que le clavier disparaisse. Écrivons IBAction pour le même, sélectionnez le mode éditeur assistant et contrôlez + faites glisser vers le ViewController.h. Définissez la connexion sur Action et le nom sur BackgroundButton et cliquez sur se connecter.
Le code du contrôleur de vue ressemble à ceci maintenant.
#import @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray * data @property (strong, nonatomic) IBOutlet Uabel - (IBAction) Convertir: (UIButton *) expéditeur - (IBAction) backgroundButton: (id) sender @end
Basculez vers ViewController.m, puis écrivez le code suivant.
- (IBAction) backgroundButton: (id) expéditeur {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}Ici, le code indique à tous les autres objets de donner le statut de premier répondeur lorsqu'un contact est détecté. Maintenant, exécutez l'application et voyez. Vous pourrez constater que le clavier disparaît lorsque vous touchez l'arrière-plan. Maintenant, pour que le clavier disparaisse lorsque vous avez fini de taper, appelez la méthode backgroundButton dans la méthode didselectRow () du sélecteur. Le code de la méthode sera donc le suivant.
- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component {selectedValue = _data [row] [self backgroundButton: 0]}Maintenant, vous pouvez travailler sur la partie embellissement de l'application, comme ajouter un arrière-plan et peut-être même donner une image de bouton fantaisie. Cependant, dans le mien, je vais définir une image de fond.
Pour ce faire, trouvez d'abord une image appropriée! Ensuite, ajoutez-le au dossier Images.xcassets et changez l'image de 1x à 2x en écran universel.
Exécutez l'application et voyez si cela fonctionne correctement.
comment utiliser le navigateur db pour sqlite
Si je change d'appareil en iphone 5s.
Et exécutez l'application.
Ici, nous pouvons voir que tout fonctionne bien comme prévu. Maintenant, que faire si je voulais ajouter un arrière-plan à mon bouton et faire ressembler davantage à un bouton? Pour ce faire, j'ajouterais d'abord un IBOutlet pour le bouton de conversion au ViewController.h
@property (fort, non atomique) IBOutlet UIButton * convert
puis ajoutez le code suivant dans la méthode viewDidLoad ()
self.convert.backgroundColor = [UIColor colorWithRed: 0,4 vert: 0,8 bleu: 1,0 alpha: 1,0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]
Lançons notre application et voyons si c'est comme ça que nous l'aimons.
D'accord, super! Vous devez avoir remarqué que j'ai également changé les positions de l'étiquette de résultat, la raison du changement est quelque chose que j'expliquerai plus tard.
Nous savons que notre application convertit de Celsius en Fahrenheit et vice-versa uniquement. Alors, que diriez-vous d'ajouter quelques fonctions ou unités supplémentaires à convertir? Pour ce faire, nous devons ajouter un composant supplémentaire à UIPickerView qui donne la sélection appropriée, lorsqu'une unité est sélectionnée dans le premier composant du sélecteur.
Pour créer un sélecteur divisé en deux composants, nous devons ajouter un nouveau NSArray data2, qui contiendra les données du deuxième composant. Définissez également deux constantes qui représenteront nos deux composants. Ici, le composant gauche est déclaré 0 et le composant droit est déclaré 1 pour la simplicité de la programmation.
Votre fichier ViewController.h ressemble à
#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray (data1 *) strong, nonatomic) NSArray * data2 @property (strong, nonatomic) IBOutlet UILabel * ResultLabel @property (strong, nonatomic) IBOutlet UIButton * convert - (IBAction) Convertir: (UIButton *) sender - (IBAction) backgroundButton: (id) sender @fin
Définissez maintenant le tableau data2 dans la méthode ViewDidLoad (). Maintenant que nous avons les deux sources de données, nous devons être en mesure d'écrire du code pour le sélecteur de telle sorte que lorsque nous sélectionnons un élément dans le premier composant du sélecteur, le deuxième composant devrait automatiquement être remplacé par la valeur correspondante. Le deuxième composant dépend de la sélection du premier.
Pour cela, nous devons définir un dictionnaire qui stockera les clés et les valeurs. Les clés contiennent les données correspondant au premier composant du sélecteur et les valeurs contiennent les données correspondant au deuxième composant du sélecteur.
- (void) viewDidLoad {[super viewDidLoad] // Effectuez toute configuration supplémentaire après le chargement de la vue, généralement à partir d'une pointe. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nil] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nil] dictionary = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}À présent, nous devons modifier la source de données et déléguer les méthodes du sélecteur actuel comme suit, afin que les données soient remplies dans les deux composants.
- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) component {if (component == data1comp) {return [self.data1 count]} [self.data2 count]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) row forComponent: (NSInteger) component {if (component == data1comp) {return [self.data1 objectAtIndex: row]} return [self.data2 objectAtIndex: row]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [dictionnaire objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: OUI] [_picker2 reloadComponent selectedValowRow: données2comp. = ligne}}Ici, dans notre méthode didSelectRow (), nous obtenons la valeur sélectionnée du premier composant, puis nous la passons en argument à la méthode objectForKey () du dictionnaire, et obtenons la valeur correspondante pour la clé. Pour trouver la position correspondante pour la valeur dans le deuxième tableau, c'est-à-dire data2, nous utilisons la méthode indexOfObject () du tableau et stockons le résultat dans une valeur entière.
Nous passons ensuite cette valeur entière à la méthode de sélection selectRow: row inComponent: component () method. Et rechargez le composant du sélecteur en utilisant reloadComponent ().
Une fois que nous avons fait cela, comme nous sélectionnons un élément du premier composant, l'élément correspondant sera sélectionné dans le deuxième composant du sélecteur.
Le code de didSelectRow ()
- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [dictionnaire objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: OUI] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = row}}Exécutez maintenant l'application et voyez si le sélecteur fonctionne comme prévu.
Voila! Ça marche!
Continuons donc à coder notre bouton de conversion. Le sélecteur précédent n'avait que deux valeurs pour correspondre à savoir Celsius et Fahrenheit, puis le résultat a été calculé. Mais maintenant, nous avons quatre valeurs Celsius, Fahrenheit, Meter et Centimeter. J'ai donc utilisé une instruction switch, qui calcule la valeur en fonction de la variable de ligne sélectionnée.
- (IBAction) Convertir: (UIButton *) expéditeur {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) switch (selectedRow) {case 0: // Celsius en Fahrenheit res = (val * 1.8) + 32break case 1: // Fahrenheit to Celsius res = (val-32) /1.8break case 2: // Meter to Centimeter res = val * 100 break case 3: // Centimeter to Meter res = val * 0.01 break par défaut: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}si vous exécutez l'application, nous pouvons voir que tout fonctionne bien.
Maintenant, nous pouvons vérifier les exceptions qui peuvent se produire dans notre application. Par exemple, il n'y a aucune valeur dans la zone de texte. Ou nous essayons de convertir de Celsius en mètre ou en centimètre, ce qui n'est en fait pas possible. Ces types de situation sont appelés exceptions et nous devons l'éviter en écrivant du code pour gérer de telles erreurs.
Résolvons le premier type d'erreur qui peut survenir lorsque nous exécutons notre application. Autrement dit, nous manquons d'écrire notre valeur à convertir dans le champ de texte. Pour ce scénario, nous devons alerter nos utilisateurs pour entrer la valeur puis continuer.
Nous pouvons utiliser UIAlertView pour cela. Nous pouvons écrire une méthode nommée showAlertWithMessage (NSString *) message. Dans cette méthode, nous pouvons déclarer un alertView puis l'afficher finalement à l'aide de la méthode show (). Le code de la méthode sera le suivant.
- (void) showAlertWithMessage: (NSString *) message {UIAlertView * alertView = [[UIAlertView alloc] initWithTitle: @ Message d'erreur: délégué de message: self cancelButtonTitle: nil otherButtonTitles: @ 'Okay', nil] alertView.tag = 100 _ResultLabel.text=@ 'Aucun résultat' [alertView show]}Maintenant, cette méthode lorsque l'utilisateur clique sur le bouton de conversion doit être appelée comme conversion. La conversion ne doit pas être effectuée sans entrer la valeur. Donc, dans la définition de la méthode pour convertir, nous devons vérifier si la longueur du champ de texte est supérieure ou égale à zéro ou non. Si c'est le cas, effectuez la conversion, sinon affichez l'alerte. Par conséquent, le code du bouton de conversion serait comme:
- (IBAction) Convertir: (UIButton *) expéditeur {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { float res=0.0 float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } }Maintenant, lancez l'application et essayez de cliquer sur le bouton de conversion sans entrer de valeurs dans le champ de texte.
Le deuxième type d'exception qui pourrait se produire est si la valeur du premier composant ne correspond pas à la valeur du deuxième composant de UIPickerView. Pour cela, nous vérifions si la valeur actuelle de la ligne du composant sélectionné du deuxième composant est égale à la valeur de la valeur de la ligne renvoyée par le délégué didSelectRow () de la méthode. Si la condition ne correspond pas, la conversion n'est pas possible et si les valeurs correspondent, la conversion peut être effectuée.
Nous pouvons implémenter cette logique comme suit,
- (IBAction) Convertir: (UIButton *) expéditeur {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { _ResultLabel.textColor= [UIColor blackColor] float res=0.0 NSInteger n =[_picker2 selectedRowInComponent:data2comp] if(n==secondrow) { float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } else { // code for displaying error. _ResultLabel.textColor= [UIColor redColor] _ResultLabel.text = @'Result cannot be calculated' } }Maintenant, exécutez l'application et voyez en modifiant la valeur dans le deuxième composant après avoir effectué la sélection dans le premier composant.
Vous pouvez voir le message d'erreur indiquant que le résultat ne peut pas être calculé. Vous remarquerez que le message d'erreur a été imprimé dans la même étiquette de résultat et que le message est long. C'est pourquoi l'étiquette a été déplacée vers le bas par rapport à l'orientation précédente.
Donc, notre application de conversion est terminée. Vous pouvez ajouter plus de fonctionnalités à l'application en fonction de votre choix et la rendre plus belle en fonction de votre créativité.
quel est le cadre de printemps
Vous avez une question pour nous? Mentionnez-les dans la section commentaires et nous vous recontacterons.
Articles Similaires: