iOS-i rakendus: töötamine mitmekomponendilise valijaga



See ajaveeb käsitleb iOS-i rakenduse loomist, mis kuvab konversiooni ühest ühikust teise. See kirjeldab mutrikomponentide valija tööd, märguandeid jne.

Põhjaliku ülevaate saamiseks lugege palun . See on ios-rakenduste sarja teine ​​ajaveeb.





Kui olete kogenud arendaja, kes on uudishimulik mitme komponendi valija töö pärast, olete jõudnud õigesse ajaveebi. Selles blogis räägin sellest, kuidas laiendada meie teisendusrakendust suurema funktsionaalsusega, rakendades mitmekomponendilist valijat, ning ka sellest, kuidas hoiatuste abil erakordset käitlemist teha.

Aastalviimane ajaveeb,me oleme seda näinud kui kirjutame tekstiväljale midagi, hüppab üles klaviatuur. Teisendatav väärtus sisestatakse tekstiväljale ja näeme, et klaviatuur ei kao kuhugi.



Selle probleemi lahendamiseks peame lisama kogu vaadet hõlmava nupu. Kui kasutaja puudutab suvalist tausta, peaks klaviatuur kaduma.

Nüüd lähme edasi ja teeme seda. Lohistage nuppu, määrake atribuutide inspektorilt nupu tüüp kohandatud ja teksti värv selge värv.

Atribuudid inspektor



ja valige Redaktor> Korrasta> Saada tagasi

ja muutke nupu suurust nii, et see sobiks kogu vaatega.

See nupp toimib nüüd taustal nähtamatu nupuna, millele klõpsatakse klaviatuuri kadumiseks. Kirjutame selle jaoks IBActioni, valige abiredaktori režiim ja juhtige + lohistage ViewControllerile.h. Määrake Connection to Action ja nimeks BackgroundButton ja klõpsake connect.

Vaate kontrolleri kood näeb nüüd välja selline.

#import @interface ViewController: UIViewController @property (tugev, mitteatoomiline) IBOutlet UITextField * ValueTextField @property (tugev, mitteatoomiline) IBOutlet UIPickerView * picker2 @property (tugev, mitteatoomiline) NSArray * data @property (tugev, nonatom) - (IBAction) teisendamine: (UIButton *) saatja - (IBAction) taust Nupp: (id) saatja @end

Lülitage ViewController.m-i ja kirjutage järgmine kood.

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

Siin käsib kood kõigil teistel objektidel puudutuse tuvastamisel anda esimese vastaja oleku. Nüüd käivitage rakendus ja vaadake. Kui klõpsate taustal, saate klaviatuuri kaduda. Nüüd, kui klaviatuur töötab, kui olete kirjutamise lõpetanud, helistage valija didselectRow () meetodil backgroundButton. Nii et meetodi kood on järgmine.

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rida komponendis: (NSInteger) komponent {selectedValue = _data [rida] [self backgroundButton: 0]}

Nüüd saate töötada rakenduse ilustamise osas, näiteks lisada tausta ja võib-olla isegi anda uhke nupupildi. Kuid minu oma panen taustpildi.
Selleks leidke kõigepealt sobiv pilt! Seejärel lisage see kausta Images.xcassets ja muutke pilt universaalsel ekraanil 1x-lt 2x-le.

Käivitage rakendus ja vaadake, kas see töötab hästi.

Kui ma vahetan seadme iphone 5-ks.

Ja käivitage rakendus.

Siin näeme, et kõik töötab ootuspäraselt hästi. Mis siis teha, kui ma tahaksin oma nupule tausta lisada ja muuta väljanägemise sarnasemaks nupule? Selleks lisaksin kõigepealt ViewController.h-le teisendamise nupu IBOutlet.h

@property (tugev, mitteatoomiline) IBOutlet UIButton * teisenda

ja seejärel lisage järgmine kood meetodisse viewDidLoad ()

self.convert.backgroundColor = [UIColor colorWithRed: 0,4 roheline: 0,8 sinine: 1,0 alfa: 1,0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]

Käivitame oma rakenduse ja vaatame, kas see on nii, nagu meile meeldib.

java meetodist välja murda

Okei tore! Olete kindlasti märganud, et olen muutnud ka tulemuse sildi positsioone, muudatuse põhjus on see, mida ma hiljem selgitan.

Me teame, et meie rakendus teisendab Celsiuse järgi Fahrenheiti ja ainult vastupidi. Kuidas oleks teisendamiseks lisada veel mõned funktsioonid või ühikud? Selleks peame lisama UIPickerView'le veel ühe komponendi, mis annab sobiva valiku, kui valija esimeses komponendis on valitud üksus.

Kaheks komponendiks jagatud valija tegemiseks peame lisama uue NSArray andmed2, mis hoiab teise komponendi andmeid. Samuti määrake kaks konstanti, mis esindavad meie kahte komponenti. Siin deklareeritakse vasak komponent 0 ja parem komponent 1 programmeerimise lihtsuse huvides.

Teie fail ViewController.h näeb välja selline

#import # define data1comp 0 # define data2comp 1 @ interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic1) NSApray tugev, mitteatoomiline) NSArray * data2 @property (tugev, mitteatoomiline) IBOutlet UILabel * ResultLabel @property (tugev, mitteatoomiline) IBOutlet UIButton * teisenda - (IBAction) teisenda: (UIButton *) saatja - (IBAction) taustanupp: (id) saatja @lõpp

Nüüd määrake massiiv data2 meetodis ViewDidLoad (). Nüüd, kui meil on mõlemad andmeallikad, peame suutma kirjutaja jaoks koodi kirjutada nii, et kui valime valija esimesest komponendist üksuse, peaks teine ​​komponent automaatselt vastavaks väärtuseks muutuma. Teine komponent sõltub esimese valikust.
Selleks peame määratlema sõnastiku, kuhu salvestatakse võtmed ja väärtused. Klahvid sisaldavad valija esimesele komponendile vastavaid andmeid ja väärtused valija teisele komponendile vastavaid andmeid.

- (void) viewDidLoad {[super viewDidLoad] // Tehke pärast vaate laadimist täiendavad seadistused, tavaliselt nibalt. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', null) andmed2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', null] sõnastik = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', null] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageName: (@' bg2.png ')]]}

Nüüd peame muutma praeguse valija andmeallika ja delegeerima järgmised meetodid, nii et meil oleks mõlemad komponendid täidetud.

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) komponent {if (komponent == data1compata) {tagastab [ise.dat [ise.andmete2 arv]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) rida komponendile: (NSInteger) komponent {if (komponent == data1comp) {return [ise.andmed1 objektAtIndex: rida]} return [ise.andmed2 objectAtIndex: rida]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rida komponendis: (NSInteger) komponent {[self backgroundButton: 0] if (komponent == data1comp) {NSString * data11 = [_ data1 objectAtIndex: rida] NSArray * a = [dictionary objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponentReaded data2comp] = rida}}

Siin meetodis didSelectRow () saame esimese komponendi valitud väärtuse, seejärel edastame selle argumendina sõnaraamatu meetodile objectForKey () ja saame võtmele vastava väärtuse. Teise massiivi väärtuse vastava positsiooni leidmiseks, st andmed2, kasutame massiivi meetodit indexOfObject () ja salvestame tulemuse täisarvu.
Seejärel edastame selle täisarvu meetodile picker method selectRow: row inComponent: komponent (). Ja laadige valija komponent reloadComponent () abil uuesti.
Kui oleme selle teinud, valime esimesest komponendist ühe elemendi, valitakse vastav element valija teises komponendis.

DidSelectRow () kood

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rida komponendis: (NSInteger) komponent {[self backgroundButton: 0] if (komponent == data1comp) {NSString * data11 = [_ data1 objectAtIndex * rida] NSArray a = [sõnastiku objectForKey: data11] secondrow = [ise.andmed2 registerOfObject: a] [_picker2 selectRow: sekundeerige sisseKomponent: data2comp animeeritud: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 valitudRida = rida}}

Käivitage nüüd rakendus ja vaadake, kas korjaja töötab ootuspäraselt.

Voila! see töötab!

Nii et jätkame teisendamisnupu kodeerimist. Varasemal valijal oli ainult kaks väärtust, mis vastavad Celsiuse ja Fahrenheiti väärtustele, ja seejärel arvutati tulemus. Nüüd on meil neli väärtust Celsius, Fahrenheit, Meter ja Centimeter. Seega olen kasutanud lülitilauset, mis arvutab väärtuse valitud rea muutuja põhjal.

- (IBAction) teisendamine: (UIButton *) saatja {float val = [_ ValueTextField.text floatValue] NSLogi (@ 'väärtus% f', val) lüliti (valitudRida) {juhtum 0: // Celsiuse järgi Fahrenheiti res = (val * 1.8) + 32 murrangujuhtumit 1: // Fahrenheiti ja Celsiuse vahel res = (val-32) / 1,8 murdjuhtumit 2: // meeter-sentimeeter res = val * 100 murd-juhtum 3: // sentimeeter-meeter res = val * 0,01 murd vaikimisi: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

kui käivitate rakenduse, näeme, et kõik töötab hästi.

Nüüd saame kontrollida, kas meie rakenduses võib esineda erandeid. Näiteks pole tekstikastis väärtust. Või proovime teisendada Celsiuse järgi meetriks või sentimeetriks, mis pole tegelikult võimalik. Seda tüüpi olukordi nimetatakse eranditeks ja me peame seda vältima, kirjutades koodi selliste vigade lahendamiseks.

Lahendagem esimest tüüpi vead, mis võivad ilmneda meie rakenduse käivitamisel. See tähendab, et me ei suuda oma väärtust teisendada tekstiväljale. Selle stsenaariumi jaoks peame oma kasutajaid hoiatama, et nad sisestaksid väärtuse ja jätkaksid seejärel.

Selleks saame kasutada UIAlertView'd. Saame kirjutada meetodi, mille nimi on showAlertWithMessage (NSString *). Selles meetodis saame deklareerida alertView ja seejärel lõpuks näidata () meetodi abil show (). Meetodi kood on järgmine.

- (void) showAlertWithMessage: (NSString *) teade {UIAlertView * alertView = [[UIAlertView eraldus] initWithTitle: @ 'Viga' sõnum: sõnumi delegaat: self cancelButtonTitle: pole ühtegi muudButtonTitles: @ 'Okei, null] alertView.tag = _ResultLabel.text=@ 'Tulemit pole' [alertView show]}

Nüüd tuleb seda meetodit, kui kasutaja klõpsab nupul Teisenda, nimetada konversiooniks. Teisendamist ei tohiks teha ilma väärtust sisestamata. Nii et teisendamise meetodi määratluses peame kontrollima, kas tekstivälja pikkus on suurem või võrdne nulliga või mitte. Kui see on siis tehke teisendamine, kuvage muul juhul hoiatus. Seetõttu oleks teisendamisnupu kood selline:

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

Nüüd käivitage rakendus ja proovige klõpsata nupul Teisenda ilma tekstiväljale väärtusi sisestamata.

Teist tüüpi erandid, mis võivad ilmneda, on see, kui esimese komponendi väärtus ei ühti UIPickerView teise komponendi väärtusega. Selleks kontrollime, kas teise komponendi valitud valitud komponendi rea väärtus on võrdne rea väärtuse väärtusega, mille tagastas meetodi didSelectRow () delegaat. Kui tingimus ei klapi, siis pole teisendamine võimalik ja kui väärtused vastavad, saab teisendada.

Saame seda loogikat rakendada järgmiselt,

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

Nüüd käivitage rakendus ja vaadake, muutes väärtust teises komponendis pärast valiku tegemist esimeses komponendis.

Näete tõrketeadet, et tulemust ei saa arvutada. Märkate, et veateade trükiti samasse tulemuse silti ja sõnum on pikk. Seetõttu viidi silt varasemast suunast alla.

Niisiis, meie teisendusrakendus on valmis. Rakendusele saate lisada rohkem funktsioone vastavalt teie valikule ja muuta see vastavalt oma loovusele ilusamaks.

Kas teil on meile küsimus? Mainige neid kommentaaride jaotises ja me võtame teiega ühendust.

Seonduvad postitused:

mida tähendab nimeruum c ++