Storyboards en automatische lay-out in Xcode begrijpen
Storyboards en Auto Layout zijn krachtige tools in Xcode waarmee u de gebruikersinterface van uw app visueel kunt ontwerpen en ervoor kunt zorgen dat deze er op alle apparaten en schermformaten geweldig uitziet. In deze zelfstudie onderzoeken we hoe u storyboards en automatische lay-out effectief kunt gebruiken.
Wat zijn storyboards?
Een storyboard is een visuele weergave van de gebruikersinterface van uw app. Hiermee kunt u meerdere schermen ontwerpen en de navigatie daartussen in één bestand laten verlopen. Met Storyboards kunt u UI-elementen naar het canvas slepen en neerzetten, ze met segmenten verbinden en overgangen tussen verschillende weergavecontrollers definiëren.
Wat is automatische lay-out?
Auto Layout is een op beperkingen gebaseerd lay-outsysteem waarmee u dynamische en adaptieve gebruikersinterfaces kunt creëren. In plaats van exacte pixelposities en -groottes voor UI-elementen op te geven, definieert u beperkingen die hun relaties met elkaar en met de superview bepalen. Automatische lay-out zorgt ervoor dat uw gebruikersinterface zich aanpast aan verschillende schermformaten en -oriëntaties, waardoor uw app er op alle apparaten consistent uitziet.
Storyboards gebruiken in Xcode
Om een nieuw storyboard in Xcode te maken, ga naar Bestand -> Nieuw -> Bestand, selecteer "Storyboard" onder de categorie "User Interface" en klik op "Next". Geef uw storyboard een naam en sla het op in uw project.
UI-elementen toevoegen
Sleep UI-elementen van de Objectbibliotheek naar het canvas van uw storyboard. U kunt de eigenschappen van elk element aanpassen met behulp van de Attributeninspecteur.
Sega's maken
Verbind verschillende weergavecontrollers in uw storyboard met behulp van segmenten. Houd de Control-toets ingedrukt en sleep van de ene weergavecontroller naar de andere om een segment te maken. U kunt het type segment en eventuele bijbehorende animaties of gegevensdoorgifte opgeven.
Automatische lay-outbeperkingen gebruiken
Om Automatische lay-out te gebruiken, selecteert u een UI-element op het canvas en klikt u op de knop "Resolve Auto Layout Issues" in de rechterbenedenhoek van de Interface Builder. Kies "Add Missing Constraints" om automatisch beperkingen toe te voegen die de positie en grootte van het element ten opzichte van de container definiëren.
Beperkingen bewerken
U kunt beperkingen bewerken en aanpassen in de Grootte-inspector. Selecteer een UI-element, klik op de knop "Add New Constraints" en geef de gewenste beperkingen op voor de positie, grootte en uitlijning van het element.
Een voorbeeld van uw lay-out bekijken
Gebruik de Preview Assistant-editor in Xcode om te zien hoe uw gebruikersinterface eruit ziet op verschillende apparaten en schermformaten. Hiermee kunt u uw lay-out testen en ervoor zorgen dat deze zich naar verwachting gedraagt.
Conclusie
Door te begrijpen hoe u storyboards en automatische lay-out in Xcode kunt gebruiken, kunt u visueel aantrekkelijke en responsieve gebruikersinterfaces voor uw iOS-apps creëren.