Share
Thema-aanpassing is een geweldige manier om op te vallen in de App Store, maar het is niet altijd gemakkelijk te bereiken. In deze tutorial leer je verschillende standaard UIKit-aanpassingstrucs waarmee je je toepassingen kunt onderscheiden en meer gedenkwaardige gebruikerservaringen kunt creëren.
Als je je tijd hebt besteed aan het rondsnuffelen in online documentatie van Apple in hun iOS Dev Center, dan ben je zeker bekend met de beruchte Human Interface Guidelines (meer terloops aangeduid als de "HIG"). Dit document biedt ontwikkelaars en ontwerpers van iOS-toepassingen richtlijnen voor de manier waarop gebruikers verwachten te communiceren met Apps op het iOS-platform, algemene gebruiksvoorbeelden en algemene UI / UX-principes die moeten worden gevolgd.
Hoewel er veel manieren zijn om het uiterlijk van uw eigen iOS-app aan te passen - van het wijzigen van kleuren en grootten tot het rollen van uw eigen UI-elementen - wordt het als de beste methode beschouwd om de HIG en de suggesties voor een beknopte, bruikbare interface te volgen.
Met dat in gedachten, laten we een aantal manieren bekijken die we precies kunnen doen, terwijl we onze interface aanpassen aan een meer uniek visueel thema.
De meeste iOS-ontwikkelaars zijn bekend met de gemeenschappelijke kenmerken van de UIView-klasse die gemakkelijk te wijzigen zijn, zoals achtergrondkleur, lettergrootte of dekking. Maar soms krijgen we bij het aanpassen van deze eigenschappen niet het resultaat dat we nodig hebben.
Dus om meer praktische aanpassingsmethoden te demonstreren, werken we aan een eenvoudige app voor het bekijken van foto's. Dit is hoe de app eruit zal zien zonder aanpassingen en vervolgens met de wijzigingen die we zullen uitvoeren:
Voordat we van start gaan, hebt u een paar afbeeldingen nodig die u hier kunt downloaden.
Ik heb ook de basistoepassing ingesteld die we gaan gebruiken, die je hier kunt downloaden. U hoeft zich geen zorgen te maken over al het voorbereidende werk; laten we beginnen met aanpassen!
Met onze prep-app hebben we een paar basiscomponenten:
We zullen beginnen onze achtergrond een beetje classierer te maken door een achtergrondafbeelding in te stellen. Om dit te doen, laten we een methode toevoegen in onze klasse "MTViewController" genaamd "-setupUI".
We voegen deze methode toe net onder onze @synthesize-aangiften.
- (ongeldig) setupUI
Nu moeten we ons achtergrondafbeeldingsbestand toevoegen aan ons project, dus haal het bestand "BG-pattern.png" uit de bronnen die u zojuist hebt gedownload en sleep het naar onze app. Ik heb een nieuwe groep gemaakt voor onze UI-afbeeldingen genaamd "UI Graphics".
Met de afbeelding op zijn plaats kunnen we binnen deze "setupUI" -methode gaan, en we hoeven slechts één regel toe te voegen:
[self.view setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @ "BG-pattern.png"]]];
Om deze wijziging live in onze App aan te brengen, moeten we onze "setupUI" -methode bellen vanuit de "viewDidLoad" -methode van onze ViewController. Ik heb al een paar oproepen aan de "viewDidLoad" -methode toegevoegd, dus we kunnen deze aan het begin toevoegen:
- (void) viewDidLoad // stel de aangepaste UI-elementen in [self setupUI]; // build-arrays voor afbeeldingen en titels [self setupData]; // start app met geselecteerd eerste segment [self didChangeSegmentControl: aSegmentControl]; [super viewDidLoad]; // Voer een extra installatie uit nadat de weergave is geladen, meestal vanaf een punt.
Laten we nu onze afbeelding een beetje opvallen door er een witte rand omheen te plaatsen. Om dit te doen werken we samen met CALayers, wat betekent dat we eerst het QuartzCore-raamwerk in ons project moeten opnemen.
Dus ga naar ons UIKitDemo-project en we zullen ons doel selecteren (UIKitDemo). Daarna gaan we naar het tabblad 'Build Phases' en laten we het gedeelte 'Link Binary With Libraries' zien.
Klik onderaan op de knop "+" en kies "QuartzCore.framework".
Eindelijk moeten we dat doen #importeren Quartz in onze ViewController (MTViewController.m).
#importeren
Met Quartz op zijn plaats, kunnen we beginnen met rommelen met de anImageView-sublagen. We voegen het volgende toe aan onze "setupUI" -methode om de rand rond onze ImageView toe te voegen:
[anImageView.layer setBorderWidth: 5.0f]; [anImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
Als we onze app nu bouwen en uitvoeren, zien we een mooie, witte rand rond onze ImageView.
Om ons beeld nog beter te laten uitkomen, kunnen we er een subtiele schaduw achter zetten met behulp van vergelijkbare methoden:
[anImageView.layer setShadowRadius: 5.0f]; [anImageView.layer setShadowOpacity: .85f]; [anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)]; [anImageView.layer setShadowColor: [[UIColor blackColor] CGColor]]; [anImageView.layer setShouldRasterize: YES]; [anImageView.layer setMasksToBounds: NO];
Een paar van deze commando's zijn niet meteen duidelijk wat hun functie betreft, dus we zullen deze regel voor regel bekijken:
[anImageView.layer setShadowRadius: 5.0f];
We beginnen met het instellen van de hoeveelheid "vervaging" die onze schaduw zal hebben.
[anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)];
Vervolgens creëren we een offset voor onze schaduw, zodat deze niet alleen direct achter ons beeld staat.
[anImageView.layer setShouldRasterize: YES];
Deze opdracht helpt bij het uitvoeren van prestaties, omdat het ervoor zorgt dat de schaduw slechts één keer wordt getekend en vervolgens wordt opgeslagen als een bitmap, zodat de app de intensieve transparante laag van de processor niet opnieuw hoeft te tekenen.
[anImageView.layer setMasksToBounds: NO];
Ten slotte willen we ervoor zorgen dat we onze schaduw niet afsnijden, omdat deze zich buiten de grenzen van ons oorspronkelijke gezichtsveld uitstrekt.
Probeer de app opnieuw uit te voeren en u ziet een mooie schaduw achter onze afbeelding.
We hebben veel harde randen, dus laten we onze interface verzachten door ons UILabel (aLabel) afgeronde hoeken te maken.
We kunnen dit doen op dezelfde "setupUI" -methode onder de UIImageView-aanpassingen. Alles wat we nodig hebben is een eenvoudige regel om dit te laten werken:
[aLabel.layer setCornerRadius: 15.0f];
Nu zal de laatste wijziging in onze "setupUI" -methode onze UIImageView enigszins draaien, waardoor het "vierkante" gevoel van de rest van de lay-out wordt verbroken.
We kunnen dit doen met nog eens twee regels onderaan onze "setupUI" -methode:
CGAffineTransform-transformatie = CGAffineTransformMakeRotation (.03f); anImageView.transform = transformeren;
En dat is het voor onze "setupUI". Niet slecht voor maar een paar regels code, toch??
Met de release van iOS 5 kwam een nieuw protocol voor subklassen van UIViews genaamd "uiterlijk". Met dit protocol kunnen we bepaalde aspecten van onze standaard UIKit-componenten wijzigen zoals we willen, zoals het instellen van aangepaste achtergrondafbeeldingen, schaduwen, kleureffecten en meer.
Een eenvoudig voorbeeld hiervan is de UINavigationBar. We kunnen nu aangepaste afbeeldingen instellen om onze UINavigationBar zonder enige moeite aan te passen aan de thema's van onze app:
[[UINavigationBar-verschijning] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
In dit geval hebben we een UIImage met de naam "navBarImage", die we instellen als de standaardafbeelding voor onze UINavigationBar. De "uiterlijk" -oproep zal van invloed zijn op onze UINavigationBar-klasse, niet slechts een enkele instantie. Dit betekent dat onze wijzigingen worden toegepast op alle UINavigationBars die we gebruiken in deze app.
Om deze wijziging in ons huidige Photo Viewer-project te implementeren, moeten we naar onze AppDelegate-klasse gaan (MTAppDelegate). We gaan naar het AppDelegate omdat we willen dat onze wijziging van invloed is op alle instanties van UINavigationBars in onze app, dus om ervoor te zorgen dat onze wijzigingen worden aangebracht, zullen we ze meteen implementeren nadat de app is geopend.
Laten we beginnen met het toevoegen van de methode aan onze klasse "MTAppDelegate" direct na onze @synthetiseren aangiften, net als in onze klasse "MTViewController":
- (ongeldig) setupUI
Nu importeren we onze "navBar.png" -afbeelding (uit de image-bronnenmap die u eerder hebt gedownload).
We kunnen vervolgens de UIImage-instantie maken die we voor onze achtergrond gebruiken:
UIImage * navBarImage = [UIImage imageNamed: @ "navBar.png"];
En direct daarna kunnen we onze "uiterlijk" oproep doen:
[[UINavigationBar-verschijning] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
Voordat deze wijziging echter actief is, moeten we onze "setupUI" -methode bellen vanuit de toepassing: didFinishLaunchingWithOptions: methode.
- (BOOL) applicatie: (UIApplication *) applicatie didFinishLaunchingWithOptions: (NSDictionary *) launchOptions [self setupUI]; ...
Je kunt nu je app gebruiken - let op de donkere achtergrond in onze UINavigationBar op de top.
Voor onze volgende truc wordt het een beetje ingewikkelder. We gaan aangepaste afbeeldingen instellen voor onze UISegmentedControl. Het lastige is dat we niet alleen te maken hebben met een of twee achtergrondafbeeldingen, maar in plaats daarvan met specifieke delen van afbeeldingen moeten werken; zoals de afgeronde uiteinden, geselecteerde of ongeselecteerde middensecties, de scheidingslijn tussen twee segmenten, enz ...
Ten eerste, als u dat nog niet hebt gedaan, importeert u de resterende afbeeldingen in de afbeeldingsresource-map die u hebt gedownload.
Net zoals de UINavigationBar die we een minuut geleden hebben aangepast, moeten we twee dingen doen om onze UISegmentedControl gewijzigd te krijgen.
Ik heb hier niet genoeg tijd om elk van deze acties stapsgewijs op te splitsen, maar ik zal enkele van de belangrijkste in een minuut bespreken. Voeg voor nu de volgende code toe aan uw "setupUI" -methode:
UIImage * segmentSelected = [[UIImage imageNamed: @ "segcontrol_sel.png"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)]; UIImage * segmentUnselected = [[UIImage imageNamed: @ "segcontrol_uns.png"] resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)]; UIImage * segmentSelectedUnselected = [UIImage imageNamed: @ "segcontrol_sel-uns.png"]; UIImage * segUnselectedSelected = [UIImage imageNamed: @ "segcontrol_uns-sel.png"]; UIImage * -segmentUnselectedUnselected = [UIImage imageNamed: @ "segcontrol_uns-uns.png"];
Hierdoor worden onze UIImages gemaakt en wordt het formaat aangepast naargelang het geval. Je zult dit kleine beetje opmerken:
resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)
Dit stelt ons in staat om ons beeldbestand in wezen te "bijsnijden" door het in te snijden met bepaalde marges. In dit geval laten we de top zoals hij is, verplaatsen we 15 punten vanaf de linkerkant, laten we de onderkant zoals deze is en worden er 15 punten vanaf de rechterkant naar toe verplaatst. Dat laat ons met het middelste gedeelte, dat zich uitbreidt naar de benodigde breedte, maar de afgeronde uiteinden blijven hetzelfde - onze uitgestrekte middelste boeken.
Raadpleeg de officiële Apple-documentatie voor meer informatie over "resizableImageWithCapInsets:".
Met onze afbeeldingen formaat en klaar, kunnen we de verschillende toestanden van onze UISegmentedControl instellen. Elk van de vijf afbeeldingen die we zojuist hebben toegevoegd, heeft de bijbehorende status:
[[UISegmentedControl appearance] setBackgroundImage: segmentUnselected forState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl appearance] setBackgroundImage: segmentSelected forState: UIControlStateSelected barMetrics: UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage: segmentUnselectedUnselected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage: segmentSelectedUnselected forLeftSegmentState: UIControlStateSelected rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage: segUnselectedSelected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateSelected barMetrics: UIBarMetricsDefault];
In tegenstelling tot een eenvoudige UIButton, die in principe al dan niet is geselecteerd, kan onze UISegmentedControl ook controleren wat de status aan weerszijden van het huidige segment is, maar het is niet al te ingewikkeld als we het eenmaal onder de knie hebben..
Met de nieuwe functies in iOS 5 en wat creatief werk met Quartz, kunnen we onze Apps snel en eenvoudig laten uitzien zoals wij dat willen. Sommige uitdagingen die zich voordoen met UI-aanpassing zijn:
Het kan relatief eenvoudig zijn om goede graphics te vinden en er zijn genoeg goede ontwerpers die bereid zijn om te helpen. Soms kan het moeilijker zijn om de focus te houden op het "waarom" en niet alleen op het "hoe" van gebruikersinterfacemogelijkheden. Om de fictieve Dr. Ian Malcolm te citeren Jurassic Park:
[Ze] waren zo bezig met of ze konden dat ze niet stopten om te denken of ze dat wel zouden moeten.
Ga zoals altijd, naar buiten, probeer nieuwe dingen, wijzig de instellingen en ontdek de vele andere manieren waarop u uw iOS-interfaces kunt aanpassen!
Accentsconagua