iOS-app: Arbejde med MultiComponent Picker



Denne blog handler om at oprette en iOS-app, der viser konvertering fra en enhed til en anden. Det beskriver arbejdet med en Mutlicomponent Picker, Alerts osv.

Læs venligst for at få en grundig indsigt . Dette er den anden blog i iOS-app-serien.





Hvis du er en erfaren udvikler, der er nysgerrig efter, hvordan MultiComponent picker fungerer, er du kommet til den rigtige blog. I denne blog vil jeg tale om, hvordan vi udvider vores konverteringsapp med mere funktionalitet ved at implementere en multikomponentvælger, og også hvordan man udfører ekstraordinær håndtering ved hjælp af alarmer.

Isidste blog,det har vi set når vi skriver noget i tekstfeltet, vises tastaturet. Den værdi, der skal konverteres, er skrevet i tekstfeltet, og så ser vi, at tastaturet ikke forsvinder.



For at løse dette problem skal vi tilføje en knap, der dækker hele visningen. Når brugeren rører et vilkårligt sted i baggrunden, skal tastaturet forsvinde.

Lad os nu gå videre og gøre det. Træk en knap, indstil typen af ​​knap som brugerdefineret og tekstfarve som klar farve fra attributinspektøren.

Attributter Inspektør



og vælg Editor> Arranger> Send tilbage

og ændre størrelsen på knappen på en sådan måde, at den passer til hele visningen.

Denne knap fungerer nu som en usynlig baggrundsknap, der klikkes for at tastaturet skal forsvinde. Lad os skrive IBAction til det samme, vælg assistent editor-tilstand og kontrol + træk til ViewController.h. Indstil forbindelsen til handling og navn til baggrundsknap, og klik på Opret forbindelse.

View-controller-koden ser sådan ud nu.

#import @interface ViewController: UIViewController @property (stærk, ikke-atomisk) IBOutlet UITextField * ValueTextField @property (stærk, ikke-atomisk) IBOutlet UIPickerView * picker2 @property (stærk, ikke-atomisk) NSArray * data @property (stærk, nonatomisk) - (IBAction) Konverter: (UIButton *) afsender - (IBAction) baggrund Button: (id) afsender @end

Skift til ViewController.m, og skriv derefter følgende kode.

def __init__ python
- (IBAction) backgroundButton: (id) afsender {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

Her fortæller koden alle andre objekter at give den første responderstatus, når der registreres et tryk. Kør nu appen og se. Du vil kunne finde ud af, at tastaturet forsvinder, når du rører ved baggrunden. For at tastaturet skal gå, når du er færdig med at skrive, skal du ringe til backgroundButton-metoden i didselectRow () -metoden i vælgeren. Så metodekoden vil være som følger.

- (ugyldigt) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) række iKomponent: (NSInteger) komponent {valgtValue = _data [række] [selv baggrundButton: 0]}

Nu kan du arbejde på forskønnelsesdelen af ​​appen, som at tilføje en baggrund og måske endda give et smukt knapbillede. Imidlertid vil jeg indstille et baggrundsbillede i min.
For at gøre det skal du først finde et passende billede duh! Føj det derefter til mappen Images.xcassets, og skift billedet fra 1x til 2x skærm i universel retning.

Kør appen og se om den fungerer fint.

Hvis jeg skifter enheden til iphone 5s.

Og kør appen.

Her kan vi se, at alt fungerer fint som forventet. Hvad nu hvis jeg ville føje en baggrund til min knap og gøre udseendet mere som en knap? For at gøre det vil jeg først tilføje en IBOutlet til konverteringsknappen til ViewController.h

@property (stærk, ikke-atomisk) IBOutlet UIButton * konvertere

og tilføj derefter følgende kode i metoden viewDidLoad ()

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

Lad os køre vores app og se, om det er sådan, vi kan lide det.

Ok godt! Du må have bemærket, at jeg også har ændret placeringen af ​​resultatetiketten. Årsagen til ændringen er noget, jeg vil forklare senere.

Vi ved, at vores app konverterer kun fra Celsius til Fahrenheit og kun omvendt. Så hvad med at tilføje nogle få flere funktioner eller enheder, der skal konverteres? For at gøre det skal vi tilføje endnu en komponent til UIPickerView, der giver det passende valg, når en enhed er valgt i den første komponent i plukkeren.

For at gøre en vælger opdelt i to komponenter, skal vi tilføje en ny NSArray data2, som indeholder dataene til den anden komponent. Definer også to konstanter, der repræsenterer vores to komponenter. Her er den venstre komponent erklæret 0, og den højre komponent er erklæret 1 for enkelheden ved programmering.

Din ViewController.h-fil ser ud

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (stærk, nonatomisk) NSAr stærk, ikke-atomisk) NSArray * data2 @ ejendom (stærk, ikke-atomisk) IBOutlet UILabel * ResultatLabel @ ejendom (stærk, ikke-atomisk) IBOutlet UIButton * konverter - (IBAction) Konverter: (UIButton *) afsender - (IBAction) baggrund Knapp: (id) afsender @ende

Definer nu array-data2 i ViewDidLoad () -metoden. Nu hvor vi har begge datakilderne, skal vi være i stand til at skrive kode til plukkeren på en sådan måde, at når vi vælger et element fra den første komponent i plukkeren, skal den anden komponent automatisk ændres til den tilsvarende værdi. Den anden komponent er afhængig af valget af den første.
Til dette er vi nødt til at definere en ordbog, der gemmer nøglerne og værdierne. Nøgler indeholder de data, der svarer til den første komponent i vælgeren, og værdierne indeholder de data, der svarer til den anden komponent i vælgeren.

- (ugyldigt) viewDidLoad {[super viewDidLoad] // Udfør yderligere opsætning efter indlæsning af visningen, typisk fra en nib. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nul] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nul] ordbog = [NSDictionary ordbogWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nul] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}

Nu skal vi ændre datakilden og delegere metoderne for den aktuelle vælger til følgende, så vi har data udfyldt i begge komponenter.

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) component {if (component == data1comp) {return [} [self.data2 count]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) row forComponent: (NSInteger) component {if (component == data1comp) {return [self.data1 objectAtIndex: row]} returnere [self.data2 objectAtIndex: række]} - (ugyldig) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) række iKomponent: (NSInteger) komponent {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: række] NSArray * a = [ordbog objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] valgt = dataalternativ = række}}

Her i vores didSelectRow () -metode får vi den valgte værdi af den første komponent, så sender vi den som argument til objektForKey () -metoden i ordbogen og får den tilsvarende værdi for nøglen. For at finde den tilsvarende position for værdien i det andet array dvs. data2 bruger vi indexOfObject () -metoden i arrayet og gemmer resultatet i en heltal.
Vi videregiver derefter dette heltalsværdi til picker-metoden selectRow: row inComponent: component () -metoden. Og genindlæs komponenten af ​​plukkeren ved hjælp af reloadComponent ().
Når vi har gjort dette, når vi vælger et element fra den første komponent, vælges det tilsvarende element i den anden komponent i vælgeren.

Koden til didSelectRow ()

- (ugyldigt) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) række iKomponent: (NSInteger) komponent {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [ordbog objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = row}}

Kør nu appen og se, om plukkeren fungerer som forventet.

Voila! det virker!

Så lad os fortsætte med at kode vores konverteringsknap. Den tidligere vælger havde kun to værdier til at matche, dvs. Celsius og Fahrenheit, og derefter blev resultatet beregnet. Men nu har vi fire værdier Celsius, Fahrenheit, Meter og Centimeter. Så jeg har brugt en switch-sætning, der beregner værdien baseret på den valgte rækkevariabel.

- (IBAction) Konverter: (UIButton *) afsender {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) switch (selectedRow) {case 0: // Celsius to Fahrenheit res = (val * 1.8) + 32 break 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 standard: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

hvis du kører appen, kan vi se, at alt fungerer fint.

Nu kan vi tjekke for undtagelser, der kan forekomme i vores app. For eksempel er der ingen værdi i tekstfeltet. Eller vi prøver at konvertere fra Celsius til Meter eller Centimeter, hvilket faktisk ikke er muligt. Disse typer af situationer kaldes undtagelser, og vi skal undgå det ved at skrive kode for at håndtere sådanne fejl.

Lad os løse den første slags fejl, der kan opstå, når vi kører vores applikation. Det vil sige, vi savner at skrive vores værdi, der skal konverteres i tekstfeltet. I dette scenario skal vi advare vores brugere om at indtaste værdien og derefter fortsætte.

Vi kan bruge UIAlertView til dette. Vi kan skrive en metode med navnet showAlertWithMessage (NSString *) besked. I denne metode kan vi erklære en alertView og derefter endelig vise den ved hjælp af metoden show (). Koden for metoden vil være som følger.

- (ugyldigt) showAlertWithMessage: (NSString *) meddelelse {UIAlertView * alertView = [[UIAlertView alloc] initWithTitle: @ 'Error' message: message delegate: self cancelButtonTitle: nul otherButtonTitles: @ 'Okay', nul] alertView.tag = 100 _ResultLabel.text=@'Int resultat '[alertView show]}

Nu skal denne metode, når brugeren klikker på konverteringsknappen, kaldes som konvertering. Konvertering bør ikke ske uden at indtaste værdien. Så i metodedefinitionen til konvertering skal vi kontrollere, om længden af ​​tekstfeltet er større end eller lig med nul eller ej. Hvis det er, skal du udføre konverteringen, ellers skal du vise advarslen. Derfor ville konverteringsknapkoden være som:

Java-kode for at afslutte programmet
- (IBAction) Konverter: (UIButton *) afsender {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 } }

Kør nu appen, og prøv at klikke på konverteringsknappen uden at indtaste værdier i tekstfeltet.

Den anden undtagelsestype, der kan forekomme, er, hvis værdien i den første komponent ikke stemmer overens med værdien i den anden komponent i UIPickerView. Til dette kontrollerer vi, om den aktuelle valgte komponentrækkeværdi for den anden komponent er lig med værdien for rækkeværdien, der returneres af metoden didSelectRow (). Hvis betingelsen ikke stemmer overens, er konverteringen ikke mulig, og hvis værdierne stemmer overens, kan konvertering udføres.

Vi kan implementere denne logik som følger,

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

Kør nu appen og se ved at ændre værdien i den anden komponent, når du foretager valget i den første komponent.

Du kan se fejlmeddelelsen, at resultatet ikke kan beregnes. Du vil bemærke, at fejlmeddelelsen blev udskrevet i den samme resultatetiket, og at meddelelsen er lang. Så dette er grunden til, at etiketten blev flyttet ned fra den tidligere retning.

Så vores konverteringsapp er komplet. Du kan tilføje mere funktionalitet til appen efter dit valg og gøre den smukkere i henhold til din kreativitet.

Har du et spørgsmål til os? Nævn dem i kommentarfeltet, så vender vi tilbage til dig.

Relaterede indlæg: