iPhone and Go

Tutorial: creiamo un’applicazione dotata di slider e switch. Per: “cresciamo insieme” [n.1]

Terzo articolo per il "concorso : cresciamo insieme" n.1
Scritto da Luca Pirrello

In questo tutorial andremo ad analizzare le principali caratteristiche di un’applicazione dotata di switches (interruttori) e elidersi (oggetti di trascinamento).

Apriamo xCode e sotto la voce “File” nella Menu Bar andiamo a selezionare la voce “New Project”, scegliamo una “View-Based Application” e diamole il nome di “Slider_Switch”.

Cerchiamo un’immagine di nostro gradimento di piccole dimensioni e trasciniamola nel progetto xCode sulla prima voce della lista “Slider_Switch” e, rilasciandola, apparirà la finestra che domanderà se aggiungere o meno il file, clicchiamo su “Add” e il file apparirà all’interno del nostro progetto.

Apriamo il file “MainWindow.xib” e si presenterà l’applicazione Interface Builder con le tre finestre di default (Window, Library e Attributes): scorriamo nella Library e trasciniamo il simbolo UIView sulla finestra Window e facciamo la stessa cosa con un UIImageView, un UISwitch e un UISlider posizionandoli in questo modo:

Spostiamoci nella finestra Attributes e selezioniamo il quarto tab chiamato “Identity” e modifichiamo il nome di UIView in “MyView” (ricordo che prima dobbiamo selezionarla), spostiamoci più in basso e aggiungiamo due nuove Class Action cliccando sul “+” e le nominiamo rispettivamente “ModificaSlider” e “SliderAbilitato”;

sotto la voce Class Outlets andremo ad aggiungere tre elementi chiamati “immagine” modificandone l’id con UIImageView, “slider” cambiando l’id in UISlider e “interruttore” con id UISwitch.

Nella finestra Window ora selezioniamo l’UIImageView e nella finestra Attributes spostiamoci al primo tab e selezioniamo una “image” dal menù a tendina sotto la voce Image View; l’immagine scelta all’inizio apparirà all’interno di UIImageView.
Selezioniamo lo Slider e nello stesso tab della finestra Attributes compariranno tre valori sotto la voce Slider: lasciamo il minimo a 0,00, impostiamo il massimo a 200,00 e quelo iniziale a 100,00.

Selezioniamo ora la UIView e spostiamoci al secondo tab della finestra Attributes, clicchiamo sul cerchio accanto alla voce “immagine” e trasciniamo il puntatore su UIImageView, facciamo lo stesso per “interruttore” trascinando su UISwitch e con “slider” trascinando su UISlider; ripetiamo lo stesso procedimento con la voce “SliderAbilitato” poco più in basso trascinando il cursore su UISwitch e selezionando “Value Changed” dal menù che comparirà e ripetiamo il procedimento con “ModificaSlider” trascinando su UISlider e selezionando sempre “Value Changed”.

Fatto ciò salviamo il file e andiamo su “File > Write Class Files…” e selezioniamo la cartella del nostro progetto; e alla comparsa di questa finestra assicuriamo ci che l’applicazione sia selezionata e clicchiamo su “Add”.

Ora troveremo i due file “MyView.h” e “MyView.m” nel nostro progetto xCode

Apriamo il file con estensione .h e modifichiamone il codice sottolineato come riportato in seguito:
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>

@interface MyView : UIView {
IBOutlet UIImageView *immagine;
IBOutlet UISlider *slider;
IBOutlet UISwitch *interruttore;
CGPoint punto;
}
- (IBAction)SliderAbilitato;
- (IBAction)ModificaSlider;
@end

apiamo poi il file .m e modifichiamolo nel seguente modo:
#import “MyView.h”

@implementation MyView
- (IBAction)SliderAbilitato {
if (interruttore.on == TRUE)
[slider setEnabled:TRUE];
else
[slider setEnabled:FALSE];
}

- (IBAction)ModificaSlider {
punto.y = 105.0;
punto.x = slider.value;

[immagine setCenter:punto];
}
@end

NOTA: il valore che segue “punto.y =” varia a seconda dell’altezza della vostra immagine, per trovare il vostro valore dovete andare in Interface Builder, selezionare UIImageView e andare nel terzo tab della finestra Attributes dove sono riportati i valori di posizione dell’immagine
come qui sotto:

Salviamo il file in Interface Builder ed il progetto xCode e clicchiamo su Build and Go; il simulatore si avvierà e voi avrete scritto la vostra applicazione basata su slider e switch!

Via http://www.iphonedevcentral.org/tutorials.php?page=ViewTutorial&id=31&uid=44022839

iPhoneandGo - Lodu - iphoneandgo@gmail.com