Share
Noen ganger tar det bare noen få linjer med kode for å gjøre grensesnittet ditt pop. Denne opplæringen vil lære deg fem enkle triks for å lage stilige UIButtons for å gjøre appen din standout!
Visse aspekter av applikasjoner eller teknikker som brukes i denne opplæringen, har endret seg siden den ble opprinnelig publisert. Dette kan gjøre det litt vanskelig å følge med. Vi anbefaler å se på disse nyere opplæringsprogrammene på samme emne:
I nedlastingen som følger med denne opplæringen finner du mapper med tittelen "Initial Build" og "Final Build". I stedet for å vise alle trinnene som er nødvendige for å sette opp det opprinnelige prosjektet, bør du bare laste ned vedlegget og følge med ved hjelp av prosjektet fra "Initial Build" -mappen.
Med det opprinnelige prosjektet åpent, gå til ViewController.m fil og finn til loop i viewDidLoad metode. Kodestykket fra tipsene nedenfor skal plasseres innenfor denne sløyfen.
Det mest grunnleggende skrittet mot å tilpasse UIButton klassen er å justere fargen på bakgrunnen og tittelen for både standard og uthevede stater. Følgende kodestykke angir hver knappes bakgrunnsfarge til svart, vanlig tittelfarge til hvit og markert tittelfarge til rød:
// Sett knappen Tekst Farge [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Sett knappen Bakgrunnsfarge [btn setBackgroundColor: [UIColor blackColor]];
Solid bakgrunnsfarger er flotte, men en subtil gradient kan ofte gjøre forskjellen mellom tørt og polert. Bytt ut setBackgroundColor: melding ovenfor med følgende for å opprette en tilpasset gradient:
// Tegn en tilpasset gradient CAGradientLayer * btnGradient = [CAGradientLayer lag]; btnGradient.frame = btn.bounds; btnGradient.colors = [NSArray arrayWithObjects: (id) [[UIColor colorWithRed: 102.0f / 255.0f grønn: 102.0f / 255.0f blå: 102.0f / 255.0f alfa: 1.0f] CGColor], (id) [[UIColor colorWithRed : 51.0f / 255.0f grønn: 51.0f / 255.0f blå: 51.0f / 255.0f alfa: 1.0f] CGColor], null]; [btn.layer insertSublayer: btnGradient atIndex: 0];
Begynner på linje 4 over, en NSArray er opprettet med start- og målgradientfarger. Merk at de tilsvarende RGB-verdiene må deles med 255 før de leveres til colorWithRed, grønn, blå: a: melding og en alfa-verdi på 1.0 representerer helt ugjennomsiktig mens en alfa-verdi på 0.0 representerer fullstendig gjennomsiktig. Dessverre er en fullstendig forklaring på "magien" over det som ligger utenfor omfanget av denne opplæringen, men det viktige å huske er at du bare trenger å erstatte RGB-verdiene med start / sluttverdiene du vil bruke i egen bruk gradient.
Hvis alt gikk bra, bør menyen nå se slik ut:
Ikke dårlig, va? Og vi har bare nettopp begynt ...
Neste vil vi legge til en tilpasset hjørneradius for hver UIButton for å få ting til å se litt mer slank ut. Sett inn følgende kodelinjer for å få dette til å skje:
// Runde knapp hjørner CALayer * btnLayer = [btn lag]; [btnLayer setMasksToBounds: YES]; [btnLayer settCornerRadius: 5.0f];
I linje 4 over er hjørneradiusen satt til 5,0. Spill med dette nummeret for å øke eller redusere hvor merkbare hjørnene vises.
Du bør nå ha en meny som ser litt slicker ut:
Noen ganger gjør de små tweaksene hele forskjellen. Legg til 1px, svart slag rundt hver knapp med følgende linjer med kode:
// Bruk en 1 piksel, svart ramme [btnLayer setBorderWidth: 1.0f]; [btnLayer setBorderColor: [[UIColor blackColor] CGColor]];
Kan du fortelle forskjellen? Det er veldig subtilt, men likevel verdifullt:
La oss nå prøve en mer bemerkelsesverdig tweak. Standard system skrifttypen er bare ikke å kutte den. Spillmenyen vi bygger trenger en skrift som kan matche visuell estetikk i spillet. Et raskt søk på Google Fonts avslører bare en font som heter Knewave av Tyler Finck som burde gjøre trikset. Last ned Knewave nå.
Etter nedlasting av Knewave-Regular.ttf fil, må du dra den inn i Prosjektnavigator-panelet i Xcode for å legge den til i prosjektet. Deretter åpner du Info.plist fil. Legg til en ny liste over eiendomslister og skriv inn "Fonter levert av programmet". En matrise bør opprettes automatisk. Sett strengen som er knyttet til element 0 til "Knewave-Regular.ttf". Dobbeltklikk navnet fordi verdien er saksfølsom. Lagre filen.
Etter å ha gjort den ovennevnte modifikasjonen, bør Info.plist-filen nå se slik ut:
Deretter må du legge til Knewave-Regular.ttf filen til prosjektets bundlede ressurser. Velg "SleekButtons" fra Project Navigator, og klikk deretter på "Build Phases" -fanen. Utvid "Kopier Bundle Resources" drop down og klikk deretter plustegnet.
På dette tidspunktet bør du kunne begynne å bruke Knewave-fonten i prosjektet ditt! La oss teste det ut ved å hoppe tilbake til ViewController.m fil og modifisere viewDidLoad Metode for å angi en egendefinert skrift:
// Sett knappen Tekst Farge [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Legg til egendefinert skrifttype [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" størrelse: 18.0f]]; // Tegn en tilpasset gradient CAGradientLayer * btnGradient = [CAGradientLayer lag]; btnGradient.frame = btn.bounds;
Legg merke til at fontWithName verdien er spesifisert som "Knewave", ikke "Knewave-Regular" som du kanskje forventer. Dette skyldes at det er en forskjell mellom skrifttypens filnavn og skriftens navn. Du må være sikker på at du bruker det oppgitte navnet når du arbeider med dine egne skrifter.
Med ovennevnte kode på plass, bør spillmenyen være fullført! Bygg og løp nå, og du bør se noe som følger:
Selv om den ikke brukes i det primære designet som demonstreres av denne opplæringen, er det ofte nyttig å bruke en liten rotasjon til UIKit-elementene, spesielt UIButton eller UIImage objekter. Å gjøre det er enkelt, og kan gjøres med bare én linje med kode.
Du kan prøve dette ut med koden som er skrevet så langt ved å gjøre følgende:
self.startGameButton.transform = CGAffineTransformMakeRotation (M_PI / 180 * 5.0f); for (UIButton * btn i knapper) // Angi knappen Tekst Farge [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted];
I linje 1 ovenfor, konstanten M_PI er delt med 180 for å generere 1 radian, som deretter multipliseres med 5.0f for å resultere i en rotasjon på 5 radianer. Som du vil se om du bygger og driver prosjektet, vil det ovenfor sannsynligvis resultere i anti-aliasing-problemer med UIKit-elementer som trekkes dynamisk. Følgelig er anvendelse av en rotasjon mer hensiktsmessig med a UIButton når bakgrunnsbildeegenskapen er satt og rastergrafikk er i bruk (det vil si dette fungerer best med PNG-filer).
Med de fem tipsene ovenfor har du sett hvor enkelt det kan være å lage subtile, men betydelige tweaks til en UIButton gjenstand. Men hva om jeg fortalte deg at det kunne bli enda enklere? Møte UIButton-Glossy, en åpen kildekode av George McMullen som automatisk gjelder både en gradient og en blank finish til UIButton objekter.
implementering UIButton-Glossy i ditt eget prosjekt er enkelt. Etter at du har lastet ned UIButton-Glossy.h og UIButton-Glossy.m filer og lagt dem til ditt Xcode-prosjekt, importerer du * .h-filen i hovedprojektvisningskontrollen, slik:
#import "ViewController.h" #import "UIButton + Glossy.h"
Nå kan du umiddelbart bruke en kul, blank effekt på knappene dine med bare én linje med kode: [btn makeGlossy];.
For å se dette i aksjon, erstatt eksisterende visningskontrollerkode med følgende:
for (UIButton * btn i knapper) // Angi knappen Tekst Farge [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Sett standard backgrond farge [btn setBackgroundColor: [UIColor blackColor]]; // Legg til egendefinert skrifttype [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" størrelse: 18.0f]]; // Lag glanset [btn makeGlossy];
Dine knapper skal nå ha en blank overflate, og sluttresultatet skal se slik ut:
Denne opplæringen har vist flere teknikker for å lage tilpassede UIButton gjenstander skinner. Last ned vedlagte prosjekt for et glimt ved full, endelig kildekode.
Spørsmål? Kommentarer? Lyd av under eller melding meg direkte @ markhammonds.
Accentsconagua