Hur man skapar en enkel Timer applikation för iOS (3 / 5 steg)

Steg 3: Skapa gränssnittet

Obs: I detta steg kommer vi att skapa användargränssnittet för timern. Detta kommer att omfatta den tid picker som knapparna starta, stoppa och pausa.

3a. Klicka på den Main.storyboard filen för att öppna upp.

Obs: I projektet, kommer du att få filer som skapas automatiskt. Den enda filen som vi kommer att arbeta med i det här steget är filen Main.storyboard. Kort sagt, tillåter denna fil oss att dra-och-släpp-gränssnitt objekt som senare kan anslutas till vår kod.

3b. dra och släpp "Date Picker" gränssnitt objektet från listan över objekt i användargränssnittet i det nedre högra hörnet av Xcode till storyboard-fönstret.

Se ovanstående bilder.

3 C. Lägg till objektet "Date Picker" till toppen av skärmen. Klicka på ikonen längst ned i fönstret Xcode som ser ut som en triangel mellan till vertikala linjer, klicka sedan på alternativet "Lägg till saknade begränsningar".

Obs: Du kan placera objektet "Date Picker" någonstans på skärmen som du vill. Begränsningarna kommer att se våra datumväljare objektet passar ordentligt på olika storlek iPhone skärmar.

3D. Klicka på datumväljare-objektet och sedan öppna fliken attribut i det övre högra hörnet av fönstret Xcode.

Obs: Fliken attribut kommer att alternativet direkt till vänster om ikonen som ser ut som en linjal.

3e. ändra alternativet läge att räkna ner Timer, och se till att alternativet intervall är inställt på 1 minut.

3F. dra objektet interface märkt "Knappen" på din storyboard. När den läggs till på din storyboard, ändra titeln till alternativet om knappen "Start" från fliken attribut.

Obs: Denna knapp kommer också att våra "Stop"-knappen, och vi kommer koden att funktionen senare. "Knappen" objektet placeras i samma område som våra datumväljare objekt. Fliken attribut kommer också vara placerade i samma situation som med vår datumväljare objekt. Du kan ändra en mängd andra inställningar för vår knapp, inklusive din egen anpassade knappen. Men för att detta projekt, vi kommer att använda knappen Standard System.

3 G. drar en annan knapp till din storyboard, precis som vi gjorde med Start-knappen. Ändra titeln på den här knappen till paus.

Obs: Senare kommer vi att ändra denna knapp för att vara knappen återuppta samt att återuppta timern. Precis som med Start/stopp-funktion, kommer detta att ske i koden.

3 H. dra en Label objektet till din storyboard, och se till att det är ovanpå objektet datumväljare. Sträcka ut storleken på etiketten så det är samma storlek som objektet datumväljare.

Obs: Denna etikett innehåller räkna ner tiden. Objektet Label kan hittas där knappen och datumväljare objekten finns.

Lägg till begränsningar 3i. etikett objektet genom att klicka på ikonen längst ner som ser ut som en triangel mellan två vertikala linjer, välj sedan "Lägg till saknade begränsningar".

3j. ändrar egenskapen 'Text' från fliken attribut till ' 00:00 '. Kontrollera att egenskapen teckensnitt anges till systemet, och teckenstorleken är inställd till 44.

3 K. egenskapen justeringen till centrerad, och ändra egenskapen bakgrunden till vit färg.

3L. Ange egenskapen Alpha till 0.

Obs: Vi kommer att ta en titt på resonemanget för detta egenskaper när vi börjar coding ansökan. På bilderna ovan visar vad din storyboard bör likna. Du kommer att märka de rätt egenskaperna för objektet Label är på höger sida.