Share
Temaet tilpasning er en fin måte å skille seg ut i App Store, men det er ikke alltid lett å oppnå. Denne opplæringen vil lære deg flere grunnleggende UIKit-tilpasnings triks som vil hjelpe til med å skille mellom dine applikasjoner og skape mer minneverdige brukeropplevelser.
Hvis du har brukt tid på å spekulere på Apples nettdokumentasjon i deres iOS Dev Center, har du sikkert blitt kjent med de beryktede retningslinjene for menneskelig grensesnitt (mer casually referert til som "HIG"). Dette dokumentet gir utviklere og designere av iOS-programmer med retningslinjer for hvordan brukere forventer å kommunisere med Apps på IOS-plattformen, vanlige brukseksempler og generelle UI / UX-prinsipper for å følge.
Mens det er mange måter å tilpasse utseendet til din egen iOS-app - fra å endre farger og størrelser for å rulle dine egne brukergrensesnittelementer, anses det som best praksis for å følge HIG og dens forslag til å gi et kort, brukbart grensesnitt.
Med det i tankene, la oss ta en titt på noen måter vi kan gjøre nettopp det, mens vi tilpasser grensesnittet vårt for å passe til et mer unikt visuelt tema.
De fleste iOS-utviklere er kjent med de vanlige egenskapene til UIView-klassen som er enkle å endre, for eksempel bakgrunnsfarge, skriftstørrelse eller opasitet. Men noen ganger gir tweaking disse egenskapene bare ikke oss det resultatet vi trenger.
Så, for å demonstrere flere praktiske tilpasningsteknikker, jobber vi med en enkel bildevisnings-app. Dette er hva appen vil se ut uten noen tilpasninger, og deretter med endringene som vi skal utføre:
Før vi kommer i gang, trenger du noen bilder som du kan laste ned her.
Også, jeg har satt opp det grunnleggende programmet som vi skal bruke, som du kan laste ned her. Du trenger ikke å bekymre deg for alt prep arbeidet; la oss bare begynne å tilpasse!
Med vår prep app har vi noen grunnleggende komponenter:
Vi starter med å gjøre bakgrunnen vår se litt snillere ved å sette et bakgrunnsbilde. For å gjøre dette, la vi legge til en metode i vår "MTViewController" -klasse som heter "-setupUI".
Vi legger til denne metoden like under våre @synthesize erklæringer.
- (ugyldig) setupUI
Nå må vi legge til vår bakgrunnsbildefil til prosjektet vårt, så få filen "BG-pattern.png" fra ressursene du lastet ned for et minutt siden, og dra det inn i Appen vår. Jeg har laget en ny gruppe for våre UI-bilder kalt "UI Graphics".
Med bildet på plass kan vi gå inn i denne "setupUI" metoden, og vi trenger bare å legge til en linje:
[self.view setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @ "BG-pattern.png"]]];
For å gjøre denne endringen levende i Appen vår, må vi ringe vår "setupUI" -metode fra "viewDidLoad" -metoden til vår ViewController. Jeg har allerede lagt til noen få anrop til "viewDidLoad" -metoden, så vi kan bare legge til denne i begynnelsen:
- (void) viewDidLoad // konfigurer de egendefinerte brukergrensesnittene [selvoppsettUI]; // bygge arrays for bilder og titler [self setupData]; // start app med første segment valgt [self didChangeSegmentControl: aSegmentControl]; [super viewDidLoad]; // Gjør eventuelle tilleggsoppsett etter at du har lastet opp visningen, vanligvis fra en nib.
La oss få bildet til å skille seg ut litt ved å legge til en hvit kant rundt den. For å gjøre dette, jobber vi med CALayers, noe som betyr at vi først må inkludere QuartzCore-rammeverket i prosjektet vårt.
Så gå til vårt UIKitDemo-prosjekt og vi velger vårt mål (UIKitDemo). Deretter går vi over til fanen "Build Phases", og viser "Link Binære Med Biblioteker" -delen.
På bunnen klikker vi på "+" -knappen og velger "QuartzCore.framework".
Til slutt må vi #importere Kvarts i vår ViewController (MTViewController.m).
#importere
Med Quartz på plass, kan vi begynne å fitte rundt med anImageView-underlagene. Vi legger til følgende i vår "setupUI" -metode for å legge til grensen rundt vår ImageView:
[anImageView.layer settBorderWidth: 5.0f]; [anImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
Hvis vi bygger og driver vår App nå, kan vi se en pen hvit ramme rundt vår ImageView.
Nå, for å gjøre bildet vårt enda mer, kan vi sette en subtil skygge bak den ved hjelp av lignende metoder:
[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];
Noen av disse kommandoene er ikke umiddelbart opplagte med hensyn til deres funksjon, så vi ser på disse linjene:
[anImageView.layer setShadowRadius: 5.0f];
Vi starter med å angi hvor mye "uskarphet" vår skygge vil ha.
[anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)];
Deretter oppretter vi en kompensasjon for skyggen vår, slik at den ikke bare ligger direkte bak bildet vårt.
[anImageView.layer setShouldRasterize: YES];
Denne kommandoen vil bidra til ytelse, da det sørger for at skyggen bare trekkes en gang og deretter lagres som en bitmap, og unngår behovet for at App skal trekke prosessorens intensive gjennomsiktige lag.
[anImageView.layer setMasksToBounds: NO];
Til slutt vil vi sørge for at vi ikke skjærer av vår skygge, siden den sprer seg utover vår opprinnelige visning.
Prøv å kjøre Appen igjen, og du vil se en fin skygge bak bildet vårt.
Vi har mange hardkanter, så la oss myke grensesnittet ved å gjøre vår UILabel (aLabel) avrundet hjørner.
Vi kan gjøre dette i samme "setupUI" -metode under UIImageView-tilpasningene. Alt vi trenger er en enkel linje for å gjøre dette arbeidet:
[aLabel.layer setCornerRadius: 15.0f];
Nå vil den endelige endringen i vår "setupUI" -metode rotere vår UIImageView litt, som vil bryte opp den "firkantede" følelsen av resten av oppsettet.
Vi kan gjøre dette med to flere linjer nederst i vår "setupUI" -metode:
CGAffineTransform transform = CGAffineTransformMakeRotation (.03f); anImageView.transform = transform;
Og det er det for vår "setupUI". Ikke så ille for bare noen få linjer med kode, rett?
Med utgivelsen av iOS 5 kom en ny protokoll for underklasser av UIViews kalt "utseende". Denne protokollen tillater oss å endre visse aspekter av våre standard UIKit-komponenter som vi liker - for eksempel å angi egendefinerte bakgrunnsbilder, skygger, fargeeffekter og mer.
Et enkelt eksempel på dette er UINavigationBar. Vi kan nå angi egendefinerte bilder for å endre våre UINavigationBars slik at de passer til App-temaene våre uten å måtte ha problemer:
[[UINavigationBar utseende] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
I dette tilfellet har vi en UImage som heter "navBarImage", som vi angir som standardbilde for vår UINavigationBar. Utseendet kalles for å påvirke vår klasse UINavigationBar, ikke bare en enkelt forekomst. Dette betyr at våre endringer vil bli brukt på alle UINavigationBars som vi bruker i denne appen.
For å implementere denne endringen i vårt nåværende Photo Viewer-prosjekt, må vi gå til vår AppDelegate-klasse (MTAppDelegate). Vi kommer til AppDelegate fordi vi vil at vår endring skal påvirke alle forekomster av UINavigationBars i Appen vår, så for å sikre at endringene våre blir gjort, implementerer vi dem umiddelbart etter at appen er åpnet.
La oss starte med å legge til metoden i vår "MTAppDelegate" -klasse rett etter vår @synthesize erklæringer, akkurat som vi gjorde i vår "MTViewController" -klasse:
- (ugyldig) setupUI
Nå skal vi importere vårt "navBar.png" -bilde (fra bildemessigmappen du lastet ned tidligere).
Vi kan da opprette UIImage-forekomsten som vi skal bruke til bakgrunnen vår:
Ullmage * navBarImage = [UIImage imageNamed: @ "navBar.png"];
Og rett etter det kan vi få vårt utseende til å ringe:
[[UINavigationBar utseende] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
Før denne endringen er aktiv skjønt, må vi ringe vår "setupUI" -metode fra applikasjons: didFinishLaunchingWithOptions: metode.
- (BOOL) søknad: (UIApplication *) søknad didFinishLaunchingWithOptions: (NSDictionary *) launchOptions [self setupUI]; ...
Du kan kjøre appen din nå-notat den mørke bakgrunnen i vår UINavigationBar på toppen.
For vårt neste triks blir ting litt mer komplisert. Vi skal sette tilpassede bilder for vår UISegmentedControl. Den vanskelige delen her er at vi ikke bare håndterer ett eller to bakgrunnsbilder, men i stedet må vi jobbe med bestemte deler av bildene; for eksempel de avrundede endene, valgte eller ikke-valgte midtpartier, skillelinjen mellom to segmenter, etc ...
Først av, hvis du ikke allerede har importert de resterende bildene i mappen Image Resource du lastet ned.
Akkurat som UINavigationBar som vi endret for et minutt siden, må vi gjøre to ting for å få vår UISegmentedControl endret.
Jeg har ikke nok tid her til å bryte ned hver av disse handlingene trinn for steg, men jeg tar opp noen av de viktigste på et minutt. For nå legger du til følgende kode i "setupUI" -metoden din:
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"];
Dette skaper våre UIImages, og utfører omforming etter behov. Du vil legge merke til denne lille bit:
resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)
Dette gir oss mulighet til å "beskjære" vår bildefil ved å kutte inn i den med visse marginer. I dette tilfellet forlater vi toppen som er, flytter 15pts inn fra venstre side, forlater bunnen som den er, og beveger 15pts inn fra høyre side. Det etterlater oss med den midterste delen som vil utvide til nødvendig bredde, men de avrundede endene vil forbli den samme som bokmerker vår strakte midt.
For mer informasjon om "resizableImageWithCapInsets:", sjekk ut den offisielle Apple-dokumentasjonen.
Med våre bilder i størrelse og klar, kan vi angi de forskjellige tilstandene i vår UISegmentedControl. Hver av de fem bildene vi nettopp har lagt til, vil ha en tilsvarende stat:
[[UISegmentedControl utseende] setBackgroundImage: segmentUnselected forState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl utseende] setBackgroundImage: segmentSelected forState: UIControlStateSelected barMetrics: UIBarMetricsDefault]; [[UISegmentedControl utseende] setDividerImage: segmentUnselectedUnselected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl utseende] setDividerImage: segmentSelectedUnselected forLeftSegmentState: UIControlStateSelected rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl utseende] setDividerImage: segUnselectedSelected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateSelected barMetrics: UIBarMetricsDefault];
I motsetning til en enkel UIButton, som i utgangspunktet enten er valgt eller ikke, kan vår UISegmentedControl også sjekke hva staten er på begge sider av det nåværende segmentet, men det er ikke så komplisert når vi har fått tak i det.
Med de nye funksjonene i iOS 5, og noe kreativt arbeid med Quartz, kan vi raskt og enkelt få våre Apps til å se akkurat slik vi ønsker. Noen utfordringer som presenterer seg med UI-tilpasning er:
Det kan være relativt enkelt å finne god grafikk, og det er mange gode designere der ute som er villige til å hjelpe. Det kan være vanskeligere noen ganger å holde fokus på "hvorfor" og ikke bare "hvordan" av brukergrensesnittet. Å sitere den fiktive Dr. Ian Malcolm i Jurassic Park:
[De] var så opptatt av om de kunne at de ikke slutte å tenke hvis de skulle.
Som alltid, gå ut, prøv nye ting, juster innstillinger, og utforsk de mange andre måtene du kan tilpasse iOS-grensesnittene dine.!
Accentsconagua