iOS-app: Arbeide med MultiComponent Picker



Denne bloggen handler om å lage en iOS-app som viser konvertering fra en enhet til en annen. Den beskriver hvordan en Mutlicomponent Picker fungerer, varsler etc.

For å få grundig innsikt, vennligst les . Dette er den andre bloggen i iOS-appserien.





Hvis du er en erfaren utvikler som er nysgjerrig på hvordan MultiComponent picker fungerer, har du kommet til riktig blogg. I denne bloggen vil jeg snakke om hvordan vi kan utvide konverteringsappen vår med mer funksjonalitet ved å implementere en multikomponentvelger, og hvordan vi kan utføre eksepsjonell håndtering ved hjelp av varsler.

Isiste blogg,vi har sett det når vi skriver inn noe i tekstfeltet, dukker tastaturet opp. Verdien som skal konverteres skrives i tekstfeltet, og da ser vi at tastaturet ikke forsvinner.



For å løse dette problemet må vi legge til en knapp som dekker hele visningen. Når brukeren berører hvor som helst i bakgrunnen, bør tastaturet forsvinne.

La oss nå gjøre det. Dra en knapp, angi hvilken type knapp som egendefinert og tekstfarge som klar farge fra attributtinspektøren.

Attributter Inspektør



og velg Editor> Arranger> Send Back

og endre størrelse på knappen på en slik måte at den passer til hele visningen.

konverter streng til dato i java

Denne knappen fungerer nå som en usynlig bakgrunn som du klikker på for at tastaturet skal forsvinne. La oss skrive IBAction for det samme, velg assistentredigeringsmodus og kontroll + dra til ViewController.h. Sett tilkoblingen til handling og navn til Bakgrunnsknapp og klikk på koble til.

Visningskontrollkoden ser slik ut nå.

#import @interface ViewController: UIViewController @property (sterk, ikke-atomisk) IBOutlet UITextField * ValueTextField @property (sterk, ikke-atomisk) IBOutlet UIPickerView * picker2 @property (sterk, ikke-atomisk) NSArray * data @property (sterk, nonatomil) - (IBAction) Konverter: (UIButton *) avsender - (IBAction) bakgrunn Knapp: (id) avsender @end

Bytt til ViewController.m og skriv deretter følgende kode.

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

Her forteller koden alle andre objekter å gi den første responderstatusen når en berøring oppdages. Nå, kjør appen og se. Du vil kunne oppdage at tastaturet forsvinner når du berører bakgrunnen. Nå for at tastaturet skal gå når du er ferdig med å skrive, kan du ringe backgroundButton-metoden i didselectRow () -metoden til plukkeren. Så metoden koden vil være som følger.

- (ugyldig) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rad iKomponent: (NSInteger) komponent {selectedValue = _data [row] [self backgroundButton: 0]}

Nå kan du jobbe med forskjønningsdelen av appen, som å legge til en bakgrunn og kanskje til og med gi et fancy knappebilde. Imidlertid, i min, vil jeg sette et bakgrunnsbilde.
For å gjøre det, finn et passende bilde først duh! Deretter legger du den til mappen Images.xcassets og endrer bildet fra 1x til 2x skjerm i universell retning.

Kjør appen og se om den fungerer bra.

Hvis jeg bytter enhet til iPhone 5s.

Og kjør appen.

Her kan vi se at alt fungerer som forventet. Hva om jeg ville legge til en bakgrunn til knappen min og gjøre utseendet mer som en knapp? For å gjøre det, vil jeg først legge til en IBOutlet for konverteringsknappen i ViewController.h

@property (sterk, ikke-atomisk) IBOutlet UIButton * konverter

og legg deretter til følgende kode i viewDidLoad () -metoden

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

La oss kjøre appen vår og se om det er slik vi liker det.

Ok flott! Du må ha lagt merke til at jeg også har endret posisjonen til resultatetiketten, årsaken til endringen er noe jeg vil forklare senere.

Vi vet at appen vår konverterer fra Celsius til Fahrenheit og bare omvendt. Så hva med å legge til noen flere funksjoner eller enheter å konvertere? For å gjøre det, må vi legge til en ekstra komponent i UIPickerView som gir riktig valg når en enhet er valgt i den første komponenten i plukkeren.

For å lage en plukker delt inn i to komponenter, må vi legge til en ny NSArray data2, som vil holde dataene for den andre komponenten. Definer også to konstanter som vil representere våre to komponenter. Her blir den venstre komponenten erklært 0 og den høyre komponenten er erklært 1 for enkelheten i programmeringen.

Din ViewController.h-fil ser ut

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (sterk, nonatomisk data) NSAr sterk, nonatomic) NSArray * data2 @property (sterk, nonatomic) IBOutlet UILabel * ResultLabel @property (strong, nonatomic) IBOutlet UIButton * convert - (IBAction) Convert: (UIButton *) sender - (IBAction) bakgrunn Button: (id) avsender @slutt

Definer nå array data2 i ViewDidLoad () -metoden. Nå som vi har begge datakildene, må vi kunne skrive kode for plukkeren på en slik måte at når vi velger et element fra den første komponenten i plukkeren, skal den andre komponenten automatisk endres til tilsvarende verdi. Den andre komponenten er avhengig av valget av den første.
For dette må vi definere en ordbok som vil lagre nøklene og verdiene. Taster inneholder dataene som tilsvarer den første komponenten i plukkeren, og verdiene inneholder dataene som tilsvarer den andre komponenten i plukkeren.

- (ugyldig) viewDidLoad {[super viewDidLoad] // Gjør noe ekstra oppsett etter at visningen er lastet inn, vanligvis fra en nib. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', null] 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 ')]]}

Nå må vi endre datakilden og delegere metodene til den nåværende velgeren til følgende, slik at vi har data fylt ut i begge komponentene.

- (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]} 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: rad] NSArray * a = [ordbok objektForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] valgt = data2comp] valgt = rad}}

Her i vår didSelectRow () -metode får vi den valgte verdien av den første komponenten, så sender vi den som argument til objectForKey () -metoden i ordboken, og får den tilsvarende verdien for nøkkelen. For å finne den tilsvarende posisjonen for verdien i den andre matrisen, dvs. data2, bruker vi indeksOfObject () -metoden til matrisen og lagrer resultatet i en heltall.
Vi overfører deretter dette heltallverdien til plukkermetoden selectRow: row inComponent: component () -metoden. Og last inn komponenten på plukkeren ved hjelp av reloadComponent ().
Når vi har gjort dette, når vi velger ett element fra den første komponenten, vil det tilsvarende elementet bli valgt i den andre komponenten i plukkeren.

Koden for didSelectRow ()

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) row inComponent: (NSInteger) component {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [ordbok objektForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = row}}

Kjør nå appen og se om plukkeren fungerer som forventet.

forskjellen mellom c c # og c ++

Voila! det fungerer!

Så la oss fortsette å kode vår konverteringsknapp. Den tidligere plukkeren hadde bare to verdier for å matche, dvs. Celsius og Fahrenheit, og deretter ble resultatet beregnet. Men nå har vi fire verdier Celsius, Fahrenheit, Meter og Centimeter. Så jeg har brukt en bryteruttalelse som beregner verdien basert på den valgte radvariabelen.

- (IBAction) Konverter: (UIButton *) avsender {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 kjører appen, kan vi se at alt fungerer bra.

Nå kan vi se etter unntak som kan forekomme i appen vår. For eksempel er det ingen verdi i tekstboksen. Eller vi prøver å konvertere fra Celsius til Meter eller Centimeter, noe som faktisk ikke er mulig. Disse typer situasjoner kalles som unntak, og vi må unngå det ved å skrive kode for å håndtere slike feil.

La oss løse den første typen feil som kan oppstå når vi kjører applikasjonen. Det vil si at vi savner å skrive verdien vår som skal konverteres i tekstfeltet. For dette scenariet må vi varsle brukerne om å angi verdien og deretter fortsette.

Vi kan bruke UIAlertView til dette. Vi kan skrive en metode som heter showAlertWithMessage (NSString *) melding. I denne metoden kan vi erklære en alertView og deretter endelig vise den ved hjelp av metoden show (). Koden for metoden vil være som følger.

- (ugyldig) showAlertWithMessage: (NSString *) melding {UIAlertView * alertView = [[[UIAlertView alloc] initWithTitle: @ 'Error' message: message delegate: self cancelButtonTitle: nil otherButtonTitles: @ 'Okay', null] alertView.tag = 100 _ResultLabel.text=@'Ingen resultat '[alertView show]}

Nå må denne metoden når brukeren klikker på konverteringsknappen kalles som konvertering. Konvertering skal ikke gjøres uten å angi verdien. Så i metodedefinisjonen for konvertering, må vi sjekke om lengden på tekstfeltet er større enn eller lik null eller ikke. Hvis det er, gjør konverteringen, ellers viser varselet. Derfor ville konverteringsknappkoden være som:

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

Kjør nå appen og prøv å klikke på konverteringsknappen uten å skrive inn verdier i tekstfeltet.

Den andre typen unntak som kan oppstå, er hvis verdien i den første komponenten ikke samsvarer med verdien i den andre komponenten i UIPickerView. For dette sjekker vi om den nåværende valgte komponentradverdien til den andre komponenten er lik verdien av radverdien som returneres av metoden didSelectRow (). Hvis tilstanden ikke samsvarer, er ikke konverteringen mulig, og hvis verdiene samsvarer, kan konvertering gjøres.

Vi kan implementere denne logikken som følger,

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

Kjør nå appen og se ved å endre verdien i den andre komponenten etter at du har valgt i den første komponenten.

Du kan se feilmeldingen om at resultatet ikke kan beregnes. Du vil merke at feilmeldingen ble skrevet ut på samme resultatetikett, og at meldingen er lang. Så dette er grunnen til at etiketten ble flyttet ned fra den tidligere retningen.

Så konverteringsappen vår er komplett. Du kan legge til mer funksjonalitet i appen i henhold til ditt valg og gjøre den vakrere i henhold til kreativiteten din.

Har du et spørsmål til oss? Nevn dem i kommentarfeltet, så kommer vi tilbake til deg.

Relaterte innlegg: