Share
En av de vanligste handlingene som brukes til iPhone- eller iPad-applikasjoner, er berøringshendelsen. En hendelse er ikke nyttig hvis den ikke utløser en meningsfull handling. Denne opplæringen dekker hvordan du knytter en berøringshendelse til en egendefinert knapp og hvordan du aktiverer en objekts animasjon. Til slutt er resultatet en enkel skjermkontroll på skjermen, som kan utvides til grensene for fantasien.
Åpne Xcode og start et nytt prosjekt. Velg Visbasert applikasjon. Navngiv appen "hopping", slik at du enkelt kan følge med.
Når du har lastet ned den vedlagte prosjektfilen, åpner du mappen "Bilder". Her finner du alle bildesursene vi trenger for dette prosjektet, inkludert tre spritbilder av Ryu fra Streetfighter som opprettet av PanelMonkey. Du må kopiere bildene til prosjektressursmappen ved å dra dem fra mappen i Finder og til "Grupper og filer" -ruden i Xcode.
I Xcode-spørringen som skal vises, må du merke av i boksen merket "Kopier elementer til destinasjonsgruppens mappe (hvis nødvendig)."
Alle bildene som trengs for prosjektet, skal nå kopieres til samme mappe der prosjektfilen er. Nå, for å holde ressursmappen ren, la oss gruppere alle bildene vi nettopp importerte sammen. Velg alle bildene ved å holde ned kommandoen og klikke på hver fil. Nå venstre-klikk eller ctrl + klikk og velg "Gruppe" fra den resulterende menyen. Gi gruppen navnet uansett hva du ønsker. Jeg heter min "bilder".
Bygg og kjør appen i nåværende tilstand. Det bør ikke være noen kompilerende feil, og simulatoren skal vise en vanlig grå skjerm.
Inside jumpAppDelegate.m, modifiser methoden didFinishLaunchingWithOptions ved å legge til følgende linje:
// Tillat en ny visning, legg til denne linjen: self.viewController = [jumpingViewController alloc]; [window addSubview: viewController.view];
Dette vil tildele en ny visningskontroller. Dette trinnet er nødvendig fordi vi ikke bruker Interface Builder for å skape vårt syn for oss.
I tittelkontrollens headerfil (jumpingViewController.h), i grensesnittet, erklærer du en ny egenskap ved å legge til:
UIImageView * spiller;
Deretter, før @end, legg til:
@property (nonatomic, behold) UIImageView * spiller;
Dette vil tillate oss å bruke "spiller" som en klasseegenskap for et bilde.
Overskriftsfilen skal nå se slik ut:
#importere@interface jumpingViewController: UIViewController UIImageView * spiller; @property (nonatomic, behold) UIImageView * spiller; @slutt
Vårt neste skritt er å legge til de grafiske og grensesnittelementene i denne visningen.
Åpne jumpingViewController.m filen og slett eksisterende kommenterte metoder. La de som ikke er kommentert.
På toppen, etter @implementation jumpingViewController, legg til:
@synthesize player;
Oppdater deallokmetoden til følgende:
- (void) dealloc [spiller release]; [super dealloc];
Deretter legger du inn følgende metode:
- (void) addButton UIButton * knapp = [[UIButton buttonWithType: UIButtonTypeCustom] initWithFrame: CGRectMake (240, 150, 50, 50)]; // Sett knappens bilde [knapp settBackgroundImage: [UIImage imageNamed: @ "button.png"] forState: UIControlStateNormal]; // Fest en hendelse [knapp addTarget: self action: @selector (buttonPressed) forControlEvents: UIControlEventTouchUpInside]; // Legg til knappen til visningen [self.view addSubview: button];
AddButton-metoden vil bli kalt senere for å gjette det, legg til knappen til visningen. Det første du må legge merke til er at dette er en egendefinert knapp. For det andre, knappenPresset er navnet på en metode som vil bli kalt når berøringshendelsen avfyres.
Gå videre og definer en midlertidig knappPresset metode ved å sette inn følgende:
- (ugyldig) -knappPresset NSLog (@ "Knapptrykket");
NSLog () vil sende en melding til konsollen, som kan nås fra menyen, under Run (cmd + shift + R).
Vår nye knapp skal vises på skjermen etter at visningen er lastet inn. For at dette skal skje, legg til følgende metode:
- (void) loadView // Allokere visningen self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Sett visningens bakgrunnsfarge self.view.backgroundColor = [UIColor blackColor]; // Opprett bakgrunnsbildet UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // Opprett knappen [self addButton];
Denne metoden kommer som standard for visningskontrollere. Vi legger til et bakgrunnsbilde og sender addButton-meldingen.
Lagre arbeidet ditt og bygg og kjør prosjektet. Du bør se bakgrunnsbildet og den røde knappen. Hvis konsollvinduet er åpent, bør du trykke på knappen for å vise en melding i konsollen via NSLog ().
For å initialisere vårt UIImageView-objekt, legg til følgende i jumpViewController.m, over addButton-metoden:
- (void) initPlayer self.player = [[UIImageView alloc] initWithFrame: CGRectMake (10, 100, 77.0, 94.0)]; [selvstendig normalstilling]; // ugjennomsiktig for bedre ytelse self.player.opaque = YES; [self.view addSubview: self.player]; - (void) normalStance [self.player setImage: [UIImage imageNamed: @ "ryu.png"]];
Denne koden vil både initialisere et UIImageView-objekt og legge det til hovedvisningen. NormalStance-metoden vil vise seg å være nyttig senere.
Vi sender nå initPlayer-meldingen til hovedvisningen. Vi gjør dette ved å endre loadView-metoden som følger:
- (void) loadView // Allokere visningen self.view = [[UIView alloc] initWithFrame: [[UIScreen mainScreen] applicationFrame]]; // Sett visningens bakgrunnsfarge self.view.backgroundColor = [UIColor blackColor]; // lage bakgrunnsbildet UIImageView * bg = [[UIImageView alloc] initWithFrame: CGRectMake (0, 0, 572, 206)]; [bg setImage: [UIImage imageNamed: @ "bg.jpg"]]; [self.view addSubview: bg]; // lage knappen [self addButton]; // nå initialiser spilleren [self initPlayer];
Bygg og løp. Et tegn dukket opp på skjermen, til høyre?
Nå for den morsomme delen. Over addButton, legg til:
- (void) cleanStance [self.player setImage: nil]; self.player.animationImages = null; - (ugyldig) jumpStance [self cleanStance]; NSArray * imageArray = [[NSArray alloc] initWithObjects: [UIImage imageNamed: @ "jump1.png"], [UIImage imageNamed: @ "jump2.png"], null]; self.player.animationImages = imageArray; self.player.animationDuration = 0.3; self.player.contentMode = UIViewContentModeBottomLeft; [self.view addSubview: self.player]; [self.player startAnimating];
Den første metoden som er lagt til fjerner eventuelle bilder som er knyttet til spillerobjektet. Vi bruker dette til å rengjøre tidligere brukte animasjonsrammer. Den andre metoden legger til en enkel animasjon i vårt spillobjekt. Dette vises når objektet beveger seg.
Etter jumpStance-metoden, legg til:
- (void) jump: (UIImageView *) bilde [self jumpStance]; [UIView startAnimations: null kontekst: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Denne metoden beveger faktisk spillerobjektet. Først endres bildet settet, og beveger det med 40 piksler vertikalt.
Køen:
[UIView setAnimationCurve: UIViewAnimationCurveEaseOut];
Legger til en lettende effekt for animasjonen, så det ser mer realistisk ut.
Endre knappenTrykkmetode for å se slik ut:
- (void) buttonPressed [selvhopp: selfplayer];
Bygg og løp. Ved å trykke på knappen nå, vil tegnet hoppe, men forblir frosset i midten av luften. God fremgang! La oss få ham ned nå.
Over den tidligere tilførte hoppemetoden, legg til:
-(void) fall: (NSString *) animationID ferdig: (NSNummer *) ferdig kontekst: (tomt *) kontekst [self cleanStance]; [selvstendig normalstilling]; [UIView startAnimations: null kontekst: NULL]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; [UIView setAnimationDuration: 0.2]; self.player.transform = CGAffineTransformMakeTranslation (0, 0); [UIView commitAnimations];
Denne metoden setter karakteren tilbake til normal tilstand og flytter den tilbake til startposisjonen.
Nå endrer hoppemetoden til å se ut som:
- (void) jump: (UIImageView *) bilde [self jumpStance]; [UIView startAnimations: null kontekst: NULL]; [UIView setAnimationDuration: 0.3]; [UIView setAnimationCurve: UIViewAnimationCurveEaseOut]; [UIView setAnimationBeginsFromCurrentState: YES]; // Utfør høst etter at animasjonen avsluttet [UIView setAnimationDelegate: self]; [UIView setAnimationDidStopSelector: @selector (fall: finished: context :)]; image.transform = CGAffineTransformMakeTranslation (0, -40); [UIView commitAnimations];
Bygg og løp. Trykk på den røde knappen nå, og vår karakter skal hoppe og lande tilbake på bakken. Det er det!
Nå bør du ha en grunnleggende forståelse av noen av de mest brukte klassifisert som: UIButton, NSLog, UIImageView og hvordan du utfører animasjoner. En lignende tilnærming kan brukes for å legge til andre knapper på skjermen, som kan utløse forskjellige hendelser, slik at målobjektet kan utføre andre handlinger. Ta gjerne kontakt eller følg meg på Twitter @ tudorizer.
Accentsconagua