Share
Het WatchKit-framework van Apple voor het ontwikkelen van Apple Watch-applicaties biedt verschillende manieren waarop u als ontwikkelaar verschillende soorten interfaces kunt presenteren aan gebruikers van uw app. Dit omvat op pagina's gebaseerde, hiërarchische en modale interfaces, die allemaal contexten kunnen gebruiken om dynamische inhoud te maken.
In deze zelfstudie laat ik je zien hoe elk interfacetype in te stellen en te manipuleren, en welke use cases ze elk voor.
Voor deze zelfstudie is vereist dat u Xcode 6.2+ gebruikt en vertrouwd bent met het maken van een standaard Apple Watch-app. Als dit niet het geval is, lees dan enkele van de andere WatchKit-tutorials over Tuts + en kom daarna hierop terug. Je zult ook het startersproject van GitHub moeten downloaden.
De eerste soort interface die u in uw Apple Watch-app gaat implementeren, is een op een pagina gebaseerde interface. Dit soort interfaces werken op dezelfde manier als het standaard startscherm van een iOS-apparaat om meerdere pagina's met informatie in een ingestelde volgorde weer te geven. Op pagina's gebaseerde interfaces zijn het meest geschikt voor wanneer u meerdere informatieschermen moet weergeven die aan elkaar gerelateerd zijn.
Open het startersproject in Xcode en navigeer naar Interface.storyboard. Het storyboard bevat al zes interfacecontrollers zoals je hieronder kunt zien.
Als u een op pagina's gebaseerde interface wilt maken, moet u een volgende paginarelatie-segue tussen de interfacecontrollers die u wilt koppelen. druk de Controle op uw toetsenbord en klik en sleep van de ene interfacecontroller naar de andere. Bedien en sleep van de eerste interface-controller naar de tweede en, indien correct gedaan, a Relatie Segue pop-up zou moeten verschijnen. Kies in dit pop-upmenu de volgende pagina optie zoals hieronder getoond.
Volg dezelfde stappen om de tweede interfacecontroller aan de derde interface te koppelen. Het storyboard zou nu de segues moeten weergeven tussen de drie belangrijkste interfacecontrollers. Merk op dat de volgorde waarin u deze segmenten maakt, bepalend is voor de volgorde waarin de interfaces in uw WatchKit-app verschijnen.
Bouw en voer je app uit en open een Apple Watch als een extern scherm in de iOS-simulator. U zult zien dat de app de Eerste pagina interface-controller en heeft onderaan drie punten, die de drie beschikbare pagina's voorstellen. U kunt tussen de drie pagina's vegen door naar links of rechts te vegen, net als op een iOS-apparaat.
Wanneer u een op pagina's gebaseerde interface gebruikt, kunt u aangeven welke interfacecontroller u wilt laten verschijnen bij het opstarten. Dit wordt gedaan met behulp van de becomeCurrentPage methode. Open SecondPageInterfaceController.swift en voeg de volgende regel toe aan de awakeWithContext (_ :) methode:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) self.becomeCurrentPage ()
Bouw en voer uw app opnieuw uit en u zult zien dat de tweede pagina nu wordt gepresenteerd bij de lancering.
Tijdens runtime kunt u ook een expliciete volgorde opgeven waarin de pagina's van uw interface worden weergegeven. Dit wordt gedaan met behulp van de reloadRootControllersWithNames (_: contexten :) klassemethode.
De eerste parameter van deze methode is een array van strings met de storyboard-ID's van de interfacecontrollers die u wilt laden. De volgorde van de ID's in deze array bepaalt de volgorde waarin de pagina's worden weergegeven.
De tweede parameter is een optionele AnyObject Typ array met de contexten voor elk van de pagina's. Je leert later in deze tutorial over contexten. Voorlopig laat je deze parameter gewoon staan als nul. Vervang de regel die u zojuist aan uw hebt toegevoegd awakeWithContext (_ :) methode met de volgende:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) WKInterfaceController.reloadRootControllersWithNames (["Third Page", "First Page"], contexten: nihil)
Bouw en voer uw app uit en u zult zien dat nadat het laden is voltooid, uw app de derde pagina zal laten zien, gevolgd door de eerste pagina.
Naast pagina-gebaseerde interfaces, kunt u ook hiërarchische interfaces implementeren in een Apple Watch-app. We spreken van hiërarchische interfaces bij de overgang tussen interfacecontrollers met een Duwen overgang.
Het gedrag van een hiërarchische interface is vergelijkbaar met die van de UINavigationController klasse in een iOS-app. Dit type Apple Watch-interface is het best geschikt om de ene na de andere interface op een lineaire manier weer te geven.
opnieuw bezoeken Interface.storyboard en sleep de Hoofdinvoerpunt pijl naar de Transition interface-controller zoals hieronder getoond. Hierdoor wordt de opgegeven interface-controller eerst weergegeven wanneer de app wordt gestart.
Open vervolgens TransitionInterfaceController.swift en voeg de volgende regel toe in de pushButtonPressed methode:
Accentsconagua
@IBAction func pushButtonPressed () self.pushControllerWithName ("Hierarchal Interface", context: nil)Vergelijkbaar met de reloadRootControllersWithNames (_: contexten :) methode die u eerder hebt gebruikt, de eerste parameter van pushControllerWithName (_: context :) is de storyboard-ID van de interfacecontroller die u wilt gebruiken. De tweede parameter is de context voor deze nieuwe interfacecontroller.
Bouw en voer uw app uit. Je zou de volgende interface moeten zien wanneer je WatchKit-app klaar is met lanceren.
Tik op de hiërarchische moet de volgende interface op het scherm worden gedrukt, zoals hieronder wordt weergegeven.
U zult merken dat er een kleine pijl in de linkerbovenhoek van het scherm is. Als u op de pijl tikt, keert u terug naar de vorige interface. Het is ook mogelijk om de huidige interface-controller in code te laten verschijnen. In de HierarchalInterfaceController klasse, werk het popButtonPressed methode als volgt:
@IBAction func popButtonPressed () self.popController ()
Bouw en voer je app opnieuw uit. Tik op de Knal knop zou nu hetzelfde effect moeten hebben als het drukken op de pijl terug links bovenaan.
Als u echter wilt terugkeren naar de allereerste interface in de hiërarchie, roept u de popToRootController methode in plaats van de popController methode. Voor uw huidige app zouden deze methoden hetzelfde resultaat opleveren als er momenteel slechts twee interfaces in de hiërarchie zijn.
Modale interfaces werken op dezelfde manier als hiërarchische interfaces. Het grote verschil tussen beide is dat modale interfaces zijn ontworpen om interfaces boven op elkaar weer te geven in plaats van op een lineaire manier tussen deze interfaces over te schakelen.
Ga terug naar TransitionInterfaceController.swift en voeg de volgende regel code toe aan de modalButtonPressed methode:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Modal Interface", context: nil)Om de modale interface af te sluiten, werkt u het dismissButtonPressed methode als volgt in de ModalInterfaceController:
@IBAction func dismissButtonPressed () self.dismissController ()
Bouw en voer uw app uit. Druk op modaal knop om een modale interface te presenteren.
Een voordeel van modale interfaces is dat u een pagina-gebaseerde interface modaal kunt presenteren. Dit wordt gedaan met behulp van de presentControllersWithNames (_: contexten :) methode. De eerste parameter is een array met storyboard-ID's en de tweede parameter is een array van contextobjecten. In TransitionInterfaceController.swift, update de implementatie van de modalButtonPressed methode als volgt:
@IBAction func modalButtonPressed () self.presentControllerWithNames (["Modal Interface", "Hierarchal Interface"], contexten: nihil)
Voer uw app uit en tik op de modaal knop. Een pagina-gebaseerde interface moet modaal worden gepresenteerd met de volgende twee interfaces:
Zoals je hebt gezien in de verschillende methoden die tot nu toe in deze tutorial zijn gebruikt, kun je bij het overstappen naar een nieuwe interface in een context slagen om de interface te configureren die op het punt staat gepresenteerd te worden. De context die u doorgeeft aan uw nieuwe interface is optioneel en kan elk gegevenstype zijn (AnyObject?).
Dit betekent dat u elk type gegevens tussen interfaces kunt doorgeven, van eenvoudige cijfers tot complexe gegevensstructuren. De context wordt overgedragen aan de nieuwe interface in de awakeWithContext (_ :) methode. Het voordeel van het doorgeven van een context aan een interfacecontroller is om de inhoud ervan dynamisch te configureren, dat wil zeggen tijdens runtime.
Open TransitionInterfaceController.swift en update de implementatie van de modalButtonPressed methode als volgt:
@IBAction func modalButtonPressed () self.presentControllerWithName ("Modal Interface", context: "Aangepaste tekst")In ModalInterfaceController.swift, update de implementatie van de awakeWithContext (_ :) als volgt:
override func awakeWithContext (context: AnyObject?) super.awakeWithContext (context) if let text = context as? Tekenreeks button.setTitle (tekst)
We gebruiken optionele binding om te zien of de aangeboden context kan worden gegoten in een Draad. Als het kan, zetten we de knopde titel van die waarde.
Bouw en voer uw app uit en open de modale interface. De titel van de knop moet zijn veranderd in Aangepaste tekst.
Als je geïnteresseerd bent om je WatchKit-opleiding naar een hoger niveau te tillen, kun je onze volledige cursus over de ontwikkeling van WatchKit bekijken..
In deze tutorial hebt u geleerd hoe u de drie belangrijkste interfacetypen die beschikbaar zijn voor WatchKit-toepassingen, op pagina's gebaseerd, hiërarchisch en modaal, kunt instellen en gebruiken. U hebt ook geleerd hoe u interfacecontexten gebruikt om interfacecontrollers tijdens runtime te configureren. U weet nu ook wanneer het het beste is om elk van deze interfacetypes in uw WatchKit-applicaties te gebruiken. U kunt meer lezen over interfacenavigatie in de documentatie van Apple.
