Hur skapar jag en komplex layout för Apple Watch Apps?

Eftersom skärmstorleken på Apple Watch är liten, placeras objekt som etiketter, bilder eller reglage i en app under varandra. Medan denna begränsning innebär att du inte kan placera objekt på den exakta platsen du vill, är det fortfarande möjligt att skapa en komplex layout för din Watch-app. Läs vidare för att få reda på hur.

Innan du börjar med denna handledning, var noga med att skapa ett nytt Xcode-projekt och lägg till Apple Watch-målet på det. Du hittar instruktionerna för den här uppgiften här.

För att skapa en komplex layout för en app använder vi ett gruppobjekt. Ett gruppobjekt kan innehålla andra objekt, och du kan placera dem vertikalt eller horisontellt.

1. Öppna Interface.storyboard filen i WatchKit-appmålet. I Objektbibliotek, söka efter Grupp, och dra objektet i blank storyboard.

Ursprungligen kommer den nya gruppen att vara tom. Innan vi lägger till andra element i gruppen, låt oss ta en titt på de tillgängliga attributen i verktyg panel.

2. Ett anmärkningsvärt attribut för gruppen är dess layout. Som standard är den inställd på Horisontell, vilket innebär att objekt inom gruppen kommer att placeras bredvid varandra. Du kan ändra den till Vertikal om du vill.

3. Nu är det dags att lägga till några objekt i gruppen. I det här exemplet har jag lagt till två etiketter till gruppen och placerat dem vertikalt. Du kan berätta att de två objekten ligger inuti gruppen genom att titta på Dokumentbeskrivning.

4. Ett vanligt problem när du använder den horisontella layouten i en grupp är att det kan finnas tomt utrymme i den gruppen eftersom det inte finns något objekt som tar upp mellanslaget. Lösningen för detta är att välja objektet, hitta breddattributet under avsnittet Storlek, ändra det till Relativ till behållare och ställ in önskad storlek.

De behållarens storlek (grupp) är alltid 1, så ett värde av 0.5 kommer att göra det valda objektets bredd halva storleken på gruppen. I det här exemplet har jag två etiketter. Därför kommer en bredd på 0,5 för varje etikett att göra att de täcker hela gruppen.

Beroende på hur många objekt du har i en grupp kanske du vill ställa in en annan storlek.

5. Det är möjligt att skapa nestade grupper som exemplet nedan. När du vill inhysa en grupp drar du den under önskad grupp i dokumentets disposition. Som du kan se är det möjligt att skapa en komplex layout för appen även med begränsningen av SDK. Men eftersom skärmen på klockan är liten rekommenderas det inte att skapa en layout som är för komplex eftersom användare kan hitta din app svår att använda.