Share
Het creëren van applicaties met flexibele lay-outs is essentieel geworden, vooral sinds de release van de iPhone 5 met zijn 4 "-scherm en de introductie van Dynamic Type in iOS 7, waardoor gebruikers de tekstgrootte over het besturingssysteem kunnen aanpassen. internationalisering in gedachten.
Met Auto Layout, dat werd geïntroduceerd in iOS 6, kunt u dergelijke flexibele lay-outs maken. Het is een geweldig alternatief voor autoresizingmaskers of het handmatig opmaken van de gebruikersinterface van de toepassing.
Met Auto-opmaak kunt u beperkingen aan weergaven toevoegen en de relaties tussen weergaven definiëren. De relatie kan zijn tussen een weergave en zijn superview, een van zijn broers of zussen, of zelfs in relatie tot zichzelf.
In plaats van het frame van een weergave expliciet op te geven, kunt u met Auto-indeling de afstand tussen en de relatieve positionering van twee vensters definiëren met behulp van beperkingen. Auto Layout gebruikt die beperkingen om de runtime-posities van de elementen van de gebruikersinterface te berekenen.
U moet voldoende beperkingen instellen voor de weergave om dubbelzinnigheid over de lay-out te voorkomen. Het is ook mogelijk om te veel beperkingen in te stellen, die conflicten kunnen veroorzaken en de toepassing kunnen laten crashen.
In Xcode 4, wanneer u onvolledige of ongeldige beperkingen instelt voor een weergave, zou Interface Builder ze vervangen door nieuwe beperkingen die u meestal niet het gewenste effect hebben opgeleverd. Dit leidde tot aanzienlijke frustratie bij ontwikkelaars. In Xcode 5 is het echter veel gemakkelijker om Auto Layout te gebruiken. Xcode dwingt niet langer beperkingen op een weergave, maar krijgt hints en waarschuwingen wanneer de beperkingen van een weergave ongeldig zijn.
Hoewel het mogelijk is om met Auto Layout programmatisch te werken, zal deze tutorial kijken naar hoe Interface Builder te gebruiken om lay-outs te maken met behulp van Auto Layout.
Voor een eenvoudige demonstratie van wat Auto Layout voor u kan doen, zullen we een eenvoudige applicatie maken en een aantal beperkingen instellen voor zijn weergaven. Maak een nieuw Xcode-project, kies het Toepassing enkele weergave sjabloon en set apparaten naar iPhone.
Storyboards en XIB-bestanden die zijn gemaakt met Xcode 4.5 of hoger, hebben standaard Auto Layout ingeschakeld. Je kunt het uitschakelen in de Bestand Inspector aan de rechterkant door het vakje met het label uit te vinken Gebruik Auto lay-out.
Een goede reden voor het uitschakelen van Auto Layout ondersteunt iOS 5 of lager. Auto-indeling wordt alleen ondersteund door iOS 6 en hoger. Maar anders dan dat, raadt Apple aan om Auto Layout te gebruiken, omdat dit het maken van flexibele gebruikersinterfaces sneller en gemakkelijker maakt.
Open het belangrijkste storyboard van het project, Main.storyboard, voeg een tekstweergave toe aan de Bekijk Controller Scene, en positioneer het zoals hieronder getoond.
Er zijn geen beperkingen ingesteld voor de tekstweergave en dit heeft enkele implicaties. Wanneer u de toepassing uitvoert, wordt de tekstweergave net zo geplaatst als in Interface Builder. Wanneer het apparaat echter naar de liggende modus wordt geroteerd, blijft de tekstweergave aan de linkerkant van het aanzicht plakken en wordt de breedte vastgezet.
Tijdens build-time worden beperkingen automatisch gegenereerd voor weergaven zonder beperkingen, wat het gedrag verklaart dat we zien. De beperkingen die aan de tekstweergave zijn toegevoegd, zijn bijvoorbeeld een linker- en bovenlimiet die de tekstweergave links bovenin speldt, en een beperking voor breedte en hoogte die de grootte van de tekstweergave corrigeren.
Zodra u echter begint met het definiëren van beperkingen, is het uw taak om ervoor te zorgen dat de beperkingen voor een weergave geen conflicten veroorzaken. In het volgende gedeelte voegen we een paar beperkingen toe aan de tekstweergave om de positie en de grootte ervan aan te passen wanneer het apparaat wordt geroteerd of wanneer we de toepassing uitvoeren, bijvoorbeeld een iPhone 5 met een groter scherm.
Er zijn verschillende manieren om lay-outbeperkingen aan een weergave toe te voegen.
Houd de toets ingedrukt Controle toets en sleep vanuit de weergave waaraan u de lay-outbeperking wilt toevoegen naar een andere weergave. Wanneer u de muis loslaat, zou een menu met opties moeten verschijnen. De opties zijn afhankelijk van de richting en de bekijk je gesleept naar.
Om dit te illustreren, sleept u vanuit de tekstweergave naar de bovenkant van de weergave van de view controller. Xcode markeert beide aanzichten om aan te geven dat de lay-outbeperking beide weergaven bevat. Wanneer u de muis loslaat, toont het menu de lay-outbeperkingen die kunnen worden toegevoegd aan de bronweergave, de tekstweergave. Als u de tekstweergave horizontaal wilt centreren in de weergave van de weergave-controller, selecteert u Centreer horizontaal in container van het menu. Er verschijnt een oranje lijn, wat de lay-outbeperking aangeeft die u zojuist hebt toegevoegd.
U kunt lay-outbeperkingen ook toevoegen en bewerken met behulp van het menu Auto opmaak onderaan in de werkruimte van Interface Builder.
Van links begint het menu u toe te staan richten en pin keer bekeken, Los problemen met Auto Layout op, en de de het wijzigen van het gedrag voor de geselecteerde weergave. Laat me uitleggen wat elke menu-optie doet.
Elk van de bovengenoemde menu-opties is ook te vinden in Xcode's Editor menu.
Als u lay-outbeperkingen wilt toevoegen aan de tekstweergave, selecteert u de weergave in Xcode, houdt u de knop ingedrukt Controle toets en sleep vanuit de tekstweergave naar de bovenkant van de weergave van de view controller. kiezen Centreer horizontaal in container vanuit het menu dat verschijnt. Hiermee wordt een opmaakbeperking toegevoegd die ervoor zorgt dat de tekstweergave altijd gecentreerd is in het aanzicht van de weergave-controller, ongeacht de richting van het apparaat.
U hebt misschien gemerkt dat de tekstweergave een oranje contour heeft. Xcode vertelt ons dat de lay-outbeperkingen van de tekstweergave ongeldig of onvolledig zijn. We hebben aangegeven dat de tekstweergave horizontaal moet worden gecentreerd in de bovenliggende weergave, maar het automatische lay-outsysteem weet niet welke grootte de tekstweergave moet hebben. Laten we een paar extra beperkingen toevoegen totdat de omtrek van de tekstweergave blauw wordt om aan te geven dat de layoutbeperkingen van de tekstweergave geldig zijn.
Houd er rekening mee dat het mogelijk is om de waarschuwingen te negeren en een toepassing uit te voeren met onvolledige lay-outbeperkingen. U mag echter nooit een toepassing verzenden met onduidelijke lay-outbeperkingen, omdat u niet zeker weet hoe de gebruikersinterface van de toepassing eruit ziet op verschillende apparaten in verschillende oriëntaties.
Selecteer met de tekstweergave Control-slepen vanuit de tekstweergave naar de bovenkant van de weergave van de weergavebesturing en selecteer Top Space to Top Layout Guide. Hiermee stelt u een verticale spatiebeperking vanuit de bovenste indelingsgids van de view controller naar de top van de tekstweergave.
Vervolgens kunt u Control-slepen vanuit de tekstweergave naar de weergave van de weergavecontroller en selecteren Toonaangevende ruimte tot container om de afstand van de bovenliggende weergave links van de tekstweergave in te stellen. Control-Sleep vanuit de tekstweergave naar de weergave van de weergavecontroller en selecteer Bottom Space to Bottom Layout Guide om een verticale spatiebeperking in te stellen van de onderste indelingsgids van de weergave-controller naar de onderkant van de tekstweergave.
De omtrek van de tekstweergave moet blauw zijn, waarmee wordt aangegeven dat de lay-outbeperkingen van de tekstweergave geldig en volledig zijn. Start de applicatie in de iOS Simulator en wijzig de oriëntatie om het resultaat te inspecteren.
Merk op dat we geen horizontale spatiebeperking hoefden toe te voegen om de afstand tot de rechterrand van de tekstweergave en zijn superview te specificeren, omdat we de voorloopruimte van de tekstweergave hebben gespecificeerd en de tekstweergave horizontaal in de superview hebben gecentreerd. Het automatische lay-outsysteem heeft voldoende informatie om de tekstweergave correct in te delen. We kunnen hetzelfde resultaat bereiken door vier ruimtebeperkingen op te geven en de uitlijningsbeperking weg te laten.
In dit voorbeeld ziet u hoe u lay-outbeperkingen kunt instellen tussen een weergave en de bovenliggende weergave. Laten we naar een ander voorbeeld kijken waarin we lay-outbeperkingen tussen broers en zussen instellen.
Begin met het verwijderen van de tekstweergave. Hiermee worden ook de lay-outbeperkingen van de tekstweergave verwijderd. Voeg een tekstveld, een schuifregelaar en een gesegmenteerd besturingselement toe aan de weergave van de weergave-controller, zoals hieronder weergegeven.
Wanneer u de toepassing uitvoert zonder beperkingen in te stellen, blijven de drie elementen in de liggende richting aan de linkerkant van hun bovenliggende weergave.
We willen echter dat de elementen de volledige breedte van het scherm vullen, zoals hieronder wordt weergegeven. Het tekstveld moet horizontaal worden uitgebreid en de schuifregelaar moet ook worden uitgevouwen om te profiteren van de breedte van het scherm. De gesegmenteerde besturing moet echter een vaste breedte hebben.
Selecteer het tekstveld en klik op de Pin knop van het Auto Layout-menu onderaan. In de sectie Afstand tot de dichtstbijzijnde buur klik boven in het menu op de boven-, rechter- en linkerlijnen die het vierkant omringen. De lijnen zouden hierdoor rood moeten worden. Klik vervolgens op de knop onder aan het label Voeg 3 beperkingen toe om de opgegeven ruimtebeperkingen toe te voegen.
Selecteer de schuifregelaar en herhaal dezelfde stappen door een beperking in te stellen voor de boven-, linker- en rechterruimte. Dit zorgt ervoor dat de afstand tussen de schuifregelaar en het tekstveld en de schuifregelaar en het gesegmenteerde besturingselement worden vastgelegd.
Herhaal dezelfde stappen voor het gesegmenteerde besturingselement, maar voeg alleen een boven- en rechter (volg) -ruimtebeperking toe. Controleer bovendien de Breedte checkbox en klik op de Voeg 3 beperkingen toe knop onderaan. We willen niet dat het gesegmenteerde besturingselement wordt uitgebreid wanneer de schermgrootte verandert, daarom geven we het een vaste breedte.
Wanneer Xcode ons fouten of waarschuwingen geeft over ontbrekende of ongeldige lay-outbeperkingen, is het niet altijd duidelijk welke beperkingen moeten worden toegevoegd of bijgewerkt. Xcode helpt ons door ons te laten zien welke beperkingen ontbreken in de Documentoverzicht.
Wanneer een lay-out ongeldig of onvolledig is, is een rode pijl zichtbaar in de Documentoverzicht. Wanneer u op de pijl klikt, wordt er van rechts een venster weergegeven dat aangeeft welke beperkingen ontbreken of ongeldig zijn. Dit geeft u een idee hoe de lay-out moet worden opgelost.
Aan de rechterkant van elke fout of waarschuwing staat een rode cirkel (fout) of een gele driehoek (waarschuwing). Wanneer u op de fout of waarschuwing klikt, verschijnt een menu met suggesties om het probleem op te lossen.
U kunt ook de Los problemen in de automatische lay-out op menu om ontbrekende beperkingen toe te voegen, de beperkingen van een weergave te resetten of beperkingen op te heffen. Xcode voegt automatisch beperkingen toe aan de geselecteerde weergave voor u. Dit kan u tijd besparen, maar houd er rekening mee dat het ook mogelijk is dat de resulterende lay-out niet is wat u van plan was.
Als u lay-outbeperkingen aan een weergave hebt toegevoegd en u de grootte of positie ervan wijzigt, markeert Xcode de weergave in oranje om aan te geven dat de huidige positie en / of grootte niet in overeenstemming is met de lay-outbeperkingen.
Als u de toepassing uitvoert, ziet u dat het automatische lay-outsysteem de lay-outbeperkingen van de weergave afdwingt en de nieuwe grootte en positie van de weergave negeert die u hebt ingesteld. Dit is een zogenaamde misplaatste weergave. De onderstaande schermafbeelding toont een knop die ik heb verplaatst nadat ik de lay-outbeperkingen heb gespecificeerd.
U kunt dit oplossen door de lay-outbeperkingen te verwijderen en nieuwe op te stellen, of door Xcode dit voor u te laten oplossen. Je hebt twee opties om een verkeerd geplaatste weergave te corrigeren.
In het bovenstaande voorbeeld selecteren we Beperkingen bijwerken om de lay-outbeperkingen aan te passen aan de nieuwe grootte en positie van de knop, omdat we de nieuwe grootte en positie van de knop willen behouden.
Het Auto Layout-systeem maakt het ontwerpen van gebruikersinterfaces veel eenvoudiger en sneller. Voordat Auto Layout werd geïntroduceerd, moesten ontwikkelaars de gebruikersinterface van een toepassing hard coderen door het frame van de weergave en het autoresiseringsmasker in te stellen. Met Auto Layout is dit niet langer nodig.
Door de lay-outbeperkingen van een weergave correct in te stellen, wordt de positie ervan automatisch bijgewerkt, ongeacht de schermgrootte of oriëntatie. Een ander gebied waar Auto Layout nuttig is, is lokalisatie van applicaties. Woorden en zinnen hebben een verschillende lengte in verschillende talen. Ook dit kan worden opgelost met Auto Layout.
Accentsconagua