Share
A volte bastano poche righe di codice per far esplodere la tua interfaccia. Questo tutorial ti insegnerà cinque semplici trucchi per creare eleganti UIButton per rendere la tua app davvero eccezionale!
Alcuni aspetti delle applicazioni o delle tecniche utilizzate in questo tutorial sono cambiati da quando è stato originariamente pubblicato. Questo potrebbe rendere un po 'difficile da seguire. Ti consigliamo di guardare questi tutorial più recenti sullo stesso argomento:
Nel download che accompagna questo tutorial, troverai le cartelle "Creazione iniziale" e "Costruzione finale". Piuttosto che mostrare tutti i passaggi necessari per impostare il progetto iniziale, devi semplicemente scaricare l'allegato e seguire il progetto usando la cartella "Initial Build".
Con il progetto iniziale aperto, vai su ViewController.m file e individuare il per loop all'interno del viewDidLoad metodo. I frammenti di codice dai suggerimenti di seguito dovrebbero essere collocati all'interno di questo ciclo.
Il passo più fondamentale verso la personalizzazione del UIButton class è quello di regolare il colore dello sfondo e del titolo sia per gli stati predefiniti che per quelli evidenziati. Il seguente frammento di codice imposta il colore di sfondo di ciascun pulsante su nero, il colore normale del titolo su bianco e il colore del titolo evidenziato su rosso:
// Imposta il pulsante Colore del testo [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Imposta il pulsante Colore sfondo [btn setBackgroundColor: [UIColor blackColor]];
I colori di sfondo a tinta unita sono ottimi, ma una leggera sfumatura può spesso fare la differenza tra blando e lucido. Sostituisci il setBackgroundColor: messaggio precedente con il seguente per creare un gradiente personalizzato:
// Disegna un gradiente personalizzato CAGradientLayer * btnGradient = [livello CAGradientLayer]; btnGradient.frame = btn.bounds; btnGradient.colors = [NSArray arrayWithObjects: (id) [[Colore colore UIC: 102.0f / 255.0f verde: 102.0f / 255.0f blu: 102.0f / 255.0f alfa: 1.0f] CGColor], (id) [[Colore UIColoreConfronta : 51.0f / 255.0f verde: 51.0f / 255.0f blu: 51.0f / 255.0f alpha: 1.0f] CGColor], nil]; [btn.layer insertSublayer: btnGradient atIndex: 0];
A partire dalla riga 4 sopra, a NSArray viene creato con i colori del gradiente iniziale e di destinazione. Si noti che i corrispondenti valori RGB devono essere divisi per 255 prima di essere forniti al colorWithRed: verde: blu: alpha: messaggio e che un valore alfa di 1.0 rappresenta completamente opaco mentre un valore alfa di 0.0 rappresenta completamente trasparente. Sfortunatamente, una spiegazione completa della "magia" sopra è oltre lo scopo di questo tutorial, ma la cosa importante da ricordare è che devi semplicemente sostituire i valori RGB con i valori di inizio / fine che vuoi usare nella tua personalizzazione pendenza.
Se tutto è andato bene, il tuo menu dovrebbe ora assomigliare a questo:
Non male, eh? E abbiamo appena iniziato ...
Successivamente vogliamo aggiungere un raggio dell'angolo personalizzato a ciascuno UIButton per far sembrare le cose un po 'più eleganti. Inserisci le seguenti righe di codice per fare in modo che questo accada:
// Angoli dei pulsanti rotondi CALayer * btnLayer = [btn layer]; [btnLayer setMasksToBounds: YES]; [btnLayer setCornerRadius: 5.0f];
Nella riga 4 sopra il raggio dell'angolo è impostato su 5.0. Gioca con questo numero per aumentare o diminuire la visibilità degli angoli.
Ora dovresti avere un menu che appaia solo un po 'più delicato:
A volte le piccole modifiche fanno la differenza. Aggiungi un 1px, tratto nero attorno ad ogni pulsante con le seguenti linee di codice:
// Applica un bordo nero da 1 pixel [btnLayer setBorderWidth: 1.0f]; [btnLayer setBorderColor: [[UIColor blackColor] CGColor]];
Puoi dire la differenza? È molto sottile, ma comunque prezioso:
Ora proviamo un ritocco più degno di nota. Il font di sistema predefinito non lo sta tagliando. Il menu di gioco che stiamo costruendo ha bisogno di un font che possa eguagliare l'estetica visiva del gioco. Una rapida ricerca su Google Fonts rivela solo un font chiamato Knewave di Tyler Finck che dovrebbe fare il trucco. Scarica subito Knewave.
Dopo aver scaricato il Knewave-Regular.ttf file, dovrai trascinarlo nel riquadro Navigatore progetto in Xcode per aggiungerlo al tuo progetto. Quindi, apri il Info.plist file. Aggiungi una nuova riga di elenco di proprietà e digita "Caratteri forniti dall'applicazione". Un array dovrebbe essere creato automaticamente. Imposta la stringa associata all'articolo 0 a "Knewave-Regular.ttf". Doppio controllo del nome perché il valore è case sensitive. Salva il file.
Dopo aver apportato la modifica sopra, il tuo file Info.plist dovrebbe ora assomigliare a questo:
Successivamente, dovrai aggiungere il Knewave-Regular.ttf file alle risorse raggruppate del progetto. Seleziona "SleekButtons" dal Navigatore progetto e quindi fai clic sulla scheda "Crea fasi". Espandere il menu a discesa "Copia risorse pacchetto" e quindi fare clic sul segno più.
A questo punto, dovresti essere in grado di iniziare a usare il carattere di Knewave nel tuo progetto! Proviamolo saltando di nuovo al ViewController.m file e modificando il viewDidLoad metodo per impostare un carattere personalizzato:
// Imposta il pulsante Colore del testo [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Aggiungi carattere personalizzato [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Disegna un gradiente personalizzato CAGradientLayer * btnGradient = [livello CAGradientLayer]; btnGradient.frame = btn.bounds;
Si noti che il fontWithName il valore è specificato come "Knewave", non "Knewave-Regular" come ci si potrebbe aspettare. Questo perché c'è una differenza tra il nome del font e il nome del font. Dovrai essere sicuro di usare il nome dato quando lavori con i tuoi font.
Con il codice sopra riportato, il menu di gioco dovrebbe essere completo! Costruisci ed esegui ora e dovresti vedere qualcosa di simile al seguente:
Sebbene non sia stato utilizzato nella progettazione primaria dimostrata da questo tutorial, è spesso utile applicare una leggera rotazione agli elementi di UIKit, in particolare UIButton o UIImage oggetti. Fare così è semplice e può essere fatto con una sola riga di codice.
Puoi provare questo con il codice scritto fino ad ora facendo quanto segue:
self.startGameButton.transform = CGAffineTransformMakeRotation (M_PI / 180 * 5.0f); for (UIButton * btn in buttons) // Imposta il pulsante Text Color [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted];
Nella riga 1 sopra, la costante M_PI è diviso per 180 per generare 1 radian, che viene quindi moltiplicato per 5,0f per ottenere una rotazione di 5 radianti. Come noterai se costruisci ed esegui il progetto, quanto sopra potrebbe causare problemi di anti-aliasing con elementi UIKit disegnati dinamicamente. Di conseguenza, applicare una rotazione è più appropriato con a UIButton quando la proprietà dell'immagine di sfondo è impostata e la grafica raster è in uso (cioè funziona meglio con i file PNG).
Con i cinque suggerimenti di cui sopra, hai visto quanto sia facile apportare modifiche sottili ma significative a a UIButton oggetto. Tuttavia, cosa succede se ti dicessi che farlo potrebbe essere ancora più semplice? Incontrare UIButton-lucida, una categoria open source di George McMullen che applica automaticamente sia una sfumatura che una finitura lucida UIButton oggetti.
Implementazione UIButton-lucida nel tuo progetto è semplice. Dopo aver scaricato il UIButton-Glossy.h e UIButton-Glossy.m file e li ha aggiunti al progetto Xcode, importare il file * .h nel controller di visualizzazione progetto principale, in questo modo:
#import "ViewController.h" #import "UIButton + Glossy.h"
Ora puoi applicare immediatamente un effetto lucido sui pulsanti con una sola riga di codice: [btn makeGlossy];.
Per vedere questo in azione, sostituire il codice del controller di visualizzazione esistente con quanto segue:
for (UIButton * btn in buttons) // Imposta il pulsante Text Color [btn setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]; [btn setTitleColor: [UIColor redColor] forState: UIControlStateHighlighted]; // Imposta il colore backgrond predefinito [btn setBackgroundColor: [UIColor blackColor]]; // Aggiungi carattere personalizzato [[btn titleLabel] setFont: [UIFont fontWithName: @ "Knewave" size: 18.0f]]; // Make glossy [btn makeGlossy];
I tuoi pulsanti dovrebbero ora avere una finitura lucida e il risultato finale dovrebbe essere simile a questo:
Questo tutorial ha dimostrato diverse tecniche per la creazione di personalizzati UIButton gli oggetti brillano. Scarica il progetto allegato per dare uno sguardo al codice sorgente completo e finale.
Domande? Commenti? Suoni di sotto o inviami direttamente @markhammonds.
Accentsconagua