Förstå WatchKit Layout System

märka. Du kan tänka på en grupp som en behållare för andra gränssnittselement. En grupp har många egenskaper som du kan anpassa direkt i Interface Builder.

Steg 1: Definiera layouten för din app

Det är viktigt att planera layouten i detalj innan utveckling påbörjas. Detta kommer att spara dig timmar och timmar av huvudvärk om du någon gång inser att den riktigt coola funktionen du ville bygga inte är möjlig eller inte ser bra ut på en fysisk enhet. Se till att du har läst riktlinjerna för Apple Watch Human Interface.

I det här exemplet ska jag lära mig hur man skapar en layout för en hotellapp där du kan hitta hotell nära din nuvarande plats. Jag utformar skärmen som visar detaljerna för ett visst hotell. Som jag nämnde i introduktionen skriver jag inte någon kod. I stället kommer jag att fokusera på att förstå mekanismen för det nya layoutsystemet.

Förlåt mina ritningsförmågor, det här är vad jag har i åtanke för min layout. De Hotellnamn kommer att vara högst upp på skärmen och under det kommer det att bli några stjärnikoner visar hotellets betyg. Jag vill sedan lägga till en bild tillsammans med dess adress och två knappar.

Steg 2: Lägga till en grupp

Vår gränssnittskontroller är tom för tillfället och det finns ingen basgrupp. Om du vill lägga till nya element drar du och släpper dem från Objektbibliotek till höger in i Gränssnittskontroller. De Scene Navigator till vänster är det användbart att kontrollera om elementen är rätt placerade. Det första du behöver göra är att lägga till en grupp, som gör det möjligt för oss att rulla vertikalt om innehållet inte passar på skärmen. Dra en grupp från Objektbibliotek och släpp den in i Gränssnittskontroller enligt nedanstående.

Nu när du har en grupp i din gränssnittscontroller kan du se dess attribut i Attribut Inspector till höger. Låt oss titta på några av dem mer detaljerat.

• Layout: Layouten bestämmer om gruppens element läggs ut horisontellt eller vertikalt. När du lägger till ett element placeras det bredvid eller under föregående.
• inläggningar: Det här attributet bestämmer överst, botten, vänster och höger inmatning för gruppen.
• Mellanrum: Som namnet antyder bestämmer det avståndet mellan elementen inom gruppen.
• Bakgrund: Du kan ställa in en bild som bakgrunden för gruppen och animera den genom att namnge bilderna i följd.
• Placera: Positionsattributet bestämmer gruppens horisontella (vänster, mitten, höger) och vertikal (topp, mitt, botten) position.
• Storlek: Storleksattributet bestämmer elementets bredd och höjd. Det finns tre värden, Storlek som passar innehållet (automatiskt justerad baserat på innehållet), Relativt till behållaren (tar behållarens storlek och multiplicerar den med det angivna värdet), Fast (konstant värde).

Tänk på att Apple Watch kommer i två storlekar. Du borde använda samma layout i båda fallen, men det kan hända att du stöter på några små skillnader. Genom att klicka på plusikonen till vänster om ett attribut kan du ange ett attribut som bara kommer att användas när appen körs på den angivna enheten.

Låt oss fortsätta bygga vår layout. Ändra Grupplayout till Vertikal så att innehållet rullar vertikalt när jag lägger till fler element. Ställ in Horisontell position till Centrum så att innehållet kommer att centreras. Slutligen ställa in Bredd tillskriva Bredd i förhållande till behållare med multiplikatorn inställd på 1. Detta kommer att expandera gruppen för att fylla hela skärmens bredd.

Steg 3: Lägga till en etikett

Nu när vi har satt upp huvudegenskaperna för vår containergrupp, låt oss lägga till en etikett till gruppen. Från Objektbibliotek, lägg till en etikett till gruppen du lagt till för en stund sedan. Om du väljer etiketten ser du hur bredden inte tar upp allt ledigt utrymme. Låt oss fixa det genom att ändra dess breddattribut till Relativt till behållaren. För att centrera etiketten, ändra Horisontell tillskriva Centrum och ställa in Textjustering till Centrum.

Vad händer om hotellets namn är för länge? Jag vill att den ska expandera och växa vertikalt. För att göra det, ändra Rader attributav etiketten till 0. Detta innebär att hotellet namn kommer att spänna över flera rader om det behövs. Ändra etikettens text för att se resultatet för dig själv. Resultatet ska se ut som nedanstående skärmdump.

Steg 4: Lägga till stjärnor

Vi vill också visa hotellets betyg. Tanken är att ha en grupp precis under hotellets namn med antalet stjärnor på hotellet. Lägg till en annan grupp i gruppen vi redan har. Med andra ord är den nya gruppen nestad inom den första gruppen. 

Jag vill att de fem stjärnorna ligger på samma linje och centreras. Som jag tidigare nämnde kan jag inte lägga till eller ta bort objekt vid körning, men jag kan dölja och visa objekt. Jag lägger till fem bilder till gruppen. Om hotellet har färre stjärnor kommer jag att gömma dem vid körning.

Dra fem bilder i den kapslade gruppen och sätt bredden på varje stjärna till Relativt till behållaren. Ändra multiplikatorn från 1 till 0,2. Anledningen till att välja 0,2 som multiplikatorn är enkel. Om jag vill att fem bilder passar in i ledigt utrymme på samma rad vill jag att varje bild ska vara 20% av gruppens bredd. Ändra Horisontell position till Centrum så att de alltid kommer att vara centrerade, oavsett hur många stjärnor det finns.

Låt oss sedan tilldela en cool bild till varje bild. Du hittar de bilder jag använder i källfilerna i denna handledning. Ställ in Bild tillskriva star.png och ändra läget till Aspect Fit för att säkerställa att bildförhållandet respekteras.

Resultatet ska likna den animerade bilden nedan. Du kan även försöka kontrollera Dold egenskap av en av bilderna i Attribut Inspector och se hur stjärnorna alltid är centrerade.

Steg 5: Lägga till bildbilden

Börja med att ladda ner exemplet av ett hotell från freeimages. Jag vill lägga till en bild av hotellet för att visa användaren hur hotellet ser ut. Lägg till en ny bild från Objektbibliotek som du bara gjorde tidigare för stjärnorna. Ändra Bild attribut till bilden du hämtade och ställa in Läge till Aspect Fit.

Ändra Horisontell position till Centrum och den Bredd till Relativt till behållaren. Var noga med att lägga till bilden som ett kapslat element i huvudgruppen genom att kontrollera laghierarkin i Scene Navigator till vänster. Uppsättning Höjd vara Storlek som passar innehållet att automatiskt ändra storlek på bilden baserat på bildens dimensioner.

Steg 6: Lägga till adressen

Nedanför bilden vill jag lägga till en adressetikett. Vi kan också lägga till en karta, men låt oss använda en etikett för det här exemplet. Dra en etikett från Objektbibliotek och placera den under hotellets bild. Uppsättning Rader till 0 och Bredd till Relativt till behållaren. Ändra texten för att vara en slumpmässig adress efter eget val.

Som du kanske har märkt är gränssnittskontrollen nu längre. Den anpassas automatiskt i storyboard så att du kan se innehållet.

Steg 7: Lägga till knappar

Gränssnittskontrollen ska ha två knappar längst ner. Jag vill att knapparna ska vara halva bredden på skärmen och placerade sida vid sida. Eftersom vår huvudgrupp har en vertikal layout måste vi lägga till en kapslad grupp så att knapparna placeras horisontellt istället för vertikalt.

Lägg till en ny grupp enligt nedan och lägg till två knappar till den. Ställ in deras Bredd tillskriva Relativt till behållaren och sätt multiplikatorn till 0,5. Ställ in Vertikal position för de två knapparna till Centrum att centrera dem vertikalt.

Ställ in texten på den första knappen till "Från $ 99" och bakgrundsfärgen till en snygg ser röd ut. Ställ in texten på den andra knappen till "Visa mer" och bakgrundsfärgen till blå. Gränssnittskontrollen ska nu se ut så här:

Kontrollera att du har valt rätt ordning och tryck på Kommando-R att köra WatchKit-programmet.

När iOS-simulatorn öppnas finns det en sak du behöver göra. Välj iOS-simulatorn och välj Hårdvara> Externa skärmar> Apple Watch 42 mm. Apple Watch Simulator kommer att visas bredvid din iPhone Simulator. Nu kan du se din arbetslayout i aktion. Se resultatet i videon nedan.

Slutsats

I denna handledning visade jag dig de viktigaste funktionerna och koncepten för att bygga komplexa layouter i WatchKit. Vi undersökte hur du lägger till och placerar användargränssnitt och några bra metoder. Du kan nu göra dina Apple Watch-appidéer till verklighet. Jag hoppas att du haft denna handledning.