iOS-sovellus: Monikomponenttivalitsimen käyttö



Tässä blogissa on kyse iOS-sovelluksen luomisesta, joka näyttää muunnoksen yksiköstä toiseen. Siinä kuvataan peruskomponenttivalitsimen, hälytysten jne. Toimintaa.

Saadaksesi perusteellisen käsityksen, lue . Tämä on ios-sovellussarjan toinen blogi.





Jos olet kokenut kehittäjä, joka on utelias MultiComponent-valitsimen toiminnasta, olet tullut oikeaan blogiin. Tässä blogissa puhun siitä, kuinka muuntosovellustamme voidaan laajentaa entistä enemmän toiminnallisuudella ottamalla käyttöön monikomponenttinen valitsin, ja myös siitä, miten poikkeuksellinen käsittely tapahtuu hälytysten avulla.

vuonnaviimeinen blogi,olemme nähneet sen kun kirjoitamme jotain tekstikenttään, näppäimistö ponnahtaa esiin. Muunnettava arvo kirjoitetaan tekstikenttään ja näemme, että näppäimistö ei mene pois.



Tämän ongelman ratkaisemiseksi meidän on lisättävä painike, joka kattaa koko näkymän. Kun käyttäjä koskettaa mitä tahansa taustaa, näppäimistön pitäisi kadota.

Tehdään nyt ja tehdään se. Vedä painiketta, aseta painikkeen tyyppi mukautetuksi ja tekstin väri kirkkaaksi määritteen tarkastajasta.

Attribuuttien tarkastaja



ja valitse Editor> Arrange> Send to Back

ja muuta painikkeen kokoa siten, että se sopii koko näkymään.

Tämä painike toimii nyt taustalla näkymättömänä painikkeena, jota napsautetaan, jotta näppäimistö katoaa. Kirjoitetaan IBAction samalle, valitse avustajaeditorin tila ja ohjaa + vedä ViewControlleriin. H. Määritä Yhteydeksi Toiminnoksi ja nimeksi Taustapainike ja napsauta Yhdistä.

aseta java-polku ikkunoihin

Näkymäohjaimen koodi näyttää nyt tältä.

#import @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray * data @property (vahva, ei-atominen) - (IBAction) Muunna: (UIButton *) lähettäjä ((IBAction) backgroundButton: (id) lähettäjä @end

Vaihda ViewController.m: iin ja kirjoita sitten seuraava koodi.

- (IBAction) backgroundButton: (id) lähettäjä [[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

Tässä koodi käskee kaikkia muita objekteja antamaan ensimmäisen vastaajan tilan, kun kosketus havaitaan. Suorita nyt sovellus ja katso. Voit huomata, että näppäimistö menee pois, kun kosketat taustaa. Nyt kun näppäimistö menee, kun olet kirjoittanut, kutsu backgroundButton-menetelmää valitsimen didselectRow () -menetelmässä. Joten menetelmän koodi on seuraava.

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rivi inComponent: (NSInteger) komponentti {selectedValue = _data [rivi] [itse taustaPainike: 0]}

Nyt voit työskennellä sovelluksen kaunistamisosassa, kuten lisätä tausta ja ehkä jopa antaa hienon painikekuvan. Minussa kuitenkin asetetaan taustakuva.
Voit tehdä sen etsimällä sopivan kuvan ensin! Lisää sitten se kansioon Images.xcassets ja vaihda kuva 1x: stä 2x-näyttöön universaalina.

Suorita sovellus ja katso, toimiiko se hyvin.

Jos vaihdan laitteen iPhone 5s: ksi.

Ja aja sovellus.

Täällä voimme nähdä, että kaikki toimii hyvin odotetusti. Entä jos haluan lisätä taustan painikkeeseen ja tehdä ulkonäöstä enemmän kuin painike? Voit tehdä sen lisäämällä ensin muunnospainikkeen IBOutletin ViewController.h-tiedostoon

@property (vahva, ei-atominen) IBOutlet UIButton * muunna

ja lisää sitten seuraava koodi viewDidLoad () -menetelmään

self.convert.backgroundColor = [UIColor colorWithRed: 0.4 vihreä: 0.8 sininen: 1.0 alfa: 1.0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]

Suorita sovelluksemme ja katso, onko se niin kuin pidämme siitä.

Okei hienoa! Olet varmasti huomannut, että olen muuttanut myös tulosleiman sijaintia, selitän myöhemmin muutoksen syyn.

Tiedämme, että sovelluksemme muuntuu Celsiuksesta Fahrenheitiksi ja vise-versa. Joten, entä muutaman muun toiminnon tai yksikön lisääminen muunnettavaksi? Tätä varten meidän on lisättävä vielä yksi komponentti UIPickerView: iin, joka antaa sopivan valinnan, kun yksikkö valitaan valitsimen ensimmäiseen komponenttiin.

Tehdäkseen valitsimen, joka on jaettu kahteen komponenttiin, meidän on lisättävä uusi NSArray data2, joka pitää sisällään toisen komponentin tiedot. Määritä myös kaksi vakiota, jotka edustavat kahta komponenttia. Vasen komponentti ilmoitetaan tässä 0 ja oikea komponentti 1 ohjelmoinnin yksinkertaisuuden vuoksi.

ViewController.h-tiedosto näyttää tältä

#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 NSA) vahva, ei-atominen) NSArray * data2 @property (vahva, ei-atominen) IBOutlet UILabel * ResultLabel @ominaisuus (vahva, ei-atominen) IBOutlet UIB-painike * muunna - (IBAction) Muunna: (UIButton *) lähettäjä - (IBAction) taustaPainike: (id) lähettäjä @end

Määritä nyt taulukon data2 ViewDidLoad () -menetelmässä. Nyt kun meillä on molemmat tietolähteet, meidän on pystyttävä kirjoittamaan koodi valitsimelle siten, että kun valitsemme kohteen valitsimen ensimmäisestä komponentista, toisen komponentin tulisi muuttua automaattisesti vastaavaksi arvoksi. Toinen komponentti riippuu ensimmäisen valinnasta.
Tätä varten meidän on määriteltävä sanakirja, joka tallentaa avaimet ja arvot. Avaimet sisältävät tiedot, jotka vastaavat valitsimen ensimmäistä komponenttia, ja arvot sisältävät tiedot, jotka vastaavat valitsimen toista komponenttia.

- (void) viewDidLoad {[super viewDidLoad] // Tee lisäasetukset näkymän lataamisen jälkeen, yleensä kärjestä. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nolla] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nolla] sanakirja = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nolla] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}}

Nyt meidän on muutettava nykyisen valitsimen tietolähde ja delegoitava menetelmät seuraaviksi, jotta tiedot täytetään molemmissa komponenteissa.

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) komponentti {if (komponentti == data1compata) {palauta [itse} palauttaa {palauta [itse}. [itse.tietojen määrä]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) rivi komponentille: (NSInteger) komponentti {if (komponentti == data1comp) {return [itse.data1 objectAtIndex: rivi]} return [itse.data2 objectAtIndex: rivi]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rivi komponentissa: (NSInteger) komponentti {[self backgroundButton: 0] if (komponentti == data1comp) {NSString * data11 = [_ data1 objectAtIndex: rivi] NSArray * a = [sanakirja objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: toinen sarake komponentissa: data2comp animoitu: KYLLÄ] [_picker2 reloadComponentValittu data: data2comp] = rivi}}

Tässä didSelectRow () -menetelmässämme saamme valitun ensimmäisen komponentin arvon, sitten välitämme sen argumenttina sanakirjan objectForKey () -menetelmälle ja haemme vastaavan arvon avaimelle. Löydämme vastaavan sijainnin arvolle toisesta taulukosta eli datasta2 käytämme taulukon indexOfObject () -menetelmää ja tallennamme tuloksen kokonaislukuarvoon.
Sitten välitämme tämän kokonaisluvun valitsimen menetelmä selectRow: row inComponent: komponentti () -menetelmälle. Lataa ladattavan komponentti uudelleen reloadComponent () -ohjelmalla.
Kun olemme tehneet tämän, kun valitsemme yhden kohteen ensimmäisestä komponentista, vastaava kohde valitaan valitsimen toiseen komponenttiin.

miten käyttää aws cli

DidSelectRow () -koodi

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) rivi inComponent: (NSInteger) komponentti {[self backgroundButton: 0] if (komponentti == data1comp) {NSString * data11 = [_ data1 objectAtIndex * rivi] NSArray a = [sanakirja objectForKey: data11] secondrow = [itse.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 valittuRivi = rivi}}

Suorita nyt sovellus ja katso, toimiiko poimija odotetulla tavalla.

Voila! se toimii!

Joten jatka muunnospainikkeen koodaamista. Aikaisemmalla poimijalla oli vain kaksi arvoa, jotka sopivat yhteen eli Celsius ja Fahrenheit, ja sitten tulos laskettiin. Mutta nyt meillä on neljä arvoa Celsius, Fahrenheit, Meter ja Centimeter. Joten olen käyttänyt kytkinlauseketta, joka laskee arvon valitun rivimuuttujan perusteella.

- (IBAction) Muunna: (UIButton *) lähettäjä {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) -kytkin (selectedRow) {tapaus 0: // Celsius Fahrenheit res = (val * 1.8) + 32murtotapaus 1: // Fahrenheit - Celsius res = (val-32) / 1,8 murtotapaus 2: // Mittari - senttimetri res = val * 100 rikkoutumistapa 3: // Senttimetri - metri res = val * 0,01 tauko oletus: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = lopullinen}

jos käytät sovellusta, voimme nähdä, että kaikki toimii hyvin.

Nyt voimme tarkistaa sovelluksessamme esiintyviä poikkeuksia. Esimerkiksi tekstikentässä ei ole arvoa. Tai yritämme muuntaa Celsiuksesta metriin tai senttimetriin, mikä ei todellakaan ole mahdollista. Tämän tyyppisiä tilanteita kutsutaan poikkeuksiksi, ja meidän on vältettävä sitä kirjoittamalla koodi tällaisten virheiden käsittelemiseksi.

Ratkaistaan ​​ensimmäinen virhe, joka voi ilmetä, kun suoritamme sovellustamme. Toisin sanoen kaipaamme kirjoittaa muunnettavaa arvoa tekstikenttään. Tätä skenaariota varten meidän on varoitettava käyttäjiä syöttämään arvo ja jatkamaan sitten.

Voimme käyttää UIAlertView-ohjelmaa tähän. Voimme kirjoittaa menetelmä nimeltä showAlertWithMessage (NSString *) -sanoman. Tässä menetelmässä voimme julistaa alertView: n ja sitten näyttää sen lopuksi show () -menetelmällä. Menetelmän koodi on seuraava.

- (void) showAlertWithMessage: (NSString *) -viesti {UIAlertView * alertView = [[UIAlertView-allokointi] initWithTitle: @ 'Virhe' -viesti: viestin edustaja: itse peruutaButtonTitle: nolla muutaButtonTitles: @ 'Okei, nolla] alertView.tag = _ResultLabel.text=@'Ei tulosta '[alertView show]}

Nyt tämä menetelmä, kun käyttäjä napsauttaa Muunna-painiketta, on kutsuttava muunnokseksi. Muunnosta ei tule tehdä syöttämättä arvoa. Joten muunnettavan menetelmän määritelmässä on tarkistettava, onko tekstikentän pituus suurempi tai yhtä suuri kuin nolla vai ei. Jos se on sitten muunnos, näytä muuten hälytys. Siksi muuntopainikkeen koodi olisi kuin:

- (IBAction) Muunna: (UIButton *) lähettäjä {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 } }

Suorita nyt sovellus ja yritä napsauttaa Muunna-painiketta syöttämättä arvoja tekstikenttään.

Toinen mahdollinen poikkeustyyppi on, jos ensimmäisen komponentin arvo ei ole sama kuin UIPickerView: n toisen komponentin arvo. Tätä varten tarkistamme, onko toisen komponentin nykyinen valittu komponenttiriviarvo yhtä suuri kuin menetelmän didSelectRow () -delegaatin palauttama riviarvon arvo. Jos ehto ei täsmää, muunnos ei ole mahdollista ja jos arvot vastaavat, muunnos voidaan tehdä.

Voimme toteuttaa tämän logiikan seuraavasti:

- (IBAction) Muunna: (UIButton *) lähettäjä {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' } }

Suorita nyt sovellus ja katso muuttamalla toisen komponentin arvoa, kun olet tehnyt valinnan ensimmäisessä komponentissa.

Näet virhesanoman, että tulosta ei voida laskea. Huomaat, että virheilmoitus on tulostettu samaan tulosetikettiin ja että viesti on pitkä. Joten tästä syystä tarra siirrettiin alaspäin aiemmasta suunnasta.

Joten muuntosovelluksemme on valmis. Voit lisätä sovellukseen lisää toimintoja valintasi mukaan ja tehdä siitä kauniimman luovuutesi mukaan.

Onko sinulla kysymys meille? Mainitse ne kommenttiosassa ja palaamme sinuun.

Aiheeseen liittyvät julkaisut: