Come prima cosa andiamo a creare il nostro progetto, scegliendo come template View-based application, nominiamo il progetto a piacimento e salviamolo.

Ora dobbiamo scegliere un’immagine (quella che caricheremo nella view) e portarla nel progetto: per fare ciò, prendere  e trascinate il file che avete selezionato dentro l’Xcode, nella cartella “Resources” (non dimenticare di selezionare lo spunta su : “Copy items into destination’s group …” così il file verra’ copiato all’interno della cartella del vostro progetto.

Il prossimo passaggio sarà l’inserimento del codice necessario a visualizzare un’immagine nella view senza ricorrere all’utilizzo dell’interface Builder. Utilizzeremo il file “nomeprogetto”ViewController.m e andremo nella funzione “viewDidLoad” come segue:

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];
// creiamo su variabile myImageRect lo spazio rettangolare dove inserire l'immagine
	CGRect myImageRect = CGRectMake(0.0f, 0.0f, 320.0f, 80.0f);
// assegniamo lo spazio myImageRect alla variabile myImage
	UIImageView *myImage = [[UIImageView alloc] initWithFrame:myImageRect];
// carichiamo l'immagine di nome book1.png
	[myImage setImage:[UIImage imageNamed:@"book1.png"]];
	myImage.opaque = YES;
// carichiamo nella view l'immagine
	[self.view addSubview:myImage];
	[myImage release];
}

Per voi iPhoneandGo.

Oggi, a distanza di 5 giorni dall’ultimo giorno dell’anno creeremo una piccola applicazione per iPhone (o iPad) che calcolerà ogni giorno, quanti giorni mancano al 31 e ci mostrerà sia un’immagine appropriata (una mano) con il numero di giorni mancanti, che (una volta chiusa l’applicazione) un’icona con l’aggiunta del simbolo numerico dei giorni restanti.

Iniziamo con il creare la nostra applicazione: File -> New Project -> View Based Application (come template) e premiamo -> choose

A questo punto diamo un nome alla nostra applicazione e salviamola dove meglio crediamo: nel mio caso ho scelto il nome “SimboloNumerico”.

Come prima cosa dobbiamo importare le immagini grafiche che ho usato nell’applicazione (potete fare con immagini vostre se volete seguire il tutorial) oppure scaricare le immagini mie dal seguente link.

Le immagini sono: le 6 immagini della mano con le indicazione dei diversi giorni, l’icona del programma, e un immagine con l’indicazione di “Happy new year 2011″.

Per importare le immagini nella nostra applicazione basterà trascinarle dalla cartella dove le avete salvate, dentro la cartella “resources” che si trova nel progetto, dopodiche’ spuntare il check “Copy items in destination’s group” che ci permette di fare una copia di tutte le immagini dentro il nostro progetto e premere il pulsante:”Add”.

A questo punto e’ il momento di creare prima la nostra interfaccia grafica:

Premiamo sul file “SimboloNumericoViewController.xib” che si trova dentro la cartella “resources” cosi facendo si aprira’ il programma Interface Builder che permettera’ di gestire la view grafica della nostra applicazione.

Ora dobbiamo inserire 2 immagini: una per le immagini delle mani e una per l’augurio. Il componente che si trova sulla libreria si chiama “image View” e non dovremo far altro che premere e trascinarlo all’interno della nostra view (maschera principale del nostro programma).

A questo punto solo per l’immagine degli auguri andate sulla view degli attributi e selezionate nel campo “image”, il nome del file:”Happy.png”.

Fatto tutto questo, salviamo il file: File -> Save.

Ora torniamo nel nostro XCode e cominciamo a scrivere il codice. Come prima cosa andiamo a definire la variabile che si dovra’ legare all’immagine della mano che permettera’ il cambio dell’immagine a seconda dei giorni restanti, e la variabile che terrà il conteggio della differenza dei giorni. Apriamo il file : SimboloNumeroViewController.h e inseriamo il seguente codice.

#import <UIKit/UIKit.h>

@interface SimboloNumericoViewController : UIViewController {
 // variabile immagine mano
 IBOutlet UIImageView *immagineSfondo;
 // variabile differenza giorni
 NSInteger differenza;
}

// definisce metodi getter and setter
@property (assign) NSInteger differenza;
@property (nonatomic,retain) IBOutlet UIImageView *immagineSfondo;

@end

A questo punto salviamo e andiamo a caricare il file di implementazione “SimboloNumeroViewController.m” dove al carivamento della view calcoleremo quanti giorni mancano al 31 dicembre come segue.

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	NSDate *today = [NSDate date];
	NSCalendar *gregorian = [[NSCalendar alloc]
							 initWithCalendarIdentifier:NSGregorianCalendar];
	NSDateComponents *weekdayComponents =
	[gregorian components:(NSDayCalendarUnit) fromDate:today];

       // calcola quanto manca al 31.
	differenza = 31 - ([weekdayComponents day]);

	// cambia immagine di sfondo
	switch (differenza) {
		case 0:
			immagineSfondo.image = [UIImage imageNamed:@"zero.png"];
			break;
		case 1:
			immagineSfondo.image = [UIImage imageNamed:@"uno.png"];
			break;
		case 2:
			immagineSfondo.image = [UIImage imageNamed:@"due.png"];
			break;
		case 3:
			immagineSfondo.image = [UIImage imageNamed:@"tre.png"];
			break;
		case 4:
			immagineSfondo.image = [UIImage imageNamed:@"quattro.png"];
			break;
		case 5:
			immagineSfondo.image = [UIImage imageNamed:@"cinque.png"];
			break;
	}

	[gregorian release];
    [super viewDidLoad];
}

Con il codice non abbiamo finito… ora dobbiamo fare ciò che ci siamo preposti, ovvero assegnare il simbolo numerico all’icona all’uscita del programma.

Per fare quasto andiamo sul file delegate : “SimboloNumericoAppDelegate.m” e inseriamo il codice badge cosi come illutrato:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

    // Override point for customization after application launch.

    // Add the view controller's view to the window and display.
    [window addSubview:viewController.view];
    [window makeKeyAndVisible];

	[application setApplicationIconBadgeNumber:viewController.differenza];

    return YES;
}

La parte di codice e’ finita.

Non ci resta adesso che legare l’immagine delle mani nell’interface builder con la variabile “immaginiSfondo” che abbiamo assegnato. Per fare ciò portiamoci ancora sull’interface builder e tenendo premuto il tasto “CTRL” ci portiamo sopra il file’s owner e premendo il mouse trasciniamoci sopra l’immagine della mano (dovrebbe apparire una freccia). Una volta sopra molliamo il tasto del mouse e il Ctrl; apparirà un menu a discesa dove scegliere la variabile “immaginiSfondo”.

Non ci resta che salvare il file -> save, tornare all’XCode e compilare il nostro programma. Se tutto sarà funzionato a dovere dovremmo vedere il numero di giorni al 31 dicembre rappresentato da una mano con le dite alzate e una volta chiusa l’applicazione, l’indicazione dei numeri sull’icona dell’app.

Se volete, potete scaricare il codice sorgente che ho sviluppato al seguente link.

Per voi iPhoneandGo.

In questo nuovo tutorial si andrà a implementare una canzone che verrà usata come sottofondo alla nostra applicazione.

1) Creiamo un progetto e aggiungiamo tutto quello che ci serve

Andiamo su Gamesalad, clicchiamo su Blank e poi su choose.
Creiamo 2 scene e clicchiamo su initial scene.
Andiamo ad aggiungere un immagine quindi clicchiamo Images e clicchiamo su questo pulsante :

Scegliamo un immagine (possibilmente 480×360), se volete potete scegliere questa :

Dovremmo ottenere una schermata così :

Creiamo un attore cliccando su questo pulsante :

e trasciniamo la nostra immagine sull’attore. Adesso trasciniamo il nostro attore sull’immagine prinicipale :

Ora passiamo alla scena 1, aggiungiamo un immagine cliccando su images e su questo pulsante :

Se volete potete prendere questa immagine :

Adesso aggiungiamo un attore e trasciniamo la nostra immagine su di esso. Trasciniamo l’attore sull’immagine principale, dovremmo ottenere una schermata così :

Ora aggiungiamo una canzone, per fare ciò bisogna cliccare su Audio e su questo pulsante :

Scegliamo una canzone che abbiamo nel nostro Mac (io ho scelto Indietro di Tiziano Ferro).

Ora definiamo l’attore 2 così :

Adesso proviamo la nostra applicazione cliccando sul pulsante Preview.

questo è un tutorial realizzato da :

Se ci sono problemi ecco il mio progetto : MusicGameSalad

Ecco a voi il secondo tutorial by Riccardo Danzo.

Per chi non lo sapesse GameSalad è un software (un insieme di strumenti) necessari a creare velocemente, in semplicita’ e senza dover sapere il linguaggio Objective-C, applicazioni per diverse piattaforme tra le quali iPhone.

Gamesalad è un tool che vi permette di creare giochi per iPhone in 2D senza neanche scrivere una stringa.
Si può scaricare gratuitamente dal sito www.gamesalad.com.

Non perdiamoci in chiacchere e iniziamo subito con il Tutorial.

Apriamo Gamesalad e clicchiamo su Blank e poi su choose. Creiamo un’altra scena cliccando su questo pulsante :

Dovremo avere una schermata così :

Clicchiamo 2 volte su initial scene e andiamo su Images, clicchiamo sul pulsante in basso a sinistra e scegliete un immagine. Se volete potete scegliere questa :

Creiamo un attore e trasciniamo l’immagine su di esso. Inseriamo nel progetto questa immagine (trascinandola). Dovremmo ottenere una schermata cosi :

Clicchiamo su Actor 1 e definiamo quello che deve fare questo attore. Quindi clicchiamo su Create Rule e da Basic Behaviors trasciniamo l’attributo Change Scene in Drag your behaviors here e definite l’attore così :

Adesso passiamo alla Scene 1, aggiungiamo queste immagini, se volete potete scegliere queste :

Aggiungiamo di conseguenza 4 attori e trasciniamo tutte queste immagini in essi. Dovremmo ottenere un risultato così :

Definiamo il numero 1, quindi clicchiamo sull’uno e definite così questo attore :

Adesso definiamo l’attore 5, quindi clicchiamo sul 5 e definite così questo attore :

Adesso definiamo l’attore 7, quindi clicchiamo sul 7 e definite così questo attore :

Clicchiamo su Preview :

e proviamo il nostro gioco.

Ecco questo primo articolo tutorial di Riccardo Danzo sull’uso di GameSalad.

]]> http://www.iphoneandgo.it/2010/02/04/gamesalad-ovvero-come-creare-programmi-per-iphone-senza-codice/feed/ 16 http://www.iphoneandgo.it/2009/12/07/come-usare-uipagecontrol-nelle-nostre-applicazioni-iphone-tutorial-video/ http://www.iphoneandgo.it/2009/12/07/come-usare-uipagecontrol-nelle-nostre-applicazioni-iphone-tutorial-video/#comments Mon, 07 Dec 2009 07:00:14 +0000 Stefano Lodu http://www.iphoneandgo.it/?p=3282 In questo piccolo e veloce tutorial Video vi mostrerò come utilizzare più view con il componente messo a disposizione da iPhone : UIPageControl.

UIPageControl – iPhone – Tutorial Base from Stefano – iPhone on Vimeo.

Per voi è tutto Sir. Lodux.

Vediamo ora con un piccolo esempio come implementare questa nuova funzionalità.

Carichiamo il nostro Xcode e creiamo un nuovo progetto View-Based Application dandogli il nome che più preferiamo (nell’esempio “Mappa”).

Come primo passaggio ora dobbiamo aggiungere il Framework che utilizza questo servizio “MapKit”: portiamoci sulla cartella “frameworks” e con il tasto destro selezioniamo la voce “Add” -> “Existing Frameworks”; dopodichè aggiungiamo anche sul file controlle MappaViewController.h il framework: #import <MapKit/MapKit.h>

Ora inseriamo il delegate di MKMapView e il suo Outlet come segue:

A questo punto carichiamo il Xib file MapViewController.xib e inseriamo il componente MKMapView collendolo all’outlet creato “mappa”.

Questo è il risultato generato da questo primo passaggio:

A voi ora sperimentare le diverse proprità e metodi messi a disposizioni tra i quali:

mappa.showsUserLocation=TRUE; //servirà per mostrare la propria posizione
mappa.mapType = MKMapTypeStandard; // definisce il tipo di mappa da visualizzare

mappa.scrollEnabled=TRUE; // attiva lo scrolling

Per voi e’ tutto sir Lodux !

“dillo al tuo amore”.. nasce come sfida, nasce per gioco, nasce per divertimento. State pensando una frase poetica da dire alla vostra lei o al vostro lui ? Dillo al tuo amore serve proprio a questo: scuoti (shake) il tuo iphone e vedrai comparire una frase famosa o anonima che sia d’amore… la potrete leggere per poi dirla a voce alla vostra meta’, oppure potrete inviarle una mail… oppure attivare gli sms e scriverla per un messaggio istantaneo.

In questo codice sorgente che trovere potrete sperimentare le diverse tecniche base di programmazione dell’iphone come ad esempio:

- animazioni di frame

- gestione di database multi lingua

- view e pulsanti per mail / sms / call

- effetto Shake

Il database che e’ all’interno e’ solo dimostrativo.. chi volesse usare “Dillo al tuo amore” non a scopo didattico ma veramente come software potra’ integrare il DB con le proprie frasi personalizzate oppure acquistare la nostra versione in appstore.

Troverete il file sorgente “Dillo al tuo amore” zippato del peso di 6.955 Kb in questo

LINK.

Per voi il Team iPhone and Go !.

Quello che faremo in questo articolo e’ ricostruire la nostra splash screen in una sua view personalizzata e quindi ricominceremo il progetto dall’inizio senza tener conto alcuno dell’articolo mostrato in precedenza.

1) Creiamo con l’XCode il nostro progetto con template “View based application” con nome :”Splash”:

2) Ora importiano nelle Risorse del nostro progetto il file immagine che useremo come “Splash Screen” trascinandolo direttamente nella cartella “Resources”.

3) Il file grafico ora inserito dovremmo rinominarlo in “Default.png” facendo attenzione di indicare la “D” maiuscola per permettere all’XCode di interpretare questo file come splashScreen da usare durante il caricamento.

4) A questo punto carichiamo il nostro interface builder per andare a creare la nostra View dove applicheremo l’immagine Default.png di caricamento: premiamo quindi dalla nostra cartella di Resources il file SplashViewController.xib.

5) Ora a questa view aperta gia’ di default cambiamo il colore di Background che si trova nella view attributi come da immagine e trasciniamo dalla libreria una Label che denomineremo “Home Page” ad evidenziare che sara’ la view che apparira’ subito dopo il caricamento dell’applicazione e quindi della splash screen.

6) Ora creiamo una nuova view: prendiamo il componente “view” che si trova nella libreria dei componenti e lo trasciniamo all’interno della finestra “SplashScreenController.xib” cosi da aggiungere una seconda view destinata alla splash screen (premiamoci sopra velocemente 2 volte col mouse ed apparirà la nuova finestra “view”).

7) Adesso inseriamo nella view appena creata il componente “Image View” dalla libreria trascinandolo ed adattandolo alla view. Fatto questo utilizzando la finestra degli attributi selezioniamo (avendo selezionato il componente appena trascinato Image View) il menu a tendina “image” nel quale dovrebbe apparire unicamente il file grafico gia’ precaricato : Default.png e selezioniamolo:

Ora salviamo il progetto dall’interface builder e passiamo alla parte di stesura del codice.

9) Inseriamo In SplashAppDelegate.m alla fine del metodo applicationDidFinishLaunching la seguente riga:

[viewController showSplash];

10) Ora nel file SplashViewController.h inseriamo un IBoutlet e i due metodi di visualizzazione e di nascondere la spashscreen:

IBOutlet UIView *modelView;

- (void)showSplash;
- (void)hideSplash;

11) All’interno del file SplashViewController.m alla fine scriviamo il seguente codice destinato alla realizzazione del motodo di visualizzazione e sparizione:

-(void)showSplash
{

UIViewController *modalViewController = [[UIViewController alloc] init];

modalViewController.view = modelView;

[self presentModalViewController:modalViewController animated:NO];

[self performSelector:@selector(hideSplash) withObject:nil afterDelay:2.0];

}

//hide splash screen

- (void)hideSplash{

[[self modalViewController] dismissModalViewControllerAnimated:YES];

}

12) Salviamo tutto il progetto dal nostro XCode e proviamo intanto a compilarlo per vedere che sia tutto corretto. Ora dobbiamo legare l’ Outlet del modelview che abbiamo indicato nel codice tramite l’interface builder.

Selezioniamo dall’interface builder all’interno della finestra SplashViewController.xib il componente “File’s owner” dopodiche dalla finestra degli attributi alla voce “View Connections” selezioniamo e trasciniamo il pallino corrispondente a modelview all’interno della View che si trova nel file “SplashViewController.xib” destinata alla splash screen per creare il seguente legame:

Salviamo e compiliamo l’applicazione, se tutto e’ andato secondo procedura dovremmo vedere la nostra splash screen per alcuni secondi per poi sparire con movimento verticale.

Se volete provare con i files d’esempio potete scaricarli dal seguente link.

Per voi Sir. Lodux !

Oggi vedremo nel lato pratico come poter inserire nelle nostre applicazioni questa pagina di pre-caricamento.

Cominciamo subito con creare la nostra applicazione: andiamo su XCode e tenendo il template “View based application” scriviamo il nome della nostra applicazione “Splash”:

Nel prossimo passaggio invece apriremo il file contenente il layout grafico : SplashViewController.xib e andremo a modificare il colore di sfondo per poter vedere la differenza durante il caricamento di un background nero e il colore blu che andremo a selezionare come sfondo dopo il caricamento.

Premiamo quindi su SplashViewController.xib due volte e dall’interface builder posizioniamoci sul colore sfondo (background che si trova all’interno della finestra degli attributi) come da immagini :

A questo punto lanciate l’applicazione dovrebbe apparire prima il riquadro nero (splash screen) e poi lo sfondo di colore blu.

Ora non dovremmo fare altro che inserire la nostra immagine (quella che vogliamo rappresenti la nostra splash screen) all’interno delle risorse files (Resources) del nostro Xcode con un semplice trascinamento:

Una volta fatto questo non ci resta che rinominare (fondamentale) il nostro file immagine (Splashscreen.png) nel file : Default.png. Fate molta attenzione a scrivere Default con la “D” maiuscola perche’ il sistema altrimenti lo riconoscera’ diverso.

Facendo cio’ il sistema riconoscera’ che quell’immagine e’ una Splash Screen e che quindi andrà collocata prima del caricamento.

Ora compilate il programma con Build and Go per vederne gli effetti. Se tutto sarà stato fatto secondo le regole dovrebbe apparire per qualche istanti la vostra Splash screen e subito dopo uno sfondo blu.

Nel prossimo articolo spiegherò come implementare un sistema di attesa manuale per decidere quanti secondo la nostra splash screen deve tenersi attiva.

Per voi Sir. Lodux.

In verità il video doveva essere fatto in un unica parte…. ma ho avuto una “svista” quindi l’ho dovuto integrare in due parti separate !..

Utilizzo della slider : parte seconda from Stefano – iPhone on Vimeo.

Un salutone Sir. Lodux !

iPhoneandGo.it - iphoneandgo@gmail.com