Share
Tema anpassning är ett utmärkt sätt att sticka ut i App Store, men det är inte alltid lätt att uppnå. Denna handledning kommer att lära dig flera grundläggande UIKit-anpassningsverktyg som hjälper dig att skilja dina applikationer och skapa mer minnesvärda användarupplevelser.
Om du har spenderat tid på Apples online dokumentation i deras iOS Dev Center, har du säkert blivit bekant med de ökända gränssnitten för mänskliga gränssnitt (mer casually kallad "HIG"). Detta dokument tillhandahåller utvecklare och designers av iOS-program med riktlinjer för hur användarna förväntar sig att interagera med Apps på iOS-plattformen, vanliga användningsexempel och allmänna UI / UX-principer att följa.
Medan det finns många sätt att anpassa utseendet på din egen iOS-app - från att ändra färger och storlekar för att rulla egna användargränssnitt - anses det vara bästa praxis att följa HIG och dess förslag för att tillhandahålla ett kortfattat användargränssnitt.
Med det i åtanke, låt oss ta en titt på några sätt som vi kan göra just detta medan vi anpassar vårt gränssnitt för att passa ett mer unikt visuellt tema.
De flesta iOS-utvecklare är bekanta med de gemensamma attributen i UIView-klassen som är lätta att ändra, till exempel bakgrundsfärg, teckensnittstorlek eller opacitet. Men ibland kan vi inte få det resultat vi behöver för att tweaking dessa egenskaper.
Så, för att visa mer praktiska anpassningstekniker, arbetar vi med en enkel bildvisareapp. Så här ser appen ut utan några anpassningar, och sedan med de ändringar som vi ska utföra:
Innan vi börjar, behöver du några bilder som du kan hämta här.
Jag har också satt upp den grundläggande applikationen som vi ska använda, som du kan ladda ner här. Du behöver inte oroa dig för allt prep-arbetet. låt oss bara komma igång med anpassning!
Med vår prep-app har vi några grundläggande komponenter:
Vi börjar med att göra vår bakgrund lite snyggare genom att ställa in en bakgrundsbild. För att göra detta, låt oss lägga till en metod i vår "MTViewController" -klass som heter "-setupUI".
Vi lägger till den här metoden precis under våra @synthesize-deklarationer.
- (void) setupUI
Nu måste vi lägga till vår bakgrundsbildfil till vårt projekt, så skaffa filen "BG-pattern.png" från de resurser som du hämtade för en minut sedan och dra den till vår App. Jag har skapat en ny grupp för våra UI-bilder som heter "UI Graphics".
Med bilden på plats kan vi gå in i denna "setupUI" -metoden, och vi behöver bara lägga till en rad:
[self.view setBackgroundColor: [UIColor colorWithPatternImage: [UIImage imageNamed: @ "BG-pattern.png"]]];
För att göra denna förändring bor i vår App måste vi kalla vår "setupUI" -metod från "viewDidLoad" -metoden i vår ViewController. Jag har redan lagt till några samtal till "viewDidLoad" -metoden, så vi kan bara lägga till den här i början:
- (void) viewDidLoad // ställa in de anpassade användargränssnittenheterna [self setupUI]; // bygga arrays för bilder och titlar [self setupData]; // starta app med första segmentet valt [self didChangeSegmentControl: aSegmentControl]; [super viewDidLoad]; // Gör någon ytterligare inställning efter att ha laddat upp vyn, vanligtvis från en spets.
Låt oss nu få vår bild att sticka lite ut genom att lägga till en vit kant runt den. För att göra detta ska vi arbeta med CALayers, vilket innebär att vi först måste inkludera QuartzCore-ramverket i vårt projekt.
Så gå till vårt UIKitDemo-projekt och vi väljer vårt mål (UIKitDemo). Sedan går vi över till fliken med titeln "Byggfaser" och visar "Länka binära med bibliotek".
I botten klickar vi på knappen "+" och väljer "QuartzCore.framework".
Slutligen måste vi #importera Quartz i vår ViewController (MTViewController.m).
#importera
Med Quartz på plats kan vi börja fitta runt med anImageView-underlagren. Vi lägger till följande i vår "setupUI" -metod för att lägga till gränsen runt vår ImageView:
[anImageView.layer setBorderWidth: 5.0f]; [anImageView.layer setBorderColor: [[UIColor whiteColor] CGColor]];
Om vi bygger och kör vår App nu kan vi se en snygg, vit kant runt vår ImageView.
Nu, för att göra vår bild sticka ut ännu mer, kan vi lägga en subtil skugga bakom den med hjälp av liknande 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];
Några av dessa kommandon är inte direkt uppenbara med avseende på deras funktion, så vi tittar på de här linjerna:
[anImageView.layer setShadowRadius: 5.0f];
Vi börjar med att ange hur mycket "oskärpa" vår skugga kommer att ha.
[anImageView.layer setShadowOffset: CGSizeMake (1.0f, 2.0f)];
Därefter skapar vi en kompensation för vår skugga, så att den inte bara ligger direkt bakom vår bild.
[anImageView.layer setShouldRasterize: YES];
Det här kommandot kommer att hjälpa till med prestanda, eftersom det säkerställs att skuggan bara dras en gång och sedan sparas som en bitmapp, vilket undviker behovet av att App ska rita processorns intensiva transparenta lager.
[anImageView.layer setMasksToBounds: NO];
Slutligen vill vi se till att vi inte skär av vår skugga, eftersom den sprider sig utöver vår ursprungliga vy.
Försök att köra App igen, och du får se en fin skugga bakom vår bild.
Vi har många hårda kanter, så låt oss mjuka vårt gränssnitt genom att göra vår UILabel (aLabel) med rundade hörn.
Vi kan göra detta i samma "setupUI" -metod under UIImageView-anpassningarna. Allt vi behöver är en enkel linje för att göra detta arbete:
[aLabel.layer setCornerRadius: 15.0f];
Nu kommer den slutliga ändringen av vår "setupUI" -metod att rotera vår UIImageView något, vilket kommer att bryta upp den "fyrkantiga" känslan av resten av layouten.
Vi kan göra detta med ytterligare två linjer längst ner i vår "setupUI" -metod:
CGAffineTransform transform = CGAffineTransformMakeRotation (.03f); anImageView.transform = transform;
Och det är det för vår "setupUI". Inte så illa för bara några rader av kod, rätt?
Med utgåvan av iOS 5 kom ett nytt protokoll för underklasser av UIViews som heter "utseende". Detta protokoll tillåter oss att ändra vissa aspekter av våra vanliga UIKit-komponenter som vi vill - som att ställa in egna bakgrundsbilder, skuggor, färgeffekter och mer.
Ett enkelt exempel på detta är UINavigationBar. Vi kan nu ställa in anpassade bilder för att ändra våra UINavigationBars för att passa våra App-teman utan några krångel:
[[UINavigationBar utseende] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
I det här fallet har vi en UImage som heter "navBarImage", som vi ställer in som standardbild för vår UINavigationBar. Samtalet "utseende" kommer att påverka vår UINavigationBar-klass, inte bara en enda instans. Det innebär att våra ändringar kommer att tillämpas på alla UINavigationBars som vi använder i den här appen.
För att genomföra denna ändring i vårt nuvarande Photo Viewer-projekt måste vi gå till vår AppDelegate-klass (MTAppDelegate). Vi kommer till AppDelegate eftersom vi vill att vår ändring påverkar alla instanser av UINavigationBars i vår App. För att säkerställa att våra ändringar görs, implementerar vi dem direkt efter att App öppnas..
Låt oss börja med att lägga till metoden till vår "MTAppDelegate" -klass strax efter vårt @synthesize deklarationer, precis som vi gjorde i vår "MTViewController" -klass:
- (void) setupUI
Nu importerar vi vår "navBar.png" -bild (från den bildresursmapp som du hämtade tidigare).
Vi kan då skapa den UIImage-instans som vi ska använda för vår bakgrund:
Ullmage * navBarImage = [UIImage imageNamed: @ "navBar.png"];
Och strax efter det kan vi göra vårt "utseende" -samtal:
[[UINavigationBar utseende] setBackgroundImage: navBarImage forBarMetrics: UIBarMetricsDefault];
Innan den här ändringen är aktiv måste vi kalla vår "setupUI" -metod från applikations: didFinishLaunchingWithOptions: metod.
- (BOOL) ansökan: (UIApplication *) ansökan gjordeFinishLaunchingWithOptions: (NSDictionary *) launchOptions [self setupUI]; ...
Du kan köra din App nu -notice den mörka bakgrunden i vår UINavigationBar på toppen.
För vårt nästa knep blir saker lite mer komplicerade. Vi ska ställa in anpassade bilder för vår UISegmentedControl. Den svåra delen här är att vi inte bara hanterar en eller två bakgrundsbilder, utan i stället måste vi arbeta med specifika bildsektioner; som de avrunda ändarna, valda eller oselekterade mellansektioner, delningslinjen mellan två segment, etc ...
Först och främst, om du inte redan har importerat, importerar du de återstående bilderna i den bildresursmapp som du hämtade.
Precis som UINavigationBar som vi modifierade för en minut sedan måste vi göra två saker för att få vår UISegmentedControl ändrad.
Jag har inte tillräckligt med tid här för att bryta ner alla dessa åtgärder steg för steg, men jag tar upp några av de viktigaste på en minut. För nu lägger du till följande kod i din "setupUI" -metod:
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"]; Ullmage * segUnselectedSelected = [UIImage imageNamed: @ "segcontrol_uns-sel.png"]; UIImage * segmentUnselectedUnselected = [UIImage imageNamed: @ "segcontrol_uns-uns.png"];
Detta skapar våra UIImages, och utför ändringar som är lämpliga. Du märker denna lilla bit:
resizableImageWithCapInsets: UIEdgeInsetsMake (0, 15, 0, 15)
Detta gör det möjligt för oss att väsentligen "skära" vår bildfil genom att klippa in den med vissa marginaler. I det här fallet lämnar vi toppen som är, flyttar 15pts in från vänster sida, lämnar botten som den är och flyttar 15pts in från höger sida. Det lämnar oss med mellansektionen som kommer att expandera till den nödvändiga bredden, men de avrundade ändarna kommer att förbli samma bokning av vår utsträckta mitten.
Mer information om "resizableImageWithCapInsets:" finns i den officiella Apple-dokumentationen.
Med våra bilder stora och klara kan vi ställa in de olika tillstånden i vår UISegmentedControl. Var och en av de fem bilder som vi just lagt till kommer att ha ett motsvarande tillstånd:
[[UISegmentedControl utseende] setBackgroundImage: segmentUnselected forState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl appearance] setBackgroundImage: segmentSelected forState: UIControlStateSelected barMetrics: UIBarMetricsDefault]; [[UISegmentedControl utseende] setDividerImage: segmentUnselectedUnselected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl appearance] setDividerImage: segmentSelectedEnselected forLeftSegmentState: UIControlStateSelected rightSegmentState: UIControlStateNormal barMetrics: UIBarMetricsDefault]; [[UISegmentedControl utseende] setDividerImage: segUnselectedSelected forLeftSegmentState: UIControlStateNormal rightSegmentState: UIControlStateSelected barMetrics: UIBarMetricsDefault];
Till skillnad från en enkel UIButton, som i princip antingen är valda eller inte, kan vår UISegmentedControl också kontrollera vad staten är på vardera sidan av det nuvarande segmentet, men det är inte för komplicerat när vi har blivit klara av det.
Med de nya funktionerna i iOS 5, och lite kreativt arbete med Quartz, kan vi snabbt och enkelt få våra Apps att se ut som vi vill. Några utmaningar som presenterar sig med UI-anpassning är:
Det kan vara relativt enkelt att hitta bra grafik, och det finns gott om bra designers där ute som är villiga att hjälpa. Det kan vara svårare ibland att hålla fokus på "varför" och inte bara "hur" av UI-anpassning. Att citera den fiktiva Dr. Ian Malcolm i Jurassic park:
[De] var så upptagna med om de kunde att de inte slutade tänka om de skulle.
Som alltid gå ut, prova nya saker, tweak inställningar och utforska de många andra sätten du kan anpassa dina iOS-gränssnitt!
Accentsconagua