Göra en iOS App med Swift (3 / 6 steg)

Steg 3: Arbetar på UI.

I den vänstra rutan bör du se en lista över filer. Välj en som säger Main.Storyboard. (Bild 1)

Mycket länge sedan skapa UI (User Interface) med bara koden var tillbaka normen, men nu Apple har gjort det mycket lätt att både design- och programmet appen direkt från Xcode. Storyboard filer omfattar UI i din app. Du lägger till element i Användargränssnittet i saker som kallas UIViews som klarar av dessa element i Användargränssnittet. Du kan sedan koppla upp element i Användargränssnittet till faktiska Swift-koden att göra dem interaktiva. Medan de flesta app utvecklare oroa funktioner i app innan utforma en fungerande UI, för att lärande ska vi göra det i omvänd ordning. Först ska vi ställa in UI.

I nederkant högra hörnet på skärmen bör du se en textruta. Ovanför detta kommer vara ett gäng UI element kallas objekt. Ange sökfrågan "etikett" och tryck enter. Du bör se UILabel objektet dyker upp. UILabels används för att visa text. (Bild 2)

Dra etiketten från sökrutan till det övre vänstra hörnet i den vita rutan som visas på skärmen. (Bild 3)

Dra etikettens höger fältetikettsgräns med den lilla vita prickar kring etiketten på höger sida av skärmen. (Bild 4)

Nu söka för "Knappen" på samma sätt som du etikett. Dra det första resultatet som säger "Knappen" till strax under etiketten. Inget behov av att tänja på knappen gränserna. (Bilder 5 + 6)

Slutligen för detta steg tittar på bild 7. Se där anteckningen och klicka på som. Om du inte kan se det, Läs detta: I det övre verktygsfältet, nära det högra hörnet du borde se något som ser ut som textrader som valts. Bredvid den en knapp med två överlappande cirklar. Klicka på Överlappande cirklar.

Med detta görs ett annat fönster bör sida vid sida med storyboard dyka upp. Genom att klicka på knappen tog du upp den biträdande redaktören. Biträdande redaktör används för att öppna två filer på en gång, och boy kommer det praktiskt, särskilt när upphakning av element i Användargränssnittet i koden. Biträdande redaktör kommer att ha en vit bakgrund, men jag ändrade mig till ett svalare färgschema bara för fan av det.

Öppna filen i assistent redaktör kallas en view controller. Visa styrenheter är filer som, Tja, styr vyerna i appen. Varje vy är ett separat fönster i app. T ex i meddelanden app är den första skärmen med alla dina chattar en vy och sedan när du klickar på ett namn det tar dig till en annan vy där alla dina meddelanden med den personen visas.