Share
Apple daagt ontwikkelaars al langere tijd uit om universele iOS-applicaties te maken. Op WWDC 12 werd Auto Layout uitgebracht voor iOS en verbeteringen gevolgd in iOS 7. En nu met iOS 8, is adaptief ontwerp geïntroduceerd, dat verschillende nieuwe API's en uitbreidingen van Interface Builder bevat ter bevordering van de ontwikkeling van universele binaire bestanden..
In deze tutorial zullen we kijken naar wat adaptief ontwerp precies inhoudt en hoe een aantal concepten te gebruiken. Aan het einde van de zelfstudie kunt u adaptief ontwerp gebruiken om universele apps te maken met behulp van een intuïtieve workflow. We zullen de nieuwe grootteklassen gebruiken om een fictieve app te maken voor een computerwinkel die op alle apparaten werkt.
Adaptief ontwerp omvat verschillende nieuwe ideeën en technieken in plaats van slechts één unieke API. Sommige componenten van adaptief ontwerp omvatten trait collections, grootteklassen, adaptieve lettertypen, Auto Layout en meer. In de kern bestaat adaptief ontwerp om ontwikkelaars te helpen eenvoudig universele en lokale apps te maken.
Als u al een aantal jaar iOS-apps ontwikkelt, heeft u waarschijnlijk uit de eerste hand gerealiseerd waarom adaptief ontwerp nuttig kan zijn. Autoresiserende maskers vallen snel uit elkaar, het bijhouden van oriëntaties kan vervelend zijn en het ontwikkelen van verschillende codepaden op basis van het apparaattype is niet schaalbaar. Adaptief ontwerp is bedoeld om al deze problemen aan te pakken.
Nu we hebben vastgesteld welk adaptief ontwerp is en waarom we het zouden moeten gebruiken, downloadt u het voorbeeldproject om aan de slag te gaan.
Grootteklassen zijn de selectiekarakteristiek van adaptief ontwerp. Als u ze gebruikt, kunt u code en logica verwijderen die betrekking hebben op meerdere schermformaten, oriëntaties of specifieke apparaten. Het maakt het ook gemakkelijk om rechtvaardig te zijn een interface voor alle beschikbare apparaten.
Er zijn twee soorten grootteklassen, compact en regelmatig. Elke grootteklasse kan horizontaal en verticaal worden weergegeven en aan elk apparaat wordt een grootteklasse toegewezen voor beide oriëntaties. Een normale grootte vertegenwoordigt een "grote" hoeveelheid schermvastgoed, zoals op een iPad. Ook inbegrepen zijn interfaceparadigma's die de illusie bieden dat er teveel ruimte is, zoals scroll-weergaven op een iPhone.
Aan de andere kant geeft een "compact" schermformaat een kleinere hoeveelheid beschikbare ruimte aan. iPhones of iPod Touches passen over het algemeen in deze categorie. Dat is zeker geen regel. De iPhone 6 Plus ondersteunt bijvoorbeeld de normale formaatklasse horizontaal. De volgende tabel geeft een overzicht van iOS-apparaten en hun respectieve grootteklasse:
| Verticaal | horizontaal | |
| iPhone-portret | regelmatig | Compact |
| iPhone-landschap | Compact | Compact |
| iPhone 6 Plus landschap | Compact | regelmatig |
| iPad portret | regelmatig | regelmatig |
| iPad landschap | regelmatig | regelmatig |
Doe open Main.storyboard binnen het project. Je zult zien dat het canvas de vorm heeft van een rechthoek. Hoewel het aanvankelijk schokkend is, vertoont dit feitelijk een kerncomponent van adaptief ontwerp. Als u naar de onderkant van de interface-bouwer kijkt, ziet u een knop die zegt wAny hAny.
Dit staat voor Elke breedte, elke hoogte, wat aangeeft dat elke wijziging in de gebruikersinterface hier van toepassing is op elke grootteklasse. Als u op de knop klikt, wordt een raster weergegeven waarin u kunt schakelen tussen verschillende grootteklassen:
In het bovenstaande voorbeeld, Compacte breedte | Compacte hoogte is geselecteerd en er is een groene stip in het blauwe raster. De groene stip geeft aan welke grootteklassen worden weergegeven. In dit geval zijn wijzigingen alleen van toepassing op 3,5, 4 en 4,7 inch iPhones in landschap.
Merk op dat er een beetje een verschil in de formulering is, omdat Interface Builder de termen gebruikt breedte en hoogte terwijl grootteklassen de termen gebruiken horizontaal en verticaal. Breedte komt overeen met horizontaal en hoogte komt overeen met verticaal.
Als u de momenteel geselecteerde grootteklasse hebt gewijzigd, moet u terugkeren naar Elke breedte | Elke hoogte.
Sleep een afbeeldingsweergave naar het canvas van de weergavecontroller vanaf de Objectbibliotheek. De ... gebruiken Size Inspector, stel zijn X positie om 0 punten en zijn Y positie om 72 punten. Stel de breedte naar 600 punten en de hoogte naar 218 punten. Open de Ophulde inspecteur en verander de weergave's mode naar aspect pasvorm en beeld naar "laptop". Je canvas moet er uitzien als de afbeelding hieronder:
Open de Objectbibliotheek nog een keer en sleep eenlabel op het canvas. Open de Size Inspector en stel de labels in X positie om 16 punten en zijn Y positie om 312 punten. Stel de grootte in voor de grootte breedte naar 568 punten en zijn hoogte naar 242 points.
In de Kenmerken Inspector, breng de volgende wijzigingen aan:
Nu voegen we beperkingen toe voor het label en de afbeeldingweergave. Klik onder aan Interface Builder op Resetten op voorgestelde beperkingen onder de Alle weergaven in View Controller sectie. Als de optie grijs wordt weergegeven, moet u ervoor zorgen dat een van de weergaven op het canvas is geselecteerd.
Omdat de afbeeldingsweergave dezelfde witte achtergrond heeft als de bijbehorende weergave, veranderen we de achtergrondkleur van de weergave om het gemakkelijk te maken om onderscheid te maken tussen deze twee. kiezen Uitzicht van de documentoverzicht en verander zijn Achtergrond kleur naar Groepstabel Achtergrondkleur weergeven.
Selecteer bovenaan de Xcode iPad Retina te gebruiken voor de iOS Simulator. Bouw de app en voer hem uit door op te drukken Command + R. De app lijkt er goed uit te zien voor de iPad, maar we willen ervoor zorgen dat deze op elk apparaat correct wordt weergegeven.
Het bouwen en uitvoeren van uw app om te zien hoe uw gebruikersinterface zich gedraagt, kan een saaie taak zijn. Gelukkig heeft Xcode 6 de mogelijkheid toegevoegd om een live weergave van je gebruikersinterface op elk apparaat in elke richting te krijgen. Hiermee kunnen we problemen met de automatische lay-out veel sneller oplossen dan wanneer de app elke keer in de iOS Simulator wordt uitgevoerd.
Klik boven aan Xcode op Assistent redacteur knop.
Hiermee wordt de editor van Xcode in twee vensters gesplitst. Selecteer in het rechterdeelvenster Automatisch> Voorbeeld> Main.storyboard in de springbalk.
Interface Builder toont nu een live preview van de gebruikersinterface op een iPhone van 4 inch. Zoals verwacht, is de gebruikersinterface minder dan ideaal op de iPhone. Als u niets ziet in het voorbeeld, klik dan op de view controller in het linkerdeelvenster om het te vernieuwen.
Klik in het rechterdeelvenster op + Met de knop onderaan kunt u meer apparaten toevoegen aan het voorbeeld. Ga je gang en voeg de iPad toe als voorbeeld.
Plaats de muisaanwijzer op de iPhone in de assistent-editor naar de onderkant. Aan de linkerkant van de naam van het apparaat bevindt zich een knop die de huidige richting wijzigt. Klik er eenmaal op om het voorbeeld van de iPhone naar de liggende stand te schakelen.
Met de oriëntatie in het landschap ziet de gebruikersinterface er nog slechter uit. De beeldweergave wordt helemaal niet weergegeven en de tekst van het label is veel te groot.
Om de gebruikersinterface te herstellen, voegen we een aantal beperkingen toe die specifiek zijn voor een bepaalde grootteklasse. Dit is nog een voordeel van adaptief ontwerp. We kunnen de gebruikersinterface vertellen hoe het zijn weergaven voor bepaalde grootteklassen moet weergeven, op hetzelfde storyboard. Vroeger moest je hiervoor meestal twee verschillende storyboards gebruiken en de juiste laden tijdens runtime.
We zullen eerst beperkingen toevoegen die voor de meeste apparaten zouden moeten werken en ze van daaruit verfijnen. Begin door de eerder toegevoegde beperkingen te verwijderen door op een weergave in het canvas te klikken en te selecteren Editor> Problemen met de automatische lay-out oplossen> Alle weergaven in View Controller - Duidelijke restricties.
Selecteer de afbeeldingsweergave, klik op de richten knop, kies Horizontaal midden in container, en klik Voeg 1 Beperking toe.
Open de beperking die we zojuist hebben toegevoegd in de Size Inspector aan de rechterkant en dubbelklik erop om het te bewerken.
De beperking heeft het centrum van de superview gelijk aan het midden van het beeld, maar we willen het tegenovergestelde. Klik Tweede item en kies Eerste en tweede punt omkeren om het probleem te verhelpen.
Druk vervolgens op Bedien en sleep van de afbeeldingsweergave naar Uitzicht in de documentomtrek aan de linkerkant en selecteer Gelijke hoogten. Selecteer de beperking in de Size Inspector en verander de beperkingen multiplier naar 0.4. Hierdoor wordt de hoogte van het afbeeldingsoverzicht gelijk gemaakt aan de hoogte van de superview of ten minste 40 procent ervan, afhankelijk van wat uiteindelijk korter wordt.
Klik vervolgens op de Pin knop en kies de top en bodem afstand tot de dichtstbijzijnde buur. Voor de bodem spatie, enter 18 punten. De bovenste spatiëring moet al zijn ingesteld op 0 punten. Zorg ervoor dat Beperken tot marges is uitgeschakeld omdat we geen opvulling rond de weergave willen. Klik Voeg 2 beperkingen toe onderaan om de beperkingen toe te voegen.
Dubbelklik op de Onderste ruimte beperking in de Size Inspector om het te bewerken. Verander de Relatie naar Groter dan of gelijk aan. Om de beperkingen van het beeldview te beëindigen, Bedien en sleep van de afbeeldingsweergave naar het label en kies Gelijke hoogten.
De beperkingen voor de afbeeldingsweergave moeten er als volgt uitzien:
Vanwege de beperkingen die zijn toegevoegd aan de afbeeldingsweergave, heeft het label al zijn hoogte en verticale afstand van de toegevoegde afbeeldingsweergave. Selecteer het label en klik op de Pin om een voorloop-, volgafstands- en verticale afstandsbeperking toe te voegen zoals in de onderstaande afbeelding.
Als u nu een voorvertoning van de app bekijkt in de assistent-editor, hebben de beperkingen de dingen veel beter gemaakt. Er is echter nog steeds een probleem wanneer de app de compacte horizontale formaatklasse gebruikt, zoals u hieronder kunt zien (midden).
In dit geval zou het leuk zijn om het beeld te bekijken en naast elkaar te etiketteren in plaats van op elkaar.
De ... gebruiken grootteklasse omschakelknop onderaan, selecteer Compacte breedte | Compacte hoogte. De balk verandert in een blauwe tint om aan te geven dat u nu de gebruikersinterface bewerkt voor een specifieke grootteklasse.
Selecteer de afbeeldingsweergave, open de Size Inspector, en werk het frame bij zoals weergegeven in de onderstaande afbeelding.
Selecteer vervolgens het label en werk het frame bij in de Size Inspector zoals hieronder getoond.
Met het label nog steeds geselecteerd en de Size Inspector open, selecteer de beperkingen van het label en verwijder ze door op te drukken Verwijder. U kunt meerdere beperkingen selecteren door de Verschuiving sleutel. Hiermee worden de beperkingen verwijderd die we tot nu toe hebben toegevoegd, maar enkel en alleen voor deze grootteklasse.
Doe hetzelfde voor de afbeeldingsweergave door deze te selecteren en de. Te openen Size Inspector, de beperkingen selecteren en op drukken Verwijder. We kunnen nu beperkingen toevoegen om ervoor te zorgen dat het beeldaanzicht en het label naast elkaar staan.
Gelukkig kan Xcode deze beperkingen gemakkelijk voor ons opmaken. Kies of met de afbeeldingweergave of het label geselecteerd Editor> Los problemen in de automatische layout op> Alle weergaven in View Controller - Reset naar voorgestelde beperkingen.
Open de Size Inspector voor de beeldweergave. U ziet dat er verschillende beperkingen worden vermeld, maar sommige zijn grijs en sommige niet. Dit geeft aan welke beperkingen actief zijn voor de huidige grootteklasse.
Als u op een van deze dubbelklikt, laat het onderste gedeelte zien voor welke grootteklassen de beperkingen actief zijn. De onderstaande afbeelding laat zien dat de beperking is geïnstalleerd voor Compacte breedte | Compacte hoogte en uitgeschakeld voor Normale breedte | Normale hoogte. Klikken op de X of + knop schakelt de beperking voor de opgegeven grootteklasse in of uit.
Open de voorbeeld assistent-editor opnieuw en voeg een iPhone van 3,5 inch toe in de liggende modus als er nog geen is. We kunnen zien dat we een geheel andere lay-out hebben bereikt voor bepaalde apparaten in landschapsoriëntatie - allemaal in één storyboard.
Het laatste wat je moet doen is de lettergrootte. Hoewel de werkelijke frames van de afbeeldingweergave en het label goed werken, kan het lettertype soms worden afgekapt. Adaptief ontwerp heeft nieuwe opties toegevoegd voor ontwikkelaars om met dit type scenario om te gaan.
Selecteer het label en open de Kenmerken Inspector aan de rechterkant. Onder autoshrink, kiezen Minimale lettertypeschaal en zet het op 0.4.
Het bewerken van de lettertypeschaal is in de meeste gevallen voldoende. In onze app is de inhoud van het label leesbaar voor de Compacte breedte | Compacte hoogte grootteklasse, maar het is niet ideaal. Als u de preview-assistent-editor opent, ziet u dat de "p" in het woord "laptop" op zijn eigen regel staat.
Klik met het label geselecteerd op + knop naast doopvont in de Kenmerken Inspector. Dit opent een menu om een grootteklasse te selecteren om een bepaald lettertype toe te passen. Kiezen Compacte breedte | Compacte hoogte.
Net als beperkingen in de grootteklasse, is een lettertype toegevoegd voor de grootteklasse die we hebben geselecteerd. Verander de doopvont grootte naar 50 punten. Open nu de preview-assistent-editor nog een keer en controleer of het lettertype er op elk apparaat perfect uitziet.
De mogelijkheid om adaptieve lettertypen toe te voegen is ongelooflijk krachtig. Het lokaliseren van apps is triviaal als u de lettertypegrootte nauwkeuriger kunt beheren met dynamische tekst.
Hoewel grootteklassen zeker een vooraanstaande functie zijn, zijn er veel andere adaptieve ontwerp-API's en -aversies die ik in deze zelfstudie niet heb behandeld. Controllers voor zien zijn bijvoorbeeld nu conform de UITraitEnvironment protocol. Dit betekent dat view controllers een traitCollection eigenschap die bijhoudt welke grootteklasse momenteel wordt weergegeven.
Als u het leuk vindt om gebruikersinterfaces in code te maken, dan is de traitCollection eigenschap geeft u dezelfde mogelijkheden als grootteklassen in Interface Builder. U kunt een melding krijgen wanneer de grootteklasse verandert en de nodige updates uitvoeren voor uw beperkingen of gebruikersinterface.
Een andere nuttige API is de UIPopoverController. Als je eerder een universele app hebt ontwikkeld, weet ik zeker dat je deze code hebt gezien:
UIViewController * contentVC = // content if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) UIPopoverController * popVC = [[UIPopoverController alloc] initWithContentViewController: contentVC]; [popVC presentPopoverFromBarButtonItem: item allowedArrowDirections: UIPopoverArrowDirectionAny animation: YES]; else [self presentViewController: contentVC geanimeerd: YES completion: nil];
Vanaf iOS 8 is het niet langer nodig om te controleren op welk apparaat de app wordt uitgevoerd tijdens het gebruik van de UIPopoverController klasse. De UIPopoverController klasse ondersteunt nu ook iPhone en iPod Touch.
Wat de beeldelementen betreft, merk dat er nu een @ 3x grootte. Dit komt door het Retina HD-display op de iPhone 6 Plus. Als u de Images.xcassets bestand in het project, je ziet het onder een van de meegeleverde afbeeldingen.
Adaptief ontwerp is waarschijnlijk de belangrijkste verandering in iOS-ontwikkeling in verschillende jaren. Vóór adaptief ontwerp waren universele apps niet gemakkelijk te ontwikkelen en zou schaalbaarheid in dergelijke projecten een probleem kunnen zijn. Hopelijk heb je genoeg geleerd van deze tutorial om die problemen te vermijden en adaptief ontwerp te integreren in je eigen apps.
Accentsconagua