Xcode
Creazione di controlli personalizzati in Interface Builder con @IBDesignable
Ricerca…
Osservazioni
È diventato molto più facile creare controlli personalizzati in Interface Builder con l'introduzione delle direttive @IBDesignable
e @IBInspectable
in Swift. Gli sviluppatori possono ora creare controlli completi, complessi e animati utilizzando solo poche righe di codice aggiuntive. Sono sorpreso dal fatto che molti sviluppatori debbano ancora abbracciare completamente questa funzione e spesso scopro che aggiungere poche righe di codice alle classi esistenti può renderle molto più facili da utilizzare.
Nota che queste funzionalità sono disponibili anche in Objective-C e sono un ottimo modo per dare vita alle vecchie classi. Gli equivalenti sintattici in Objective-C sono IB_DESIGNABLE e IBInspectable, ma per ora mi concentrerò sugli esempi in Swift.
Una vista arrotondata resa dal vivo
Questo è un requisito molto comune nello sviluppo di iOS, ed era sempre qualcosa che doveva essere fatto esclusivamente nel codice (o usando le immagini - schifo!). Ora è incredibilmente facile vedere il suo genere di cose in Interface Builder, non ci sono assolutamente scuse per non usarlo.
Ecco il codice: -
import UIKit
@IBDesignable
class MyRoundedView: UIView {
@IBInspectable var radius: CGFloat = 8 {
didSet {
self.layer.cornerRadius = radius
}
}
override func awakeFromNib() {
self.layer.cornerRadius = self.radius
self.layer.masksToBounds = true
}
}
Per utilizzare questa classe, aggiungila al tuo progetto, quindi apri lo storyboard in IB e crea un normale UIView di dimensioni adeguate. Dagli un colore di sfondo in modo che tu possa vederlo, quindi vai a Identity Inspector nel pannello Utilità a destra e cambia il tipo di classe nel MyRoundedView
a discesa su MyRoundedView
.
Quando fai questo dovresti vedere una terza etichetta apparire sotto "Class" e "Module" che dice "Designables", e dovrebbe dire "Aggiornamento" per un momento prima di passare a "Up to date". Ciò significa che Xcode ha ricompilato correttamente il tuo codice per MyRoundedView
.
Ora puoi aprire l'ispettore Attributi e dovresti vedere (magari dopo una breve pausa) una nuova sezione nella parte superiore del pannello con l'intestazione "La mia vista arrotondata" e un nuovo attributo etichettato "Raggio" con il valore 8 (perché quello è il valore iniziale che abbiamo impostato nel codice). Questo è apparso @IBInspectable
degli attributi perché è stato contrassegnato come @IBInspectable
.
Ora puoi cambiarlo in un altro numero e dovresti vedere l'aggiornamento del raggio dell'angolo della vista arrotondata in tempo reale!