Share
In deze tutorial maakt u kennis met een van de meest gebruikte Cocoa-Touch-klassen: UIAlertView. Met deze klasse kunt u gebruikers snel op de hoogte stellen van belangrijke of urgente toepassingsinformatie. U kunt ook gebruikersfeedback forceren door de UIAlertView-klasse te combineren met het UIAlertViewDelegate-protocol. Lees verder om te leren hoe!
Maak een nieuw Xcode-project met behulp van de sjabloon "Single View Application".
Noem de toepassing "AlertDemo" en voeg uw eigen bedrijfsidentificatie in of gebruik "com.mobiletuts.alertdemo" als u er nog geen hebt. Stel "iPhone" in voor de apparaatfamilie en bewaar de standaardcontroles. Als u klaar bent, klikt u op Volgende.
Selecteer een locatie op uw harde schijf om het project op te slaan en klik vervolgens op "Opslaan".
Nadat u uw project hebt gemaakt, vouwt u de map Ondersteunende bestanden uit in het deelvenster Projectnavigator links van het Xcode-venster. CTRL + Klik (of klik met de rechtermuisknop) in de map Ondersteunende bestanden en selecteer Voeg toe> Nieuwe groep. Noem de nieuwe "afbeeldingen" van de groep, want hier slaan we de afbeeldingen op voor onze toepassing.
Download het projectresourcebestand dat aan deze tutorial is gekoppeld en open de map "images". Versleep alle afbeeldingen naar de groep "afbeeldingen" die u zojuist hebt gemaakt. Controleer het zeker "Kopieer items naar de map van de bestemmingsgroep (indien nodig)" omdat dit ervoor zorgt dat de resources daadwerkelijk worden gekopieerd naar uw project en niet simpelweg worden gekoppeld als referenties. Uw setup in Xcode ziet er nu ongeveer zo uit:
Vind de MainStoryboard.storyboard bestand in de Project Navigator en selecteer het. U hebt zojuist het storyboard voor het project geopend, dat zou moeten bestaan uit één scène of View Controller, die we kunnen aanpassen om de interface voor de toepassing te maken.
Als het storyboard open is, moet de Xcode-interface nu de objectbibliotheek in de rechterbenedenhoek weergeven. Gebruik het zoekvak van de objectbibliotheek om een te vinden UIImageView voorwerp. Plaats het afbeeldingsobject in het midden van het scherm en wijzig het handmatig om de weergave te vullen. Zoek vervolgens de beeld veld in de attributencontrole (het attribuutcontrole moet zich in de rechterbovenhoek van Xcode bevinden). Stel de waarde voor het afbeeldingsveld in op "background.png". Je zou nu een mooie, stalen textuur moeten hebben die de view controller vult.
Gebruik de Objectbibliotheek opnieuw om een UIButton object en sleep die knop vervolgens naar de scène. De attribuutcontrole moet nu informatie voor het knopobject weergeven. Stel de type drop-down veld naar "aangepast". Stel vervolgens de beeld veld naar "button.png". Je zou nu de knopafbeelding op de scèneweergave controller moeten zien, maar het ziet er waarschijnlijk niet goed uit. Als het knopobject is geselecteerd, moet u selecteren Editor> Grootte om op inhoud te passen om de grenzen van de knoppen automatisch aan te passen aan de grootte van de afbeelding. Plaats vervolgens de knop in het scherm in het midden door deze naar het midden te slepen.
De knop moet nu correct zijn geconfigureerd voor de standaardstatus, maar we willen een andere afbeelding weergeven wanneer de knop daadwerkelijk wordt ingedrukt. Verander de staat config drop-down waarde naar "gemarkeerd". De wijzigingen die u aanbrengt in de kenmerkencontrole, zijn nu alleen van toepassing op de gemarkeerde status. Stel de beeld attribuut voor de gemarkeerde knopstatus aan button-pressed.png. Je Storyboard zou er nu als volgt uit moeten zien:
Dit is een goed moment om je voortgang te testen, dus sla je werk op ( Bestand> Opslaan) en voer het project vervolgens uit in de iPhone-simulator (Product> Run). Je zou nu op de knop moeten tikken en de beeldverandering in de simulator kunnen zien.
Terwijl het storyboard van het project nog steeds open is, klik je op de knop "Show The Assistant Editor" in de buurt van de rechterbovenhoek van het Xcode-venster om de broncodelijst weer te geven voor ViewController.h. Houd vanuit dit perspectief zowel de knop Control (CTRL) als de muisknop (de linkermuisknop als uw muis er twee heeft) boven het knopobject in de scène Storyboard ingedrukt en sleep naar de lijst met broncodes, net boven de @einde lijn.
Er wordt een nieuw dialoogvenster geopend dat automatisch een verbinding tot stand brengt tussen het interface-element en uw viewcontroller-klasse. Vanuit deze pop-up kunt u verkooppunten of acties creëren. Uitgangen worden gebruikt om eigenschappen te maken die verwijzen naar uw Interface Builder-objecten en acties worden gebruikt om methoden aan IB-objectacties te koppelen.
Selecteer "Actie" in de verbinding drop down, voer "showMessage" in als de verbindingsnaam en klik vervolgens op Verbinden. Interface Builder zou zojuist de volgende regel aan je moeten toevoegen ViewController.h het dossier:
- (IBAction) showMessage: (id) afzender;
In aanvulling op, ViewController.m zou nu deze methode-definitie moeten hebben:
- (IBAction) showMessage: (id) afzender
Wanneer de gebruiker op de knop tikt, wordt de code in deze methode uitgevoerd. Dat betekent dat we eindelijk klaar zijn om de code in te gaan voor het weergeven van a UIAlertView en reageren op zijn gedelegeerde methoden!
Nu u uw projectsjabloon hebt ingesteld, bent u klaar om UIAlertView te gebruiken om uw bericht te activeren wanneer op de aangepaste knop wordt gedrukt. Open de ViewController.m bestand en typ het volgende in de toon bericht methode die je eerder hebt gemaakt:
- (IBAction) showMessage: (id) afzender UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hallo wereld!" bericht: @ "Dit is uw eerste UIAlertview-bericht." delegate: nil cancelButtonTitle: @ "OK" otherButtonTitles: nil]; [berichtenscherm];
Hierboven maakt en initialiseert u uw instantie van de UIAlertView-klasse. De initWithTitle: en bericht: de parameters spreken voor zichzelf en worden gemakkelijk begrepen nadat een waarschuwing is weergegeven. De delegeren: parameter verwijst naar welke klasse gemachtigde notificatieberichten moet ontvangen voor de UIAlertViewDelegate (later aangetoond). De CancelButton: parameter is de standaardknop die samen met de waarschuwing moet worden weergegeven, en de otherButtonTitles: parameter wordt gebruikt om één of meerdere extra opties weer te geven die de gebruiker kan selecteren.
Na het maken van een waarschuwingsobject, de [bericht] oproep toont eigenlijk onze boodschap door onze nieuwe UIAlertView op het scherm te laten verschijnen.
Als u de toepassing nu bouwt en debugt, ziet u dat als u op de knop tikt, ons bericht wordt weergegeven!
OPMERKING: Als er niets gebeurt wanneer u op de knop in de simulator tikt, moet u ervoor zorgen dat u de wijzigingen die u in het storyboard-bestand hebt gemaakt, daadwerkelijk hebt opgeslagen en dat de actie 'Binnenin bijwerken' is verbonden met de toon bericht: methode.
Het toevoegen van extra knoppen aan een UIAlertView kan worden gedaan wanneer u uw object of op elk gewenst moment initialiseert. Om knoppen toe te voegen in de initialisatietijd in de bovenstaande code, zou u eenvoudig het toon bericht: methode zoals zo:
UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hallo wereld!" bericht: @ "Dit is uw eerste UIAlertview-bericht." delegate: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nihil]; [berichtenscherm];
Als u knoppen wilt toevoegen nadat u uw melding hebt geïnitialiseerd, gebruikt u de volgende coderegels:
UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hallo wereld!" bericht: @ "Dit is uw eerste UIAlertview-bericht." delegate: nil cancelButtonTitle: @ "Button 1" otherButtonTitles: nil]; [message addButtonWithTitle: @ "Button 2"]; [message addButtonWithTitle: @ "Button 3"]; [berichtenscherm];
Beide codefragmenten zijn equivalent, maar gebruiken de addButtonWithTitle: methode maakt het gemakkelijk om voorwaardelijk knoppen toe te voegen aan uw meldingen, misschien door ze in te pakken als statements.
Schakel terug naar ViewController.h en wijzig uw klassendeclaratielijn als volgt:
@interface ViewController: UIViewController
Hierdoor kan je klas reageren op de UIAlertViewDelegate protocol methoden. Om te reageren op knopbedieningen in onze UIAlertView, we zullen de gebruiken - alertView: clickedButtonAtIndex: protocol methode. Terug in ViewController.m, voeg dit toe aan je klas:
- (ongeldig) alertView: (UIAlertView *) alertView ClickedButtonAtIndex: (NSInteger) buttonIndex
Zoals u kunt zien aan de hand van de naam van de methode, accepteert deze methode een verwijzing naar de UIAlertView object dat we eerder hebben gemaakt en de knopindex die door de gebruiker is geselecteerd. U kunt in de verleiding komen om eenvoudigweg op de variabele buttonIndex te schakelen om te bepalen welke knop door de gebruiker is geselecteerd, maar wat zou er gebeuren als u voorwaardelijk knoppen aan de melding toevoegt? In dat scenario is de knop met index 1 niet altijd die u wilt. Een veel betere manier is om te testen tegen de titel van de knop en dienovereenkomstig te handelen, zoals zo:
- (ongeldig) alertView: (UIAlertView *) alertView ClickedButtonAtIndex: (NSInteger) buttonIndex NSString * title = [alertView buttonTitleAtIndex: buttonIndex]; if ([title isEqualToString: @ "Button 1"]) NSLog (@ "Knop 1 is geselecteerd."); else if ([title isEqualToString: @ "Button 2"]) NSLog (@ "Button 2 was geselecteerd."); else if ([title isEqualToString: @ "Button 3"]) NSLog (@ "Button 3 was geselecteerd.");
Er is nog een tweak die we moeten maken voordat dit zal werken. Ga terug naar de UIAlertView-initialisatieverklaring en werk het delegeren: parameter om de te accepteren zelf sleutelwoord in plaats van nul. Na dit te doen, zou het codeblok er als volgt uit moeten zien:
UIAlertView * message = [[UIAlertView alloc] initWithTitle: @ "Hallo wereld!" bericht: @ "Dit is uw eerste UIAlertview-bericht." delegate: self cancelButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", nihil]; [berichtenscherm];
Als u de toepassing nu bouwt en debugt, zou u meerdere knoppen moeten kunnen selecteren en een verklaring kunnen zien afdrukken naar de console wanneer een knop is geselecteerd (heeft u hulp nodig bij het vinden van de console? Beeld> Foutopsporingsgebied> Console activeren uit het Xcode-menu).
Dit is hoe de uiteindelijke waarschuwingsweergave eruit zou moeten zien in de simulator:
Dit concludeert onze inleidende tutorial over UIAlertView. Naast wat we vandaag hebben besproken, zijn er nog veel meer opties die door het UIAlertViewDelegate protocol en, met de release van iOS 5, enkele extra manieren om te gebruiken UIAlertView. Als u een extra zelfstudie over deze geavanceerde onderwerpen voor waarschuwingsweergave wilt zien, kunt u me dit laten weten in de sectie Opmerkingen hieronder! Voel je ook vrij om vragen of opmerkingen in te sturen via mijn persoonlijke twitter @markhammonds of het officiële Mobiletuts + twitter account @envatomobile.
Accentsconagua