Tutorial iphone sulla visualizzazione in dettaglio da menu (drill down). Pratica [n.5]

Pratica

Pratica

In questa prova pratica andremo a sviluppare una sorta di menu da poter selezionare e poter quindi entrare in una nuova vista per visualizzare il dettaglio della scelta effetuata.

L’applicazione da me tradotta e spiegata e’ stata gentilmente presa dal sito www.iphonesdkarticles.com.

Iniziamo come al solito aprendo il nostro Xcode e creando un nuovo progetto del tipo :”navigation Based application” che andremo a chiamare MenuDettaglio.

Come prima fase andremo a popolare il nostro menu per la scelta del dettaglio da visualizzare:

iPhone menu

iPhone menu

Molte parti del codice sono già state create dal sistema quindi ora andremo a inserire innanzi tutto il titolo. Dall’ XCode scegliamo il file per l’interfaccia grafica MainWindow.xib dentro resources e clicchiamo due volte. Si aprirà il nostro Interface Builder e selezioniamo (cliccando una volta) sopra la barra blu che si trova in alto della nostra finestra. Una volta selezionato tra le proprietà andiamo a riempire il campo “Title” con : Parent View.

iPhone interface builder

iPhone interface builder

Ora andiamo a caricare i dati nella tabella principale. Per fare ciò dobbiamo ritornare nel nostro XCode e sceglire il file : RootViewController.m nella cartella class. Si creerà prima una variabile istanza di nome listOfContents (che non sarà altro che l’array per contenere i titoli del menu). Dopodichè andremo a popolare il nostro array utilizzando l’oggetto NSLocatizedString il quale conterrà due variabili una key e una comment.

Inseriamo il codice in rosso e in verde(opzionali) come segue all’interno della funzione viewDidLoad:

– (void)viewDidLoad {

//initialize the array
self.listOfContents = [[NSMutableArray alloc] initWithCapacity:10];

//Add a dictionary object to the array.
//Dictionary object will contain a strings for the object and key.
//NSLocalizedString takes two variables a key and a comment.

[listOfContents addObject:NSLocalizedString(@”Menù scelta 1″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 2″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 3″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 4″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 5″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 6″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 7″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 8″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 9″, @””)];
[listOfContents addObject:NSLocalizedString(@”Menù scelta 10″, @””)];

}

Inseriamo ora il conteggio delle righe create nel seguente metodo :

– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [listOfContents count];
}

E la disallocazione della memoria :

– (void)dealloc {
[listOfContents release];

Il prossimo passo sarà quello di riempire le celle da mostrare con il testo inserito nell’array.  Questo metodo verrà chiamato n volte dove per “n” sta il numero di righe del menu.

Utilizzando sempre il file RootViewController.m posizioniamoci dopo la funzione iscritta in nero e inseriamo il codice in rosso e verde:

//This method will be called n number of times.
//Where n = total number of items in the array.

– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *MyIdentifier = @”MyIdentifier”;

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
}


// Set up the cell with some formatting.
cell.font = [UIFont systemFontOfSize:14];

//Get the string from the array and add it as text for the cell.

cell.text = [listOfContents objectAtIndex:indexPath.row];

// return the table cell.
return cell;
}

Ora aggiungiamo a inzio codice la sua “synthesize” della lista come segue:

@implementation RootViewController

@synthesize listOfContents;

Portiamoci ora sul file head RootViewController.h e aggiungiamo le seguenti dichiarazioni :

@interface RootViewController : UITableViewController {
NSMutableArray *listOfContents;
}

@property (nonatomic, retain) NSMutableArray *listOfContents;

Se tutto e’ andato per il verso giusto provate a compilare l’applicazione (build and go) e dovrebbe apparire il menu con le 10 scelte potendole selezionare ma senza entrare nel dettaglio della vista.

Ora dobbiamo caricare la vista in dettaglio. Il metodo didSelectRowAtIndexPath sempre del nostro RootViewController.m viene chiamato quando viene selezionato un menu nella tabella. Per la gestione della memoria più efficente si caricherà la vista dettaglio solo la prima volta che si selezionerà per poterla poi utilizzare ad ogni ripetizione di selezione. Per fare questo dovremmo creare una variabile istanza di DetailViewController nella RootViewConltroller.

Dobbiamo creare nel nostro progetto due nuovi file da inserire di nome DetailViewController.h e DetailViewController.m andiamo su file, nuovo file e scegliamo : NSObjects subclass. Da qui si potrà inserire direttamente il file DetailViewController che verra creato sia .m che .h.

Selezioniamo il detailviewController.h e inseriamo il seguente codice:

@interface DetailViewController : UIViewController {

IBOutlet UILabel *lblMessage;
int rowNumber;

}

@property (nonatomic, retain) IBOutlet UILabel *lblMessage;
@property (readwrite) int rowNumber;

-(void)updateRowNumber:(int)theIndex;

@end

e invece nel file DetailViewController.m il segente codice :

@implementation DetailViewController

@synthesize lblMessage, rowNumber;

– (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {

// Initialization code
self.title = @”Detail View”;
}
return self;
}

/*
Implement loadView if you want to create a view hierarchy programmatically
– (void)loadView {
}
*/

-(void)updateRowNumber:(int)theIndex {

rowNumber = theIndex+1;
lblMessage.text = [NSString stringWithFormat:@”row %i was clicked.”, rowNumber];
}

//If you need to do additional setup after loading the view, override viewDidLoad.
– (void)viewDidLoad {

lblMessage.text = [NSString stringWithFormat:@”row %i was clicked.”, rowNumber];
}

– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

– (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Releases the view if it doesn’t have a superview
// Release anything that’s not essential, such as cached data

}


– (void)dealloc {
[lblMessage release];
[super dealloc];
}

@end

Ora facciamo le varie assegnazioni di prorietà dal file RootViewController.h aggiungiamo il seguente codice :

@class DetailViewController;

@interface RootViewController : UITableViewController {
NSMutableArray *listOfContents;
DetailViewController *dvController;
}

@property (nonatomic, retain) NSMutableArray *listOfContents;
@property (nonatomic, retain) DetailViewController *dvController;

Ora dal file RootViewController.m :

@synthesize listOfContents, dvController;

e dall’interno del metodo didSelectRwIndexPath:

– (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// Navigation logic

//Check to see if the controller is nil or not.
if(dvController == nil)
{

//Initialize the controller.
DetailViewController *aController = [[DetailViewController alloc] initWithNibName:@”DetailView” bundle:nil];

//Set the controller to our variable.
self.dvController = aController;

//Release the temp controller
[aController release];
}

[dvController updateRowNumber:indexPath.row];

//Add the controller to the top of the present view.
[[self navigationController] pushViewController:dvController animated:YES];
}

Non dimentichiamo la disallocazione della memoria.

– (void)dealloc {
[listOfContents release];

[dvController release];

A questo punto ci manca però di creare una nuova vista Detailview.xib. Andiamo su file e clicchiamo su nuovo file . Selezioniamo -> user interface -> View XIB.

New Xib file

New Xib file

Il file dovrà avere il nome DetailView.xib. Ora che e’ presente nel XCode trasciniamolo dentro la cartella Resources e poi carichiamolo per aprirlo nell’ interface builder.

Applichiamoci una semplice Label al centro e poi selezioniamo per  la Class dell’oggetto File’s Owner ila voce : DetailViewController.

Interface builder

Interface builder

Assegnamo poi i collegamenti tra : File’s Owner tenendo premuto il tasto CTRL e selezionando prima File’s Owner per trascinarlo fino a Label e scegliere IblMessage. Poi fare lo stesso da File’s Owner con il CTRL premuto fino ad uno spazio vuoto della finestra in modo da fare i collegamenti come in figura :

attributi

attributi

A questo punto ci siete e l’applicazione una volta salvata dovrebbe funzionare alla perfezione mostrando una volta selezionata una scelta di menu la sua pagina in dettaglio con l’indicazione di quale titolo e’ stato selezionato.

Potete scaricare il sorgente dal seguente link.

Articolo precedente dell’argomento.

iPhoneandGo - Stefano Lo Duca - loduca_ve@yahoo.it

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: