iOS App: Arbeiten mit MultiComponent Picker



In diesem Blog geht es darum, eine iOS-App zu erstellen, die die Konvertierung von einer Einheit in eine andere anzeigt. Es beschreibt die Funktionsweise eines Mehrkomponenten-Pickers, Warnungen usw.

Um einen gründlichen Einblick zu erhalten, lesen Sie bitte . Dies ist der zweite Blog der ios App-Reihe.





Wenn Sie ein erfahrener Entwickler sind, der neugierig auf die Arbeitsweise von MultiComponent Picker ist, sind Sie bei uns genau richtig. In diesem Blog werde ich darüber sprechen, wie wir unsere Konvertierungs-App durch die Implementierung eines Mehrkomponenten-Pickers um mehr Funktionen erweitern und wie Sie mithilfe von Warnungen eine außergewöhnliche Behandlung durchführen können.

In demletzter Blog,das haben wir gesehen Wenn wir etwas in das Textfeld eingeben, wird die Tastatur angezeigt. Der zu konvertierende Wert wird in das Textfeld eingegeben und dann sehen wir, dass die Tastatur nicht verschwindet.



Um dieses Problem zu lösen, müssen wir eine Schaltfläche hinzufügen, die die gesamte Ansicht abdeckt. Wenn der Benutzer eine beliebige Stelle im Hintergrund berührt, sollte die Tastatur verschwinden.

Jetzt machen wir es einfach. Ziehen Sie eine Schaltfläche, legen Sie den Typ der Schaltfläche im Attributinspektor als benutzerdefiniert und die Textfarbe als klare Farbe fest.

Attributinspektor



und wählen Sie Editor> Anordnen> Nach hinten senden

Typkonvertierung c ++

und ändern Sie die Größe der Schaltfläche so, dass sie in die gesamte Ansicht passt.

Diese Schaltfläche fungiert jetzt als unsichtbare Hintergrundschaltfläche, auf die geklickt wird, damit die Tastatur verschwindet. Schreiben wir IBAction für dasselbe, wählen Sie den Assistenten-Editor-Modus und steuern Sie + ziehen Sie auf ViewController.h. Setzen Sie die Verbindung auf Aktion und den Namen auf BackgroundButton und klicken Sie auf Verbinden.

Der View Controller Code sieht jetzt so aus.

#import @interface ViewController: UIViewController @property (stark, nichtatomar) IBOutlet UITextField * ValueTextField @property (stark, nichtatomar) IBOutlet UIPickerView * picker2 @property (stark, nichtatomar) NSArray * data @properIL (stark) - (IBAction) Konvertieren: (UIButton *) Absender - (IBAction) backgroundButton: (id) Absender @end

Wechseln Sie zu ViewController.m und schreiben Sie den folgenden Code.

- (IBAction) backgroundButton: (id) Absender {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

Hier weist der Code alle anderen Objekte an, den Ersthelferstatus zu erhalten, wenn eine Berührung erkannt wird. Führen Sie nun die App aus und sehen Sie. Sie werden feststellen, dass die Tastatur verschwindet, wenn Sie den Hintergrund berühren. Rufen Sie nun die backgroundButton-Methode in der didselectRow () -Methode der Auswahl auf, damit die Tastatur nach Abschluss der Eingabe funktioniert. Der Methodencode lautet also wie folgt.

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) Zeile inComponent: (NSInteger) Komponente {selectedValue = _data [Zeile] [self backgroundButton: 0]}

Jetzt können Sie am Verschönerungsteil der App arbeiten, z. B. einen Hintergrund hinzufügen und vielleicht sogar ein ausgefallenes Schaltflächenbild erstellen. In meinem werde ich jedoch ein Hintergrundbild einstellen.
Finden Sie dazu zuerst ein passendes Bild, duh! Fügen Sie es dann dem Ordner Images.xcassets hinzu und ändern Sie das Bild in Universal von 1x auf 2x Bildschirm.

Führen Sie die App aus und prüfen Sie, ob sie ordnungsgemäß funktioniert.

Wenn ich das Gerät auf iPhone 5s ändere.

Und führen Sie die App aus.

Hier können wir sehen, dass alles wie erwartet gut funktioniert. Was wäre, wenn ich meiner Schaltfläche einen Hintergrund hinzufügen und das Erscheinungsbild einer Schaltfläche ähneln möchte? Dazu würde ich zuerst ein IBOutlet für die Konvertierungsschaltfläche zum ViewController.h hinzufügen

@property (stark, nichtatomar) IBOutlet UIButton * convert

Fügen Sie dann den folgenden Code in die viewDidLoad () -Methode ein

self.convert.backgroundColor = [UIColor colorWithRed: 0.4 green: 0.8 blue: 1.0 alpha: 1.0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]

Lassen Sie uns unsere App ausführen und sehen, ob es uns so gefällt.

Ok toll! Sie müssen bemerkt haben, dass ich auch die Positionen des Ergebnislabels geändert habe. Der Grund für die Änderung wird später erläutert.

Wir wissen, dass unsere App nur von Celsius in Fahrenheit konvertiert und umgekehrt. Wie wäre es also mit ein paar weiteren Funktionen oder Einheiten zum Konvertieren? Dazu müssen wir der UIPickerView eine weitere Komponente hinzufügen, die die entsprechende Auswahl bietet, wenn in der ersten Komponente der Auswahl eine Einheit ausgewählt wird.

Um einen Picker in zwei Komponenten zu unterteilen, müssen wir neue NSArray-Daten2 hinzufügen, die die Daten für die zweite Komponente enthalten. Definieren Sie außerdem zwei Konstanten, die unsere beiden Komponenten darstellen. Hier wird die linke Komponente zur Vereinfachung der Programmierung als 0 und die rechte Komponente als 1 deklariert.

Ihre ViewController.h-Datei sieht so aus

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (stark, nichtatomar) IBOutlet UITextField * ValueTextField @property (stark, nichtatomar) IBOutlet UIPickerView * picker2 @property (stark, nichtatomig) stark, nichtatomar) NSArray * data2 @property (stark, nichtatomar) IBOutlet UILabel * ResultLabel @property (stark, nichtatomar) IBOutlet UIButton * convert - (IBAction) Konvertieren: (UIButton *) Absender - (IBAction) backgroundButton: (id) Absender @Ende

Definieren Sie nun das Array data2 in der ViewDidLoad () -Methode. Nachdem wir beide Datenquellen haben, müssen wir in der Lage sein, Code für die Auswahl so zu schreiben, dass bei Auswahl eines Elements aus der ersten Komponente der Auswahl die zweite Komponente automatisch auf den entsprechenden Wert geändert wird. Die zweite Komponente hängt von der Auswahl der ersten ab.
Dazu müssen wir ein Wörterbuch definieren, in dem die Schlüssel und Werte gespeichert werden. Schlüssel enthalten die Daten, die der ersten Komponente des Kommissionierers entsprechen, und Werte enthalten die Daten, die der zweiten Komponente des Kommissionierers entsprechen.

- (void) viewDidLoad {[super viewDidLoad] // Führen Sie nach dem Laden der Ansicht zusätzliche Einstellungen durch, normalerweise von einer Schreibfeder. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nil] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nil] dictionary = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Zentimeter', @ 'Zentimeter', @ 'Meter ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}

Jetzt müssen wir die Datenquelle ändern und die Methoden der aktuellen Auswahl wie folgt delegieren, damit Daten in beide Komponenten gefüllt werden.

- (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) Zeile forComponent: (NSInteger) Komponente {if (Komponente == data1comp) {return [self.data1 objectAtIndex: Zeile]} return [self.data2 objectAtIndex: row]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) Zeile inComponent: (NSInteger) Komponente {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [Wörterbuch objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animiert: YES] [_picker2 reloadComponent: data2comp] selectedRal = Zeile}}

Hier in unserer didSelectRow () -Methode erhalten wir den ausgewählten Wert der ersten Komponente, übergeben ihn dann als Argument an die objectForKey () -Methode des Wörterbuchs und erhalten den entsprechenden Wert für den Schlüssel. Um die entsprechende Position für den Wert im zweiten Array zu finden, d. H. Data2, verwenden wir die indexOfObject () -Methode des Arrays und speichern das Ergebnis in einem ganzzahligen Wert.
Wir übergeben diesen ganzzahligen Wert dann an die Auswahlmethode selectRow: row inComponent: component (). Laden Sie die Komponente der Auswahl mithilfe von reloadComponent () neu.
Sobald wir dies getan haben, wird bei der Auswahl eines Elements aus der ersten Komponente das entsprechende Element in der zweiten Komponente der Auswahl ausgewählt.

Der Code für didSelectRow ()

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) Zeile inComponent: (NSInteger) Komponente {[self backgroundButton: 0] if (Komponente == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [Wörterbuch objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animiert: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = row}}

Führen Sie nun die App aus und prüfen Sie, ob die Auswahl wie erwartet funktioniert.

Voila! Es klappt!

Lassen Sie uns also weiterhin unsere Konvertierungsschaltfläche codieren. Der frühere Picker hatte nur zwei Werte, die mit Celsius und Fahrenheit übereinstimmten, und dann wurde das Ergebnis berechnet. Aber jetzt haben wir vier Werte: Celsius, Fahrenheit, Meter und Zentimeter. Daher habe ich eine switch-Anweisung verwendet, die den Wert basierend auf der ausgewählten Zeilenvariablen berechnet.

- (IBAction) Konvertieren: (UIButton *) Absender {float val = [_ ValueTextField.text floatValue] NSLog-Schalter (@ 'Wert% f', val) (selectedRow) {case 0: // Celsius in Fahrenheit res = (val * 1,8) + 32 Bruchfall 1: // Fahrenheit bis Celsius res = (val-32) / 1,8 Bruchfall 2: // Meter bis Zentimeter res = val * 100 Bruchfall 3: // Zentimeter bis Meter res = Wert * 0,01 Pause Standard: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

Wenn Sie die App ausführen, können wir sehen, dass alles gut funktioniert.

Jetzt können wir nach Ausnahmen suchen, die in unserer App auftreten können. Beispielsweise enthält das Textfeld keinen Wert. Oder wir versuchen, von Celsius in Meter oder Zentimeter umzurechnen, was eigentlich nicht möglich ist. Diese Situationen werden als Ausnahmen bezeichnet, und wir müssen sie vermeiden, indem wir Code schreiben, um solche Fehler zu behandeln.

Lösen wir die erste Art von Fehler, die beim Ausführen unserer Anwendung auftreten kann. Das heißt, wir vermissen es, unseren zu konvertierenden Wert in das Textfeld zu schreiben. In diesem Szenario müssen wir unsere Benutzer benachrichtigen, den Wert einzugeben und dann fortzufahren.

Wir können hierfür die UIAlertView verwenden. Wir können eine Methode namens showAlertWithMessage (NSString *) schreiben. In dieser Methode können wir eine alertView deklarieren und sie schließlich mit der show () -Methode anzeigen. Der Code für die Methode lautet wie folgt.

- (void) showAlertWithMessage: (NSString *) message {UIAlertView * alertView = [[UIAlertView alloc] initWithTitle: @ 'Error' message: Nachrichtendelegierter: self cancelButtonTitle: nil otherButtonTitles: @ 'Okay', nil] alertView.tag = _ResultLabel.text=@'No Result '[alertView show]}

Wenn der Benutzer auf die Schaltfläche 'Konvertieren' klickt, muss diese Methode als Konvertierung bezeichnet werden. Die Konvertierung sollte nicht ohne Eingabe des Wertes erfolgen. In der Methodendefinition für die Konvertierung müssen wir also prüfen, ob die Länge des Textfelds größer oder gleich Null ist oder nicht. Wenn dies der Fall ist, führen Sie die Konvertierung durch, andernfalls wird die Warnung angezeigt. Daher würde der Code der Konvertierungsschaltfläche wie folgt lauten:

- (IBAction) Konvertieren: (UIButton *) Absender {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 } }

Führen Sie nun die App aus und versuchen Sie, auf die Schaltfläche 'Konvertieren' zu klicken, ohne Werte in das Textfeld einzugeben.

Die zweite Art von Ausnahme, die auftreten kann, besteht darin, dass der Wert in der ersten Komponente nicht mit dem Wert in der zweiten Komponente der UIPickerView übereinstimmt. Dazu prüfen wir, ob der aktuell ausgewählte Komponentenzeilenwert der zweiten Komponente dem Wert des Zeilenwerts entspricht, der vom didSelectRow () - Delegaten der Methode zurückgegeben wird. Wenn die Bedingung nicht übereinstimmt, ist die Konvertierung nicht möglich. Wenn die Werte übereinstimmen, kann die Konvertierung durchgeführt werden.

Wir können diese Logik wie folgt implementieren:

- (IBAction) Konvertieren: (UIButton *) Absender {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' } }

Führen Sie nun die App aus und ändern Sie den Wert in der zweiten Komponente, nachdem Sie die Auswahl in der ersten Komponente getroffen haben.

Sie sehen die Fehlermeldung, dass das Ergebnis nicht berechnet werden kann. Sie werden feststellen, dass die Fehlermeldung auf demselben Ergebnisetikett gedruckt wurde und dass die Meldung lang ist. Aus diesem Grund wurde das Etikett von der früheren Ausrichtung nach unten verschoben.

Damit ist unsere Conversion-App abgeschlossen. Sie können der App je nach Ihrer Wahl mehr Funktionen hinzufügen und sie je nach Ihrer Kreativität schöner machen.

Hast du eine Frage an uns? Erwähnen Sie sie im Kommentarbereich und wir werden uns bei Ihnen melden.

Ein Sortieralgorithmus kann verwendet werden, um einen Satz von ________ in ________ Reihenfolge anzuordnen.

Zusammenhängende Posts: