App iOS: lavorare con MultiComponent Picker



Questo blog riguarda la creazione di un'app ios che mostra la conversione da un'unità all'altra. Descrive il funzionamento di un selettore di componenti multipli, avvisi ecc.

Per ottenere una visione approfondita, leggi . Questo è il secondo blog della serie di app ios.





Se sei uno sviluppatore esperto che è curioso del funzionamento del selettore MultiComponent, sei arrivato nel blog giusto. In questo blog, parlerò di come estendere la nostra app di conversione con più funzionalità implementando un selettore multicomponente e anche di come eseguire una gestione eccezionale utilizzando gli avvisi.

Nelultimo blog,l'abbiamo visto quando digitiamo qualcosa nel campo di testo, viene visualizzata la tastiera. Il valore da convertire viene digitato nel campo di testo e quindi vediamo che la tastiera non scompare.



Per risolvere questo problema dobbiamo aggiungere un pulsante che copre l'intera vista. Quando l'utente tocca un punto qualsiasi dello sfondo, la tastiera dovrebbe scomparire.

php crea array da string

Ora andiamo avanti e facciamolo. Trascina un pulsante, imposta il tipo di pulsante come personalizzato e il colore del testo come colore chiaro dall'ispettore attributi.

Ispettore attributi



e seleziona Editor> Disponi> Porta in secondo piano

e ridimensionare il pulsante in modo che si adatti all'intera visualizzazione.

Questo pulsante ora funge da pulsante invisibile sullo sfondo su cui si fa clic per far scomparire la tastiera. Scriviamo IBAction per lo stesso, seleziona la modalità assistente editor e control + trascina su ViewController.h. Imposta la connessione su Azione e il nome su BackgroundButton e fai clic su Connetti.

Il codice del controller di visualizzazione ora ha questo aspetto.

#import @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSArray * data @property (strong, nonatomicLabel) IBOutLabel * IBOutLabel - (IBAction) Converti: (UIButton *) sender - (IBAction) backgroundButton: (id) sender @end

Passare a ViewController.m e quindi scrivere il codice seguente.

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

Qui il codice indica a tutti gli altri oggetti di fornire lo stato del primo risponditore quando viene rilevato un tocco. Ora esegui l'app e guarda. Sarai in grado di scoprire che la tastiera scompare quando tocchi lo sfondo. Ora affinché la tastiera funzioni quando hai finito di digitare, chiama il metodo backgroundButton nel metodo didselectRow () del selettore. Quindi il codice del metodo sarà il seguente.

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

Ora puoi lavorare sulla parte di abbellimento dell'app, come aggiungere uno sfondo e magari anche dare un'immagine di pulsante fantasia. Tuttavia, nel mio, imposterò un'immagine di sfondo.
Per fare ciò, trova prima un'immagine appropriata duh! Quindi aggiungilo alla cartella Images.xcassets e cambia l'immagine da 1x a 2x schermo in universale.

Esegui l'app e verifica se funziona correttamente.

Se cambio il dispositivo in iPhone 5s.

Ed esegui l'app.

Qui possiamo vedere che tutto funziona correttamente come previsto. E se volessi aggiungere uno sfondo al mio pulsante e rendere l'aspetto più simile a un pulsante? Per fare ciò, aggiungerei prima un IBOutlet per il pulsante di conversione a ViewController.h

@property (forte, non atomico) IBOutlet UIButton * convert

e quindi aggiungere il codice seguente nel metodo viewDidLoad ()

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

Eseguiamo la nostra app e vediamo se è come ci piace.

Ok fantastico! Avrai notato che ho cambiato anche le posizioni dell'etichetta del risultato, il motivo del cambiamento è qualcosa che spiegherò in seguito.

Sappiamo che la nostra app converte solo da Celsius a Fahrenheit e viceversa. Quindi, che ne dici di aggiungere poche altre funzioni o unità da convertire? Per fare ciò, dobbiamo aggiungere un altro componente a UIPickerView che fornisce la selezione appropriata, quando un'unità viene selezionata nel primo componente del selettore.

Per rendere un selettore diviso in due componenti, dobbiamo aggiungere un nuovo NSArray data2, che conterrà i dati per il secondo componente. Inoltre, definisci due costanti che rappresenteranno i nostri due componenti. Qui, il componente sinistro è dichiarato 0 e il componente destro è dichiarato 1 per semplicità di programmazione.

Il tuo file ViewController.h ha il seguente aspetto

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (strong, nonatomic) IBOutlet UITextField * ValueTextField @property (strong, nonatomic) IBOutlet UIPickerView * picker2 @property (strong, nonatomic) NSproperty * data1 strong, nonatomic) NSArray * data2 @property (strong, nonatomic) IBOutlet UILabel * ResultLabel @property (strong, nonatomic) IBOutlet UIButton * convert - (IBAction) Convert: (UIButton *) sender - (IBAction) backgroundButton: (id) sender @fine

Ora definisci l'array data2 nel metodo ViewDidLoad (). Ora che abbiamo entrambe le origini dati, dobbiamo essere in grado di scrivere il codice per il selettore in modo tale che quando selezioniamo un elemento dal primo componente del selettore, il secondo componente dovrebbe essere automaticamente modificato nel valore corrispondente. Il secondo componente dipende dalla selezione del primo.
Per questo, dobbiamo definire un dizionario che memorizzerà le chiavi e i valori. Le chiavi contengono i dati corrispondenti al primo componente del selettore e i valori contengono i dati corrispondenti al secondo componente del selettore.

come implementare la lista collegata in c
- (void) viewDidLoad {[super viewDidLoad] // Esegue qualsiasi configurazione aggiuntiva dopo aver caricato la vista, in genere da un pennino. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centimeter', nil] data2 = [NSArray arrayWithObjects: @ 'Centimeter', @ 'Meter', @ 'Fahrenheit', @ 'Celsius', nil] dizionario = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centimeter', @ 'Centimeter', @ 'Meter ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}

Ora, dobbiamo modificare l'origine dati e delegare i metodi del selettore corrente al seguente, in modo da avere i dati compilati in entrambi i componenti.

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) component {if (component == data1comp) {return [self.data1 count]} 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) riga inComponent: (NSInteger) component {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [dictionary objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animated: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedValue = row}}

Qui nel nostro metodo didSelectRow (), otteniamo il valore selezionato del primo componente, quindi lo passiamo come argomento al metodo objectForKey () del dizionario e otteniamo il valore corrispondente per la chiave. Per trovare la posizione corrispondente per il valore nel secondo array, ovvero data2, utilizziamo il metodo indexOfObject () dell'array e memorizziamo il risultato in un valore intero.
Passiamo quindi questo valore intero al metodo di selezione selectRow: row inComponent: component (). E ricaricare il componente del selettore usando reloadComponent ().
Fatto ciò, mentre selezioniamo un elemento dal primo componente, l'elemento corrispondente verrà selezionato nel secondo componente del selettore.

Il codice per didSelectRow ()

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

Ora esegui l'app e verifica se il selettore funziona come previsto.

Ecco! Funziona!

Quindi continuiamo a codificare il nostro pulsante di conversione. Il selettore precedente aveva solo due valori da abbinare, ovvero Celsius e Fahrenheit, quindi il risultato è stato calcolato. Ma ora abbiamo quattro valori Celsius, Fahrenheit, Metro e Centimetro. Quindi ho usato un'istruzione switch, che calcola il valore in base alla variabile di riga selezionata.

- (IBAction) Converti: (UIButton *) sender {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) switch (selectedRow) {case 0: // Celsius to Fahrenheit res = (val * 1.8) + 32break caso 1: // Fahrenheit to Celsius res = (val-32) /1.8break case 2: // Metro to Centimeter res = val * 100 break case 3: // Centimetro to Meter res = val * 0.01 break impostazione predefinita: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

se esegui l'app, possiamo vedere che tutto funziona correttamente.

Ora possiamo verificare le eccezioni che possono verificarsi nella nostra app. Ad esempio, non è presente alcun valore nella casella di testo. Oppure stiamo cercando di convertire da Celsius a Metro o Centimetro, il che in realtà non è possibile. Questi tipi di situazioni sono chiamati come eccezioni e dobbiamo evitarlo scrivendo codice per gestire tali errori.

Cerchiamo di risolvere il primo tipo di errore che può verificarsi quando eseguiamo la nostra applicazione. Cioè, ci manca di scrivere il nostro valore da convertire nel campo di testo. Per questo scenario, dobbiamo avvisare i nostri utenti di inserire il valore e quindi procedere.

Possiamo usare UIAlertView per questo. Possiamo scrivere un metodo denominato showAlertWithMessage (NSString *) message. In questo metodo, possiamo dichiarare un alertView e quindi visualizzarlo finalmente utilizzando il metodo show (). Il codice per il metodo sarà il seguente.

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

Ora questo metodo quando l'utente fa clic sul pulsante di conversione deve essere chiamato come conversione. La conversione non deve essere eseguita senza immettere il valore. Quindi, nella definizione del metodo per convert, dobbiamo verificare se la lunghezza del campo di testo è maggiore o uguale a zero oppure no. In tal caso, eseguire la conversione, altrimenti visualizzare l'avviso. Pertanto, il codice del pulsante di conversione sarebbe come:

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

Ora esegui l'app e prova a fare clic sul pulsante di conversione senza inserire valori nel campo di testo.

Il secondo tipo di eccezione che potrebbe verificarsi è se il valore nel primo componente non corrisponde al valore nel secondo componente di UIPickerView. Per questo, controlliamo se il valore corrente della riga del componente selezionato del secondo componente è uguale al valore del valore della riga restituito dal delegato didSelectRow () del metodo. Se la condizione non corrisponde, la conversione non è possibile e se i valori corrispondono, la conversione può essere eseguita.

Possiamo implementare questa logica come segue,

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

Ora esegui l'app e osserva modificando il valore nel secondo componente dopo aver effettuato la selezione nel primo componente.

Puoi vedere il messaggio di errore che il risultato non può essere calcolato. Noterai che il messaggio di errore è stato stampato nella stessa etichetta del risultato e che il messaggio è lungo. Quindi questo è il motivo per cui l'etichetta è stata spostata verso il basso rispetto all'orientamento precedente.

Quindi, la nostra app di conversione è completa. Puoi aggiungere più funzionalità all'app in base alla tua scelta e renderla più bella secondo la tua creatività.

Hai domande per noi? Menzionateli nella sezione commenti e vi risponderemo.

Post correlati: