by Peder

iPhone Utvikling UIViews

Jeg kommer til å legge ut en del innlegg som omhandler iPhone utvikling på denne bloggen. Jeg kommer til å begynne med mest grunnleggende funksjoner og muligheter for deretter å avansere. Dagens innlegg handler om å benytte forskjellige UIViews og hvordan man bytter mellom dem.

Etter å ha opprettet ett nytt “Window-based Application” prosjekt høyreklikker man på “Classes” mappen i prosjekt treet i Xcode. Velg Add -> New File… og velg “UIViewController subclass”. Huk av for “with XIB for user interface” og klikk neste. Gi filene et passende navn (jeg har brukt untitled og untitled2 siden dette bare er en demo), deretter drar man XIB filen over i “Resources” mappen. Gjenta denne prosessen slik at du har tilsammen to sett med filer.

Alle nødvendige filer er nå opprettet og neste steg er å tilføre den nødvendige koden som skal til for å veksle mellom de nye viewcontrollene. Gå først inn i App delegaten sin header fil (.h) og modifiser filen slik at den er lik som koden nedenfor:


#import

@class untitled;
@class untitled2;

@interface TestAppDelegate : NSObject {
UIWindow *window;
IBOutlet untitled *viewControllerOne;
IBOutlet untitled2 *viewControllerTwo;
}

-(void) switchViewOne;
-(void) switchViewTwo;

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet untitled *viewControllerOne;
@property (nonatomic, retain) IBOutlet untitled2 *viewControllerTwo;

@end

Deretter går du inn i App delegaten sin implementasjons fil (.m) og legger inn nødvendig kode slik at den ligner på koden nedenfor:


#pragma mark -
#pragma mark Application lifecycle

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
untitled *_untitledOne = [[untitled alloc] initWithNibName:@"untitled" bundle:[NSBundle mainBundle]];
self.viewControllerOne = _untitledOne;
[_untitledOne release];
[window addSubview:[viewControllerOne view]];
[window makeKeyAndVisible];

return YES;
}

To metoder for å bytte mellom de ulike views’ene. En enkel flip animasjon er lagt til når man bytter views:


-(void) switchViewOne
{
untitled2 *mainview = [[untitled2 alloc] initWithNibName:@"untitled2" bundle:nil];
[self setViewControllerTwo:mainview];
[mainview release];

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:window cache:YES];
[viewControllerOne.view removeFromSuperview];
[self.window addSubview:[viewControllerTwo view]];
[UIView commitAnimations];
}

-(void) switchViewTwo
{
untitled *mainview = [[untitled alloc] initWithNibName:@"untitled" bundle:nil];
[self setViewControllerOne:mainview];
[mainview release];

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:window cache:YES];
[viewControllerTwo.view removeFromSuperview];
[self.window addSubview:[viewControllerOne view]];
[UIView commitAnimations];
}

Neste steg er å legge til kode i den første viewcontrolleren sin .h fil. Tilfør følgende kode:


#import
#import "untitled2.h"

@interface untitled : UIViewController {
IBOutlet UILabel *lblOne;
IBOutlet UIWindow *window;
}

@property (nonatomic, retain) UILabel *lblOne;
@property (nonatomic, retain) UIWindow *window;

-(IBAction)switchView: (id) sender;

@end

Deretter utfører du følgende kode i .m filen:


#import "untitled.h"
#import "untitled2.h"
#import "TestAppDelegate.h"

@implementation untitled

@synthesize lblOne;
@synthesize window;

-(IBAction)switchView: (id) sender
{
TestAppDelegate *mainDelegate = (TestAppDelegate *)[[UIApplication sharedApplication ]delegate];
[mainDelegate switchViewOne];
}

Den neste viewcontrolleren sin .h fil skal se slik ut:


#import
#import "untitled.h"

@interface untitled2 : UIViewController {
IBOutlet UILabel *lblOne;
IBOutlet UIWindow *window;
}

@property (nonatomic, retain) UILabel *lblOne;
@property (nonatomic, retain) UIWindow *window;

-(IBAction)switchView: (id) sender;

@end

Og .m filen skal se slik ut:


#import "untitled2.h"
#import "untitled.h"
#import "TestAppDelegate.h"

@implementation untitled2

@synthesize lblOne;
@synthesize window;

-(IBAction)switchView: (id) sender
{
TestAppDelegate *mainDelegate = (TestAppDelegate *)[[UIApplication sharedApplication ]delegate];
[mainDelegate switchViewTwo];
}

All nødvendig kode er nå lagt til. Siste steg er å knytte disse metodene til objekter i et view. Dobbelklikk på den første XIB filen som ble opprettet i steg èn som ligger under mappen “Interface Builder Files” i Xcode. Filen vil da åpnes i Interface Builder. Hvis ikke View’et åpnet seg så dobbelklikker du på “View” i xib filen. Dra over en label og legg til en tekst. Deretter drar du over en “round rect button” og gir den ett navn. Det neste som må gjøres er å knytte disse til koden vi implementerte i viewcontrolleren. Marker “File’s owner” og åpne “Connections Inspector”. Under “Received Actions” ligger det en metode. Dra en linje fra denne til knappen du opprettet i view’et. Gjør det så med lblOne som ligger under “Outlets” og dra den til Labelen som ble opprettet på view’et. Gjenta denne prosessen med den andre xib filen.

Applikasjonen er nå ferdig!

Build og kjør appen. Klikk på knappene for å bytte views. Da er det bare å begynne å leke med koden og ta dette videre!