Het WatchKit-indelingssysteem begrijpen

label. Je kunt een groep zien als een container voor andere interface-elementen. Een groep heeft veel eigenschappen die u rechtstreeks in Interface Builder kunt aanpassen.

Stap 1: definieer de lay-out van uw app

Het is belangrijk om de lay-out in detail te plannen voordat u met de ontwikkeling begint. Dit bespaart je uren en uren aan hoofdpijn als je je op een gegeven moment realiseert dat de echt coole functie die je wilde bouwen niet mogelijk is of er niet goed uitziet op een fysiek apparaat. Zorg ervoor dat u de Apple Watch Human Interface Guidelines hebt gelezen.

In dit voorbeeld ga ik leren hoe je een lay-out kunt maken voor een hotel-app waarin je hotels kunt vinden in de buurt van je huidige locatie. Ik ontwerp het scherm dat de details voor een bepaald hotel laat zien. Zoals ik al zei in de inleiding, zal ik geen code schrijven. In plaats daarvan zal ik me concentreren op het begrijpen van het mechanisme van het nieuwe lay-outsysteem.

Mijn tekenvaardigheid achterwege latend, dit is wat ik in gedachten heb voor mijn lay-out. De hotel naam staat bovenaan het scherm en hieronder zijn er een paar sterren pictogrammen de beoordeling van het hotel weergeven. Ik wil dan een toevoegen beeld samen met zijn adres en twee toetsen.

Stap 2: Een groep toevoegen

Onze interface-controller is op dit moment leeg en er is geen basisgroep. Om nieuwe elementen toe te voegen, sleept u ze naar de Objectbibliotheek aan de rechterkant in de Interface Controller. De Scene Navigator aan de linkerkant is handig om te controleren of de elementen correct zijn gepositioneerd. Het eerste wat u moet doen, is een groep toevoegen, zodat we verticaal kunnen scrollen als de inhoud niet op het scherm past. Sleep een groep van de Objectbibliotheek en laat het in de Interface Controller zoals hieronder getoond.

Nu u een groep in uw interfacecontroller hebt, kunt u de kenmerken ervan zien in de Kenmerken Inspector aan de rechterkant. Laten we enkele daarvan in meer detail bekijken.

• Indeling: De lay-out bepaalt of de elementen van de groep horizontaal of verticaal zijn opgemaakt. Wanneer u een element toevoegt, wordt het naast of onder het vorige geplaatst.
• -openingen: Dit kenmerk bepaalt de bovenste, onderste, linker en rechter inzet voor de groep.
• Afstand: Zoals de naam aangeeft, bepaalt het de afstand tussen de elementen binnen de groep.
• Achtergrond: U kunt een afbeelding instellen als de achtergrond van de groep en deze animeren door de beelden opeenvolgend een naam te geven.
• Positie: Het positiekenmerk bepaalt de horizontale (linker, middelste, rechter) en verticale (bovenste, middelste, onderste) positie van de groep.
• Grootte: Het kenmerk size bepaalt de breedte en hoogte van het element. Er zijn drie waarden, Grootte om te passen inhoud (automatisch aangepast op basis van de inhoud), Ten opzichte van Container (neemt de containergrootte en vermenigvuldigt deze met de gedefinieerde waarde), vast (constante waarde).

Houd er rekening mee dat Apple Watch in twee maten verkrijgbaar is. U moet in beide gevallen dezelfde lay-out gebruiken, maar u kunt enkele kleine verschillen tegenkomen. Door op het plusteken links van een kenmerk te klikken, kunt u een kenmerk instellen dat alleen wordt toegepast wanneer de app op het opgegeven apparaat wordt uitgevoerd.

Laten we doorgaan met het bouwen van onze lay-out. Verander de Groepsindeling naar Verticaal zodat de inhoud verticaal schuift als ik meer elementen toevoeg. Stel de Horizontaal positie om Centrum zodat de inhoud gecentreerd wordt. Stel tot slot de Breedte toeschrijven aan Breedte ten opzichte van container met de vermenigvuldiger ingesteld op 1. Hierdoor wordt de groep uitgebreid om de volledige schermbreedte te vullen.

Stap 3: Een label toevoegen

Nu we de belangrijkste eigenschappen voor onze containergroep hebben ingesteld, kunnen we een label aan de groep toevoegen. Van de Objectbibliotheek, voeg een label toe aan de groep die je zojuist hebt toegevoegd. Als u het label selecteert, ziet u hoe de breedte niet alle beschikbare ruimte in beslag neemt. Laten we dit oplossen door het kenmerk width aan te passen Ten opzichte van Container. Als u het label wilt centreren, wijzigt u de Horizontaal attribuut aan Centrum En instellen Tekstuitlijning naar Centrum.

Wat gebeurt er als de naam van het hotel te lang is? Ik wil dat het zich uitbreidt en verticaal groeit. Om dat te doen, wijzigt u de lijnen attribuutvan het label aan 0. Dit betekent dat de naam van het hotel indien nodig meerdere lijnen zal overspannen. Verander de tekst van het label om het resultaat voor jezelf te zien. Het resultaat zou moeten lijken op de onderstaande schermafbeelding.

Stap 4: Sterren toevoegen

We willen ook de rating van het hotel laten zien. Het idee is om een ​​groep te hebben net onder de naam van het hotel met het aantal sterren van het hotel. Voeg nog een groep toe aan de groep die we al hebben. Met andere woorden, de nieuwe groep is genest in de eerste groep. 

Ik wil dat de vijf sterren op dezelfde lijn staan ​​en gecentreerd zijn. Zoals ik eerder al zei, kan ik tijdens runtime geen objecten toevoegen of verwijderen, maar ik kan objecten verbergen en weergeven. Ik zal vijf afbeeldingen toevoegen aan de groep. Als het hotel minder sterren heeft, zal ik ze tijdens runtime verbergen.

Sleep vijf afbeeldingen naar de geneste groep en stel de breedte van elke ster in Ten opzichte van Container. Verander de vermenigvuldiger van 1 naar 0.2. De reden om te kiezen 0.2 omdat de vermenigvuldiger eenvoudig is. Als ik wil dat vijf afbeeldingen passen in de beschikbare ruimte op dezelfde lijn, wil ik dat elke afbeelding 20% ​​van de breedte van de groep is. Verander de Horizontaal positie om Centrum zodat ze altijd gecentreerd zijn, ongeacht hoeveel sterren er zijn.

Laten we vervolgens een afbeelding toewijzen aan elke afbeelding. Je kunt de afbeeldingen die ik gebruik in de bronbestanden van deze tutorial vinden. Stel de Beeld attribuut aan star.png en verander de modus in Aspect Fit om te zorgen dat de beeldverhouding wordt gerespecteerd.

Het resultaat moet er ongeveer zo uitzien als de geanimeerde afbeelding hieronder. U kunt zelfs proberen de Verborgen eigendom van een van de afbeeldingen in de Kenmerken Inspector en zie hoe de sterren altijd gecentreerd zijn.

Stap 5: De hotelafbeelding toevoegen

Begin met het downloaden van het voorbeeld van een hotel uit gratis afbeeldingen. Ik wil een afbeelding van het hotel toevoegen om de gebruiker te laten zien hoe het hotel eruit ziet. Voeg een nieuwe afbeelding toe vanuit de Objectbibliotheek zoals je eerder deed voor de sterren. Verander de Beeld attribuut aan de afbeelding die u hebt gedownload en stel de mode naar Aspect Fit.

Verander de Horizontaal positie om Centrum en de Breedte naar Ten opzichte van Container. Zorg er altijd voor dat u de afbeelding toevoegt als een genest element van de hoofdgroep door de lagenhiërarchie in de Scene Navigator aan de linkerzijde. set Hoogte worden Grootte om te passen inhoud om de grootte van de afbeelding automatisch aan te passen op basis van de afmetingen van de afbeelding.

Stap 6: Het adres toevoegen

Onder de afbeelding zou ik een adreslabel willen toevoegen. We kunnen ook een kaart toevoegen, maar laten we een label gebruiken voor dit voorbeeld. Sleep een label van de Objectbibliotheek en plaats het onder de afbeelding van het hotel. set lijnen naar 0 en Breedte naar Ten opzichte van Container. Verander de tekst om een ​​willekeurig adres van uw keuze te zijn.

Zoals je misschien hebt gemerkt, is de interface-controller nu groter. Het formaat van het storyboard wordt automatisch aangepast zodat je de inhoud ervan kunt zien.

Stap 7: Knoppen toevoegen

De interface-controller moet onderaan twee knoppen hebben. Ik wil dat de knoppen half zo breed zijn als het scherm en naast elkaar staan. Omdat onze hoofdgroep een verticale lay-out heeft, moeten we een geneste groep toevoegen zodat de knoppen horizontaal worden geplaatst in plaats van verticaal.

Voeg een nieuwe groep toe zoals hieronder getoond en voeg er twee knoppen aan toe. Stel hun in Breedte attribuut aan Ten opzichte van Container en stel de multiplier in op 0.5. Stel de Verticaal positie van de twee knoppen om Centrum om ze verticaal te centreren.

Zet de tekst van de eerste knop op "Vanaf $ 99" en de achtergrondkleur voor een mooi uitziend rood. Zet de tekst van de tweede knop op "Bekijk meer" en de achtergrondkleur naar blauw. De interface-controller zou er nu als volgt uit moeten zien:

Controleer of u het juiste schema hebt geselecteerd en druk op Command-R om de WatchKit-applicatie uit te voeren.

Wanneer de iOS Simulator wordt geopend, is er nog een ding dat je moet doen. Selecteer de iOS-simulator en kies U bevindt zich hier: Hardware Externe beeldschermen> Apple Watch 42 mm. De Apple Watch Simulator verschijnt naast je iPhone Simulator. U kunt nu uw werklay-out in actie zien. Zie het resultaat in de onderstaande video.

Conclusie

In deze zelfstudie heb ik je de belangrijkste functies en concepten getoond om complexe lay-outs in WatchKit te maken. We hebben gekeken naar het toevoegen en positioneren van elementen van de gebruikersinterface en enkele praktische tips. Je bent nu in staat om de ideeën van je Apple Watch-app om te zetten in realiteit. Ik hoop dat je deze tutorial leuk vond.