Oggi metteremo da parte Interface Builder e daremo spazio ad un po’ di codice. Quello che faremo sarà semplicemente disegnare una vista all’interno della nostra applicazione tramite Objective-C sfruttando la funzione CGRectMake. La posizione della vista sarà settata via codice così come la sua dimensione (larghezza per altezza).

Impareremo quindi ad utilizzare alcune proprietà geometriche delle UIView offerte dal linguaggio di programmazione Objective-C. Prima di cominciare a lavorare su Xcode vediamo cos’è e com’è fatta una struttura CGRect, usata per rappresentare la posizione e le dimensioni di un rettangolo in Objective-C. Partiamo dalla definizione presa dalla documentazione ufficiale Apple, CGRect viene così definita:

struct CGRect {
      CGPoint origin;
      CGSize size;
};
typedef struct CGRect CGRect;

Origin, ovvero il punto di origine, è composto dalle coordinate del vertice superiore sinistro del rettangolo, mentre size rappresenta le dimensioni del rettangolo stesso (larghezza e altezza).

CGPoint e CGSize sono a loro volta delle strutture formate rispettivamente da “CGFloat x – CGFloat y” (che si usano per indicare le coordinate di un punto, quello di origine del rettangolo nel nostro caso) e “CGFloat width – CGFloat Height” (per indicare larghezza e altezza).

Per creare una struttura CGRect dovremmo usare la funzione CGRectMake() che è definita come segue:

CGRect CGRectMake{
      CGFloat x,
      CGFloat y,
      CGFloat width,
      CGFloat height
};

Vedremo tra poco come si usa nella pratica. Analizziamo prima le dimensioni di una finestra del nostro iPhone. Le dimensioni massime utilizzabili sono 320 x 480 pixel (L x H). Dobbiamo tenere però conto della Status bar che toglie 20 pixel all’altezza. Eventualmente possiamo comunque nascondere la status bar via codice tramite l’istruzione:

[UIApplication sharedApplication].statusBarHidden = YES;

Potremo così creare applicazioni a pieno schermo e sfruttare quindi le dimensioni massime disponibili.

La figura seguente mostra in modo chiaro le dimensioni dello schermo dell’iPhone:

Iniziamo con il nostro progetto. Apriamo Xcode, selezioniamo un nuovo progetto e dall’elenco dei template disponibili scegliamo “Windows-based Application”.

Diamo un nome alla nostra applicazione, ad esempio “codeView”, scegliamo quindi dove salvare e proseguiamo.

Apriamo il file “codeViewAppDelegate.h” e inseriamo il seguente codice:

#import 

@interface codeViewAppDelegate : NSObject  {
        UIWindow *window;
	UIView *myView;
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) UIView *myView;

@end

Non abbiamo fatto altro che aggiungere un oggetto di tipo UIView chiamato myView, ovvero la vista che disegneremo via codice nel file di implementazione. Abbiamo inoltre dichiarato la sua property, in modo da poter utilizzare senza problemi tutte le sue proprietà che ci serviranno nel progetto.

Salviamo, apriamo il file “codeViewAppDelegate.m” e modifichiamo il codice come segue:

@synthesize window, myView;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

    // Override point for customization after application launch
	[UIApplication sharedApplication].statusBarHidden = YES;
	window.backgroundColor= [UIColor redColor];

	CGRect frame = CGRectMake(80, 140, 160, 200);
	myView = [[UIView alloc] initWithFrame:frame];
	myView.backgroundColor=[UIColor blueColor];
	[window addSubview:myView];

        [window makeKeyAndVisible];
}

Analizziamo il codice. Prima di tutto abbiamo deciso di nascondere la status bar tramite l’istruzione [UIApplication sharedApplication].statusBarHidden = YES; abbiamo quindi modificato la proprietà backgroundColor della windows e abbiamo creato una struttura di tipo CGRect, chiamata frame, tramite la funzione CGRectMake con le seguenti caratteristiche: coordinata x= 80, coordinata y=140, larghezza=160 e altezza=200 pixel. Abbiamo quindi creato la vista myView allocandola in memoria e inizializzandola con il frame appena creato. Abbiamo modificato la proprietà backgroundColor anche della vista e l’abbiamo infine caricata nella finestra.

Salviamo e clicchiamo su “Build & Run” per vedere la nostra vista blu disegnata all’interno della window rossa nella posizione desiderata. I punti delle coordinate dell’origine del rettangolo (angolo superiore sinistro) sono stati da noi scelti in modo che la view fosse perfettamente al centro della nostra finestra, ma voi potete sperimentare e fare altre prove ottenendo configurazioni differenti da quella proposta. Il risultato è mostrato in figura qui sotto con le indicazioni dell’origine e delle misure della View: