Share
Uneori este nevoie de doar câteva rânduri de cod pentru a vă face interfața pop. Acest tutorial vă va învăța cinci trucuri simple pentru a crea UIButoane elegante pentru a vă face apreciabilă aplicația!
Anumite aspecte ale aplicațiilor sau tehnicilor utilizate în acest tutorial s-au schimbat de când au fost publicate inițial. Acest lucru ar putea face un pic dificil de urmat de-a lungul. Vă recomandăm să consultați aceste tutoriale mai recente pe același subiect:
În descărcarea care însoțește acest tutorial, veți găsi dosare intitulate "Initial Build" și "Final Build". Mai degrabă decât să arătați toți pașii necesari pentru a configura proiectul inițial, trebuie să descărcați atașamentul și să îl urmați folosind proiectul din dosarul "Initial Build".
Cu proiectul inițial deschis, mergeți la ViewController.m fișier și localizați pentru buclă în cadrul viewDidLoad metodă. Fragmentele de cod din sfaturile de mai jos trebuie plasate în această buclă.
Cel mai fundamental pas spre personalizarea UIButton clasa este de a ajusta culoarea fundalului și a titlului atât pentru stările implicite, cât și pentru cele evidențiate. Următorul fragment de cod stabilește culoarea de fundal a fiecărui buton pentru culoarea neagră, culoarea obișnuită a titlului la culoarea albă și culoarea titlului evidențiată în roșu:
// Setați butonul Culoare text [btn setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; [btn setTitleColor: [UICoror redColor] pentruState: UIControlStateHighlighted]; // Setați butonul Culoarea fundalului [btn setBackgroundColor: [UICcolor blackColor]];
Culorile de fundal solide sunt excelente, dar un gradient subtil poate face adesea diferența între bland și lustruit. Inlocuieste setBackgroundColor: mesaj de mai sus cu următoarele pentru a crea un gradient personalizat:
// Desenați un gradient personalizat CAGradientLayer * btnGradient = [CAGradientLayer layer]; btnGradient.frame = btn.bounds; btnGradient.colors = [NSArray arrayWithObjects: (id) [[UICcolor colorWithRed: 102.0f / 255.0f verde: 102.0f / 255.0f albastru: 102.0f / 255.0f alfa: 1.0f] CGColor] : 51.0f / 255.0f verde: 51.0f / 255.0f albastru: 51.0f / 255.0f alfa: 1.0f] CGColor], nil]; [btn.layer inserațiSublayer: btnGradient laIndex: 0];
Pornind de la linia 4 de mai sus, un NSArray este creat cu culorile inițiale și gradientul țintă. Rețineți că valorile RGB corespunzătoare trebuie împărțite la 255 înainte de a fi furnizate către colorWithRed: verde: albastru: alpha: mesaj și că o valoare alfa de 1.0 reprezintă în totalitate opacă în timp ce o valoare alfa de 0.0 reprezintă pe deplin transparent. Din păcate, o explicație completă a "magiei" de mai sus este dincolo de scopul acestui tutorial, dar este important să vă amintiți că pur și simplu trebuie să înlocuiți valorile RGB cu valorile începutul / sfârșitul pe care doriți să le utilizați în propriul dvs. personalizat gradient.
Dacă totul a mers bine, meniul dvs. ar trebui să pară așa:
Nu e rău, nu? Și tocmai am început ...
Apoi dorim să adăugăm o rază de colț personalizat fiecăruia UIButton pentru a face lucrurile să arate puțin mai elegant. Introduceți următoarele linii de cod pentru a face acest lucru:
// Colțuri cu butoane rotunde CALayer * btnLayer = [strat btn]; [btnLayer setMasksToBounds: DA]; [btnLayer setCornerRadius: 5.0f];
În linia 4 de mai sus, raza de colț este setată la 5.0. Redați cu acest număr pentru a mări sau a micșora cât de vizibile sunt colțurile.
Ar trebui să aveți acum un meniu care arată doar un pic slicker:
Uneori, trucurile mici fac diferența. Adăugați o lovitură neagră 1px, în jurul fiecărui buton, cu următoarele rânduri de cod:
// Aplicați o margine neagră de 1 pixel [btnLayer setBorderWidth: 1.0f]; [btnLayer setBorderColor: [[UICcolor negruColor] CGColor]];
Puteți spune diferența? Este foarte subtil, dar încă valoros:
Acum hai să încercăm o schimbare mai notabilă. Fontul implicit al sistemului nu îl taie. Meniul de joc pe care îl construim are nevoie de un font care să se potrivească cu estetica vizuală a jocului. O căutare rapidă pe Google Fonts dezvăluie doar un font numit Knewave de către Tyler Finck care ar trebui să facă truc. Descărcați Knewave acum.
După descărcarea Knewave-Regular.ttf fișier, va trebui să-l trageți în panoul Navigator de proiect în Xcode pentru al adăuga la proiectul dvs. Apoi, deschideți Info.plist fişier. Adăugați un nou rând de liste de proprietăți și introduceți "Fonturi furnizate de aplicație". Ar trebui creat automat o matrice. Setați șirul asociat cu elementul 0 la "Knewave-Regular.ttf". Verificați dublu numele deoarece valoarea este sensibilă la minuscule. Salvați fișierul.
După efectuarea modificării de mai sus, fișierul Info.plist ar trebui să arate astfel:
Apoi, va trebui să adăugați Knewave-Regular.ttf fișier la resursele incluse în proiect. Selectați "SleekButtons" din Project Navigator și apoi faceți clic pe fila "Build Fases". Extindeți meniul derulant "Copiere pachete de resurse" și faceți clic pe semnul plus.
În acest moment, ar trebui să puteți începe să utilizați fontul Knewave în proiectul dvs.! Să încercăm asta, sărind înapoi la ViewController.m fișier și modificarea viewDidLoad pentru a seta un font personalizat:
// Setați butonul Culoare text [btn setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; [btn setTitleColor: [UICoror redColor] pentruState: UIControlStateHighlighted]; // Adăugați Font personalizat [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" dimensiune: 18.0f]]; // Desenați un gradient personalizat CAGradientLayer * btnGradient = [CAGradientLayer layer]; btnGradient.frame = btn.bounds;
Observați că fontWithName valoarea este specificată ca "Knewave", nu "Knewave-Regular" așa cum vă puteți aștepta. Acest lucru se datorează faptului că există o diferență între numele fișierului fontului și numele dat al fontului. Veți avea nevoie să fiți sigur că utilizați numele dat atunci când lucrați cu propriile fonturi.
Cu codul de mai sus, meniul jocului ar trebui să fie complet! Construiți și rulați acum și ar trebui să vedeți ceva de genul:
Deși nu este utilizată în designul primar demonstrat de acest tutorial, adesea este util să se aplice o ușoară rotație elementelor UIKit, în special UIButton sau UIImage obiecte. A face acest lucru este simplu, și se poate face doar cu o singură linie de cod.
Puteți încerca acest lucru cu codul scris până în prezent, făcând următoarele:
self.startGameButton.transform = CGAffineTransformMakeRotare (M_PI / 180 * 5.0f); pentru (UIButton * btn în butoane) // Setați butonul Culoare text [btn setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; [btn setTitleColor: [UICoror redColor] pentruState: UIControlStateHighlighted];
În linia 1 de mai sus, constanta M_PI este împărțit la 180 pentru a genera 1 radian, care apoi este înmulțit cu 5.0f pentru a avea o rotație de 5 radiani. După cum veți observa dacă construiți și executați proiectul, este posibil ca cele de mai sus să ducă la probleme de anti-aliasing cu elementele UIKit care sunt extrase dinamic. În consecință, aplicarea unei rotații este mai potrivită cu a UIButton când proprietatea imaginii de fundal este setată și grafica raster este în uz (adică aceasta funcționează cel mai bine cu fișierele PNG).
Cu cele cinci sfaturi de mai sus, ați văzut cât de ușor poate fi să faceți subtil, dar semnificativ tweaks pentru a UIButton obiect. Cu toate acestea, dacă ți-aș spune că acest lucru ar putea fi mai ușor? Întâlni UIButton-lucioasă, o categorie cu sursa deschisa de George McMullen care aplica automat atat un gradient cat si un finisaj lucios UIButton obiecte.
Implementarea UIButton-lucioasă în propriul proiect este simplu. După ce ați descărcat UIButton-Glossy.h și UIButton-Glossy.m fișiere și le-ați adăugat în proiectul dvs. Xcode, importați fișierul * .h în controlerul vizual principal al proiectului, după cum urmează:
#import "ViewController.h" #import "UIButton + Glossy.h"
Acum, puteți aplica instantaneu un efect lucios rece pe butoanele dvs. cu o singură linie de cod: [btn makeGlossy];.
Pentru a vedea acest lucru în acțiune, înlocuiți codul de control al vizualizării existente cu următoarele:
pentru (UIButton * btn în butoane) // Setați butonul Culoare text [btn setTitleColor: [UICcolor whiteColor] pentruState: UIControlStateNormal]; [btn setTitleColor: [UICoror redColor] pentruState: UIControlStateHighlighted]; // Setați culoarea inițială a culorii backgrond [btn setBackgroundColor: [UICcolor blackColor]]; // Adăugați Font personalizat [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" dimensiune: 18.0f]]; // Faceți luciu [btn makeGlossy];
Butoanele dvs. ar trebui să aibă acum un finisaj lucios și rezultatul final ar trebui să arate cam așa:
Acest tutorial a demonstrat mai multe tehnici pentru a face personalizate UIButton obiectele stralucesc. Descărcați proiectul atașat pentru o privire la codul sursă complet, final.
Întrebări? Comentarii? Sunați de mai jos sau trimiteți-mi un mesaj direct @markhammonds.
Accentsconagua