Share
Deze tutorial leert je hoe je een opvallend iOS-menu kunt maken met behulp van het opensourceproject AwesomeMenu. Lees verder!
Het volgende is een korte demo van AwesomeMenu in actie:
Merk op dat alle pictogrammen die worden aangeboden door AwesomeMenu volledig kunnen worden aangepast. De standaard ster- / pluspictogrammen hierboven worden uitsluitend voor demonstratiedoeleinden gebruikt.
Open Xcode en maak een nieuw iOS-project. Selecteer "Single View Application" en klik vervolgens op "Volgende".
Geef de applicatie AwesomeMenuDemo een naam en voer de juiste waarden in voor de resterende tekstinvoervelden. Selecteer "iPhone" in de vervolgkeuzelijst met apparaten en zorg ervoor dat "Automatische referentietelling gebruiken" is geselecteerd. Selecteer niet "Storyboards gebruiken" of "Inclusief eenheidstests".
De volgende stap is het downloaden van de AwesomeMenu-code van de officiële GitHub-projectpagina. Nadat u toegang hebt tot de bestanden, moet u twee mappen naar uw eigen project slepen: de map "AwesomeMenu" met daarin de AwesomeMenu en AwesomeMenuItem klassen en de map "Afbeeldingen" met de ster- en plustekenafbeeldingen.
Wanneer u de afbeelding naar Xcode sleept, vink dan het selectievakje "Items naar de doelgroep kopiëren" aan, selecteer het keuzerondje "Groepen voor elke toegevoegde map maken" en vink het selectievakje naast "AwesomeMenuDemo" aan in het veld Toevoegen aan doelen tafel.
De animaties van AwesomeMenu zijn afhankelijk van het QuartzCore-framework. Als u dit kader wilt toevoegen, selecteert u het AwesomeMenuDemo-project in het deelvenster Projectnavigator en klikt u vervolgens op het tabblad "Fasen opbouwen". Vouw vervolgens de vervolgkeuzelijst "Binaire koppeling met bibliotheken" uit en klik op het pictogram "plus" om een nieuw kader toe te voegen.
Selecteer QuartzCore in de lijst om het framework aan uw project toe te voegen.
Als u het bovenstaande met succes hebt voltooid, ziet u nu het "QuartzCore" -kader in de Project Navigator naar links. Je kunt het laten staan waar het is of het naar de map "Frameworks" slepen om alles overzichtelijk te houden.
Ga nu verder naar de ViewController.h het dossier. U moet de AwesomeMenu-klassen in de ViewController importeren met de volgende code:
#importeren#import "AwesomeMenu.h"
Hierdoor kan de hoofdview controller van het project de AwesomeMenu-functionaliteit gebruiken.
Als u de instructies van stap 1 hebt gevolgd, gebruikt het project dat u hebt gemaakt het gebruik van Automatic Reference Counting (ARC) voor geheugenbeheer. ARC is een fenomenale methode voor het beheren van het toepassingsgeheugen, maar AwesomeMenu is geschreven met Manual Reference Counting (MRC) en kan daarom niet worden gecompileerd in een ARC-project zonder enige aanpassing.
Hoewel je zou kunnen proberen het AwesomeMenu-project handmatig van MRC naar ARC te converteren, zou ik dit niet aanbevelen. In plaats daarvan kunt u eenvoudig de -FNO-objc-arc compilervlag op elk van de AwesomeMenu-broncodebestanden om de compiler te vertellen om ARC niet toe te passen op die bestanden. Gaaf he?
Gelukkig is dit eenvoudig. Ga naar het tabblad "Fasen opbouwen" voor uw project en vouw het vervolgkeuzemenu "Compileerbronnen" uit. Dubbelklik op de AwesomeMenu.m bestand en een pop-upvenster met een tekstveld verschijnt. Voer "-fno-objc-arc" in dit vak in om de compilervlag toe te passen en klik vervolgens op "Gereed".
Doe daarna hetzelfde met de AwesomeMenuItem.m het dossier.
Met deze vlaggen op zijn plaats weet de compiler ARC toe te passen op alle broncodebestanden in uw project, behalve de twee niet-boogbestanden gerelateerd aan AwesomeMenu.
Laten we eerst een instantie van AwesomeMenu maken en deze in het midden van de view controller plaatsen:
- (void) viewDidLoad [super viewDidLoad]; // Voer een extra installatie uit nadat de weergave is geladen, meestal vanaf een punt. AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menu's: nihil]; [self.view addSubview: menu];
Voor nu, de menus parameter was ingesteld op nul, maar in de volgende stap zullen we dit vervangen door een array van AwesomeMenuItem voorwerpen. Ga je gang en voer het project uit en je zou een plusteken in het midden van het scherm moeten zien. Het omwisselen van het pictogram werkt, maar er zijn nog geen menu-opties weergegeven.
Aan elk menu-item geboden door AwesomeMenu kunnen drie verschillende afbeeldingen worden gekoppeld: een achtergrondafbeelding, een gemarkeerde achtergrondafbeelding en een inhoudsafbeelding. Standaard bevat AwesomeMenu de volgende afbeeldingen voor deze rollen:
Ga je gang en maak een UIImage object om naar elk van deze bestanden te verwijzen:
- (void) viewDidLoad [super viewDidLoad]; // Voer een extra installatie uit nadat de weergave is geladen, meestal vanaf een punt. UIImage * storyMenuItemImage = [afbeelding UIImageNamed: @ "bg-menuitem.png"]; UIImage * storyMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlight.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame menu's: nihil];
Maak nu je eerste twee menu-opties, plaats ze in een NSArray, en wijs die array toe aan de menuobjecten menus parameter:
UIImage * storyMenuItemImage = [afbeelding UIImageNamed: @ "bg-menuitem.png"]; UIImage * storyMenuItemImagePressed = [UIImage imageNamed: @ "bg-menuitem-highlight.png"]; UIImage * starImage = [UIImage imageNamed: @ "icon-star.png"]; AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, nihil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame-menu's: menuOptions]; [self.view addSubview: menu];
Bouw het project nu en voer het uit, en zou een scherm moeten zien dat lijkt op het volgende:
Als je extra menu-items toevoegt, plaatst AwesomeMenu ze automatisch in een vooraf gedefinieerde hoek. Standaard is de hoek gelijk aan een volledige cirkel, waarbij het middelpunt het plusteken is.
Voeg nog drie menu-items toe om dit effect in actie te zien:
AwesomeMenuItem * starMenuItem1 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; AwesomeMenuItem * starMenuItem2 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; AwesomeMenuItem * starMenuItem3 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; AwesomeMenuItem * starMenuItem4 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; AwesomeMenuItem * starMenuItem5 = [[AwesomeMenuItem alloc] initWithImage: storyMenuItemImage markedImage: storyMenuItemImagePressed ContentImage: starImage markedCententImage: nil]; NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, starMenuItem4, starMenuItem5, nil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame-menu's: menuOptions]; [self.view addSubview: menu];
Uw menu zou er nu als volgt uit moeten zien:
Het huidige effect zorgt ervoor dat menu-opties exploderen in een cirkel van 360 graden rond de menuknop. Dit werkt prima wanneer het menu zich in het midden van het scherm bevindt, maar u wilt waarschijnlijk het startpunt van het menu verplaatsen naar de bovenkant, onderkant of hoek van het apparaat.
Twee menu-eigenschappen werken samen om u in staat te stellen dit te regelen: menuWholeAngle en rotateAngle. De betrokken wiskundige principes vallen buiten het bestek van deze tutorial, maar de volgende screenshots illustreren de meest bruikbare combinaties:
Als u bijvoorbeeld de hierboven beschreven kwadranten met de rechterbenedenhoek wilt implementeren, past u de projectcode als volgt aan:
AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame-menu's: menuOptions]; // Lower-right Quadrant menu.menu WholeAngle = M_PI / 180 * 90; menu.rotateAngle = M_PI / 180 * 90; [self.view addSubview: menu];
Naast het bepalen van de plaatsingshoeken van de menuopties, kunt u ook de afstand van de menuopties vanuit het midden met de endRadius eigendom. Speel rond met deze waarde om te zien hoe het werkt.
Nu u weet hoe u de hoek en afstand van de plaatsing van de menuopties kunt bepalen, wilt u het menu waarschijnlijk in een van de vier hoeken van het scherm plaatsen. Om dit te doen, moet u het startpunt voor de menuknop aanpassen. Je kunt dit doen met de startpunt eigendom, zoals zo:
// Lower-right Quadrant menu.menu WholeAngle = M_PI / 180 * 90; menu.rotateAngle = M_PI / 180 * 90; menu.startPoint = CGPointMake (30.0f, 30.0f); [self.view addSubview: menu];
De regel die hierboven is toegevoegd, plaatst het menu op het punt (30, 30) op het scherm van de iPhone. Met andere woorden, het verschijnt nu in de linkerbovenhoek en ziet er als volgt uit:
Zoals u kunt zien, is het eenvoudig om het startpunt van het menu opnieuw in te stellen. Zorg ervoor dat u alleen zoveel menu-opties weergeeft als u redelijkerwijs kunt passen binnen de ingestelde hoekbeperking.
Nu u weet hoe u een aangepast menu kunt maken, bent u klaar om elke optie te implementeren. Telkens wanneer een gebruiker op een van de menuoptiebutons tikt, wordt een bericht verzonden naar de AwesomeMenu-deelnemer met het indexnummer van de geselecteerde optie. Om toegang tot die indexwaarde te krijgen, moet u de AwesomeMenuDelegate.
Open eerst ViewController.h en geef aan dat het voldoet aan het gedelegeerde protocol:
#importeren#import "AwesomeMenu.h" @interface ViewController: UIViewController
Ga vervolgens naar ViewController.m en voeg de gedelegeerde implementatie toe:
- (void) AwesomeMenu: (AwesomeMenu *) menu didSelectIndex: (NSInteger) idx NSLog (@ "Selecteer de index:% d", idx);
U moet ook opgeven dat de weergavecontroller de afgevaardigde voor het menu is, zoals:
NSArray * menuOptions = [NSArray arrayWithObjects: starMenuItem1, starMenuItem2, starMenuItem3, nihil]; AwesomeMenu * menu = [[AwesomeMenu alloc] initWithFrame: self.view.frame-menu's: menuOptions]; menu.delegate = zelf;
Op dit punt kunt u erachter komen welke menuoptie is geselecteerd door de index waarop is geklikt toe te wijzen aan de menu opties matrix. Om de menunavigatie te voltooien, kunt u een nieuwe weergavecontroller aan het scherm toevoegen of de bestaande weergavecontroller zo nodig wijzigen. Omdat de exacte implementatie specifiek is voor uw eigen toepassingen, zal dit worden overgelaten als een oefening voor de lezer.
AwesomeMenu is een opvallend en opwindend open-sourceproject voor het aanpassen van de navigatieknoppen van je app. Ik hoop dat je deze tutorial leuk vond en deel gerust opmerkingen of vragen hieronder. Je kunt me ook via Twitter bereiken door een bericht te sturen naar @markhammonds.
Accentsconagua