Share
Een van de grootste tools die Apple zijn iPhone-ontwikkelaars biedt, is Interface Builder. Interface Builder is een toepassing waarmee u, de ontwikkelaar, de grafische gebruikersinterface (GUI) voor uw app kunt maken in een WYSIWYG-stijleditor (What You is what you get). Wanneer de app is gecompileerd, genereert IB vervolgens alle benodigde code voor u. Hiermee kunt u snel en gemakkelijk interfaces maken. Deze tutorial begeleidt u bij het maken van interfaces in Interface Builder en het gebruik van de verschillende elementen die Apple biedt
Voordat je doorgaat met een van de voorbeelden in deze tutorial, moet je de Apple Human Interface Guidelines van Apple lezen. Dit document bevat essentiële informatie over het maken van interfaces voor de iPhone en als niet wordt voldaan aan de richtlijnen die het bevat, kan uw app worden afgekeurd wanneer deze wordt ingediend bij de App Store. Dit document zal in meer detail besproken worden terwijl we verdergaan, en alle voorbeelden in deze tutorial zullen voldoen aan deze richtlijnen.
Interface Builder heeft een vrij eenvoudige lay-out. Het bestaat uit vier hoofdvensters, de weergave, de bibliotheek, de nib (of xib) documentbrowser en de inspector. Dus wat doen elk van deze vensters? In de weergave construeer je je interface. U sleept items uit het bibliotheekvenster naar de weergave om ze te plaatsen. Met de documentbrowser kunt u bladeren door de elementen die u in uw nib-bestand hebt geplaatst, hiërarchisch. Ten slotte toont de inspecteur u alle verschillende kenmerken van het geselecteerde element en kunt u deze bewerken.
Wat de meer technische kant betreft, laat Interface Builder uw applicatie-broncode op twee basismanieren communiceren met de interface: outlets en acties. Uitgangen definiëren een element waartoe je toegang hebt in je broncode, je kunt dan een verbinding tot stand brengen tussen je verkooppunten en die specifieke gebruikersinterface-elementen in Interface Builder.
Een outlet wordt als volgt gedefinieerd:
IBOutlet id someElement;
De IBOutlet-verklaring zou ook als volgt kunnen worden neergelegd bij de eigendomsverklaring:
@property (nonatomic, retain) IBOutlet id someElement;
Een van beide manier is acceptabel. Een actie is een speciaal type methode dat wordt aangeroepen als reactie op een gebeurtenis (de gebruiker tikt op een knop) die u definieert in Interface Builder. Een actie wordt gedefinieerd door de methoden het IBAction-type als volgt terug te sturen:
-(IBAction) someAction: (id) afzender;
We bespreken winkels en acties later in meer detail.
Het eerste dat u moet doen voordat u met Interface Builder kunt spelen, is om een nieuw Xcode-project te maken. Open Xcode klik op Maak een nieuw Xcode-project en selecteer vervolgens een op view gebaseerd project. Titel het "tegen".
NOTITIE:
Zorg ervoor dat je je doel hebt ingesteld op iPhone en niet op iPad in Xcode.
Nu u een Xcode-project hebt, willen we de automatisch aangemaakte CounterViewController aanpassen om onze verkooppunten en acties te definiëren. Open het bestand CounterViewController.h en wijzig het om er als volgt uit te zien:
#importeren@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger-telling; @property (nonatomic, retain) UILabel * countLabel; @property (nonatomic) NSInteger count; - (IBAction) toevoegen: (UIButton *) afzender; - (IBAction) sub: (UIButton *) afzender; - (void) displayCount; @einde
Dit definieert een geheel getal om de telling vast te houden en een uitgang naar een label dat die telling zal weergeven. Het definieert ook een reeks methoden die gebeurtenissen van IB zullen ontvangen. Nu moeten we een implementatie voor deze actie definiëren, dus open het corresponderende bestand CounterViewController.m en breng de volgende wijzigingen aan:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthetize countLabel; - (IBAction) add: (UIButton *) afzender count ++; [self displayCount]; - (IBAction) sub: (UIButton *) afzender count--; [self displayCount]; - (void) displayCount [self.countLabel setText: [[NSString alloc] initWithFormat: @ "% d", self.count]]; ... - (void) dealloc [countLabel release]; [super dealloc]; @end
Dit is een vrij eenvoudig bestand. Het enige wat het doet is telkens wanneer de actie wordt genoemd, het aantal omhoog of omlaag aanpassen en vervolgens weergeven dat op het label telt.
Breid nu de bronnenmap in Xcode uit en u zult drie bestanden zien. Twee hiervan zijn Interfcae Builder .xib-bestanden. Voor nu kun je MainWindow.xib negeren, we gaan ons richten op CounterViewController.xib. Open het nu, dit zal de interface-bouwer starten en je zult een scherm zoals dit zien:
Het is tijd om te beginnen met het bouwen van onze interface! Ga naar het tabblad van de bibliotheek en pak een knop en sleep deze naar je weergave. Als u de knop een ogenblik sleept, ziet u dat er blauwe hulplijnen verschijnen. Interfcae Builder geeft u verschillende handleidingen om het element in de weergave te plaatsen. Je zult dit meer zien wanneer we meer elementen beginnen te plaatsen. Doe dat twee keer. Zoek vervolgens een label en plaats het in uw weergave.
Selecteer nu een van de knoppen, ga naar het tabblad attributen in het infovenster en verander de titel in "+". Doe hetzelfde voor de andere knop, maar verander in plaats daarvan de titel in "-". Als u dubbelklikt, kunt u ook de titel wijzigen. Dubbelklik op het label en verander de tekst in "0". U kunt ook de tekstuitlijning naar het midden wijzigen, wat u op het tabblad attributen van de inspecteur kunt doen..
Nu zou je een interface moeten hebben die er ongeveer zo uitziet:
Het laatste dat u moet doen om uw counter-app te laten werken, is om de interface en de bron aan te sluiten.
Sluit het countLabel-contact aan op het eigenlijke label. Dit kan worden gedaan door te klikken en te slepen vanuit het bestandseigenaar-object, in het documentvenster, naar het label in de weergave. Er verschijnt een klein, grijs venster met twee opties, het ene is het telelabel dat we eerder hebben gedefinieerd en het andere is het aanzicht (dit is een standaarduitgangspunt vereist voor viewcontrollers, het zal een streepje hebben om aan te geven dat het al is verbonden met iets ). Klik op de telelabeloptie om deze te selecteren.
Nu gaan we onze knoppen verbinden met onze acties voor optellen en aftrekken. Voor onze doeleinden kunt u eenvoudig met de muis klikken en slepen van de knoppen naar het eigenaarsobject van het bestand (en de juiste actie voor elke knop selecteren). Houd er echter rekening mee dat als u het verbindingspaneel op het infovenster opent (wat u kunt doen) ga door op command + 2 te drukken), het geeft een reeks verschillende gebeurtenissen weer die je kunt gebruiken om je acties te activeren en je in staat te stellen een enorm scala aan functionaliteiten te creëren met een simpele knop. Standaard wordt standaard het Touch Up Inside-evenement gebruikt.
Nu kunt u terugschakelen naar Xcode en op build en run klikken en uw toepassing moet in de simulator worden gestart. Als u alles correct hebt aangesloten, kunt u optellen en aftrekken van de telling en moet u het label wijzigen om dat weer te geven.
Een UISegmented-besturing is als een paar knoppen die aan elkaar geplakt zitten, met één groot verschil. Het algemene doel van een UISegmentedControl is niet om als een drukknop te zijn, maar om te selecteren. Laat ons de functionaliteit van onze Counter-app uitbreiden door een gesegmenteerd besturingselement te gebruiken om de gebruiker de keuze te laten tussen "aantal voor één" of "twee voor twee".
Het eerste dat u moet doen, is het bestand CounterViewController.h openen in Xcode en een IBAction-definitie en een geheel getal toevoegen om onze modus op te slaan.
Verander het om er zo uit te zien:
#importeren@interface CounterViewController: UIViewController IBOutlet UILabel * countLabel; NSInteger-telling; NSInteger-modus @property (niet-atomair, behouden) UILabel * countLabel; @property (nonatomic) NSInteger count; @eigenschap (niet-atomair) NSInteger-modus; - (IBAction) toevoegen: (UIButton *) afzender; - (IBAction) sub: (UIButton *) afzender; - (IBAction) -modus: afzender (UISegmentedControl); - (void) displayCount; @einde
Dit is een goed moment om te wijzen op het feit dat tot nu toe de actiedefinities in deze tutorial allemaal een klassetype voor afzender hebben gedefinieerd, dat de objecten die deze actie kunnen noemen, beperkt tot die van dat klassetype. Ik vind dit een nuttige oefening omdat het je ervan weerhoudt om dingen verkeerd aan te sluiten. Opgemerkt moet echter worden dat dit is niet een vereiste, deze definities hadden net zo goed kunnen zijn:
- (IBAction) toe te voegen: (id) afzender; - (IBAction) sub: (id) afzender; - (IBAction) -modus: (id) afzender;
Elk object toestaan om ze te bellen. Hoe dan ook, u moet de implementatie van deze acties afstemmen, dus open CounterViewController.m en voer de volgende wijzigingen uit:
#import "CounterViewController.h" @implementation CounterViewController @synthesize count; @synthetize countLabel; @synthesize-modus; - (IBAction) add: (UIButton *) afzender switch (mode) case 0: count ++; breken; geval 1: tel + = 2; breken; standaard: pauze; [self displayCount]; - (IBAction) sub: (UIButton *) afzender switch (mode) case 0: count--; breken; case 1: count - = 2; breken; standaard: pauze; [self displayCount]; - (IBAction) -modus: (UISegmentedControl) -zender mode = afzender.geselecteerdSegmentIndex; ... @end
Nu moeten we de interface aanpassen. Open daarom de CounterViewController.xib.
Ga naar de bibliotheek en sleep in een gesegmenteerd besturingselement. Nu moeten we het configureren. Zorg ervoor dat het gesegmenteerde besturingselement is geselecteerd en open het paneel met kenmerken van het infovenster. Als we een paar manieren naar beneden gaan in de vervolgkeuzelijst met segmenten, die "segment 0 - eerste" moet lezen, willen we de titel wijzigen in "Eén". Trek nu het segmentmenu naar beneden en verander naar segment "segment 1 - seconde", en verander de titel in "Twee".
We moeten dit ook verbinden met onze actie. Open het venster Verbindingen en sleep van "Waardewijziging" naar Bestanden Eigenaar. Selecteer de modus "actie".
Dat is het. Je zou nu een tegenapp moeten hebben die een of twee keer op en neer kan tellen.
Tot dusverre hebben de elementen waarover we hebben gesproken talloze mogelijke toepassingen en zeer weinig beperkingen. De werkbalk is het eerste element dat we zullen bespreken met beperkingen in de Human Interface-richtlijnen van de iPhone. Als u van plan bent om werkbalken zwaar te gebruiken, moet u die richtlijnen raadplegen, maar kort gezegd moeten werkbalken altijd onderaan de interface worden geplaatst en ze moeten bestaan uit knoppen met pictogrammen die niet groter zijn dan 44px bij 44px. Het is geen navigatie-element, en dat is een belangrijk onderscheid. Als u het wilt gebruiken om de weergave of modi in uw app te wijzigen, gebruikt u in plaats daarvan een tabbladbalk. Als u zich echter aan deze richtlijnen houdt, is de werkbalk erg eenvoudig; het is eenvoudig een verzameling knoppen op een balk en kan daarom net zo worden gebruikt als een aantal knoppen. Het enige verschil is dat Apple een groter aantal systeempresets biedt dan voor standaardknoppen. U kunt ook spacers in de werkbalk tussen knoppen plaatsen om hun positie te wijzigen. Laten we het proberen.
Ga terug naar de CounterViewController.h en voeg de volgende regel toe na uw eerdere actiedeclaraties.
- (IBAction) opnieuw in te stellen: (UIBarButtonItem *) afzender;
Notitie:
De afzender hier is een UIBarButtonItem, geen UIToolbar. Elke UIBarButtonItem verzendt het een eigen gebeurtenis, de UIToolbar is gewoon een container.
Voeg dit nu toe aan uw CounterViewController.m, volgens de acties die we eerder hebben gedefinieerd:
- (IBAction) reset: (UIBarButtonItem *) afzender count = 0; [self displayCount];
Terug in IB laten we een UIToolbar uit de bibliotheek op het scherm laten vallen, merk op dat er al één knop op staat. Om die knop te selecteren, moet u erop dubbelklikken (de eerste klik selecteert de werkbalk, de tweede selecteert de knop).
Ga naar de kenmerken in het infovenster. U zult merken dat er aanzienlijk minder opties zijn voor een UIBarButtonItem dan voor andere elementen. Dat is te wijten aan het feit dat werkbalken uniform moeten zijn, dus dingen zoals kleur moeten voor de hele werkbalk worden ingesteld (u kunt dit uitproberen door eenvoudigweg één keer op de werkbalk te klikken en vervolgens de attributencontrole te openen). Wijzig de ID van de knop in "Prullenbak".
Verbind vervolgens de knop met de resetacton door de muis naar de eigenaar van het bestand te slepen. Als u uw app uitvoert, kunt u nu de telling laten rusten door op de prullenbak te tikken.
De switch is waarschijnlijk het meest beperkte element dat wordt aangeboden door Interface Builder. Het heeft bijna geen aanpassingsopties. Het heeft een "Aan" -status en een "Uit" -status. U kunt de labels of kleuren niet wijzigen. Schakelaars moeten er altijd hetzelfde uitzien, ongeacht wat. Ondanks het feit dat ze erg beperkt zijn, zijn switches soms nuttig. Instellingen maken bijvoorbeeld veel gebruik van switches en de switch kan handig zijn om functies in uw app in en uit te schakelen-dat is precies wat we gaan doen. We gaan een schakelaar maken die wordt in- en uitgeschakeld, of we nu negatieve elementen kunnen tellen in onze app.
Het eerste dat u moet doen, is de volgende aanpassingen aan uw CounterViewController.h aan te brengen:
#importeren@interface CounterViewController: UIViewController ... Boolean negative; ... @property (nonatomic) Boolean negative; ... - (IBAction) negativeSwitch: (UISwitch *) -afzender; ... @end
Dit definieert eenvoudig een booleaanse waarde die wordt opgeslagen als we een negatieve modus hebben of niet, en een actie verzonden door een UISwitch die die booleaanse waarde zal veranderen. Dus laten we nu onze actie definiëren en de rest van onze applicatie laten reageren op onze nieuwe negatieve boolean. Pas het bestand CounterViewController.m aan zodat het overeenkomt met het volgende:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize negative; ... - (IBAction) sub: (UIButton *) afzender switch (mode) case 0: count--; breken; case 1: count - = 2; breken; standaard: pauze; if (negatief) // Dit controleert eenvoudig of de negatieve modus uit is als (tel < 0) //and if count is negative count = 0; //sets it back to zero [self displayCount]; … - (void)viewDidLoad negative = TRUE; - (IBAction)negativeSwitch:(UISwitch*)sender negative = sender.on; if (!negative) if (count < 0) count = 0; [self displayCount];
Het enige dat hier wordt gedaan, is het instellen van de negatieve modus op basis van de status van de schakelaar en vervolgens wanneer een aftrekking plaatsvindt, waarbij wordt gecontroleerd in welke modus de schakelaar zich momenteel bevindt (opgeslagen in de negatieve boolean).
Schakel terug naar interfacebouwer, vind een schakelaar in de bibliotheek en zet deze in de weergave. Nu moeten we de schakelaar verbinden met de actie, maar in het geval van de schakelaar zoals de gesegmenteerde besturing, willen we de waarde gewogen gebeurtenis gebruiken, niet binnen aanvullen. Ga dus naar het tabblad verbindingen in het infovenster en sleep naar de eigenaar van het bestand en maak verbinding met de actie negativeMode:. U kunt ook een label plaatsen om aan te geven wat de schakelaar doet.
Op dit punt ziet uw toepassing er ongeveer zo uit.
Het laatste en het meest ingewikkelde element dat we zullen bespreken is de schuifregelaar. Schuifregelaars vertegenwoordigen een bereik van waarden (die u kunt opgeven), die veranderen als u langs de schuifregelaar beweegt. Dit element is enorm aanpasbaar, maar de meeste van deze aanpassingen moeten in code worden uitgevoerd en vallen buiten het bestek van deze zelfstudie. We gaan het gebruiken om een vermenigvuldiger en verdeler te maken voor onze teller.
Het eerste dat we nodig hebben, is, yup je raadt het al, een andere actie. Voeg het volgende toe aan CounterViewController.h met de rest van uw actieverklaringen:
- (IBAction) multiplier: (UISlider *) afzender;
Vervolgens moeten we de vermenigvuldigings- en delingsfunctie voor onze teller implementeren, dus verander je CounterViewController.m als volgt:
#import "CounterViewController.h" @implementation CounterViewController ... @synthesize mult; ... - (IBAction) add: (UIButton *) afzender count + = mode; tel * = mult; if (! negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)sub:(UIButton*)sender count -= mode; count /= mult; if (!negative) if (count < 0) count = 0; [self displayCount]; - (IBAction)mode:(UISegmentedControl*)sender mode = sender.selectedSegmentIndex+1; //Don't forget to add the +1 here - (IBAction)multiplier:(UISlider*)sender mult = sender.value; … - (void)viewDidLoad negative = TRUE; mult=1; … @end
Wanneer u nu optelt of aftrekt, wordt het getal vermenigvuldigd of gedeeld door de waarde van de schuifregelaar. Als de schuifregelaar op 1 staat (wat de onderlimiet zal zijn), handelt de teller normaal op 9 (wat het maximum zal zijn).
Terug in IB, pak je een schuifregelaar uit de bibliotheek in de weergave en open je de kenmerken in het infovenster. Het eerste dat u hier moet opmerken, zijn de waarden. We willen ze een beetje veranderen. Zoals eerder vermeld, wilt u dat de minimumwaarde 1 is, de maximale waarde 9 en de initiële waarde 1. Schakel het vakje continuos uit, zodat we daar geen enkele decimaal krijgen en dat is het dan. Verbind gewoon de "value changed" -gebeurtenis van uw slider met de eigenaar van het bestand en u hebt uw multiplier!
Je uiteindelijke app moet er ongeveer zo uitzien als hieronder weergegeven:
Deze zelfstudie heeft nauwelijks het oppervlak van wat mogelijk is in Interface Builder gekrast. Het is een extreem krachtige applicatie. Vandaag hebben we het basisgebruik van IB en de meest elementaire elementen in de IB-bibliotheek behandeld. Deze tutorial heeft laten zien hoe je een volledig functionele applicatie kunt maken, met behulp van Interface Builder, zonder erg veel code. Denk er altijd aan om de Human Interface-richtlijnen van de iPhone te raadplegen voordat je iets drastisch doet, en voor meer interface-inspiratie en hulp moet je zeker de UIC-account van Apple controleren..
Accentsconagua