Controlli personalizzati in Xamarin Designer per iOS

Xamarin Designer per iOS supporta il rendering di controlli personalizzati creati nel progetto o a cui si fa riferimento da origini esterne come l'archivio componenti Xamarin.

Avviso

IOS Designer è stato deprecato in Visual Studio 2019 versione 16.8 e Visual Studio 2019 per Mac versione 8.8 e rimosso in Visual Studio 2019 versione 16.9 e Visual Studio per Mac versione 8.9. Il modo consigliato per creare interfacce utente iOS è direttamente in un Mac che esegue Xcode. Per altre informazioni, vedere Progettazione di interfacce utente con Xcode.

Xamarin Designer per iOS è uno strumento potente per la visualizzazione dell'interfaccia utente di un'applicazione e fornisce supporto per la modifica WYSIWYG per la maggior parte delle visualizzazioni e dei controller di visualizzazione iOS. L'app può anche contenere controlli personalizzati che estendono quelli incorporati in iOS. Se questi controlli personalizzati vengono scritti tenendo presenti alcune linee guida, è anche possibile eseguire il rendering da iOS Designer, offrendo un'esperienza di modifica ancora più completa. Questo documento esamina queste linee guida.

Requisiti

Verrà eseguito il rendering di un controllo che soddisfa tutti i requisiti seguenti nell'area di progettazione:

1. Si tratta di una sottoclasse diretta o indiretta di UIView o UIViewController. Altre sottoclassi NSObject verranno visualizzate come icona nell'area di progettazione.
2. Ha un RegisterAttribute per esporlo a Objective-C.
3. Ha il costruttore IntPtr richiesto.
4. Implementa l'interfaccia IComponent o ha un Oggetto DesignTimeVisibleAttribute impostato su True.

I controlli definiti nel codice che soddisfano i requisiti precedenti verranno visualizzati nella finestra di progettazione quando il progetto contenitore viene compilato per il simulatore. Per impostazione predefinita, tutti i controlli personalizzati verranno visualizzati nella sezione Componenti personalizzati della casella degli strumenti. Tuttavia, CategoryAttribute può essere applicato alla classe del controllo personalizzato per specificare una sezione diversa.

La finestra di progettazione non supporta il caricamento di librerie di terze parti Objective-C .

Proprietà personalizzate

Una proprietà dichiarata da un controllo personalizzato verrà visualizzata nel pannello delle proprietà se vengono soddisfatte le condizioni seguenti:

1. La proprietà ha un getter pubblico e un setter.
2. La proprietà dispone di exportAttribute e di BrowsableAttribute impostata su True.
3. Il tipo di proprietà è un tipo numerico, un tipo di enumerazione, string, bool, SizeF, UIColor o UIImage. Questo elenco di tipi supportati può essere espanso in futuro.

La proprietà può anche essere decorata con displayNameAttribute per specificare l'etichetta visualizzata nel pannello delle proprietà.

Inizializzazione

Per UIViewController le sottoclassi, è consigliabile usare il metodo ViewDidLoad per il codice che dipende dalle visualizzazioni create nella finestra di progettazione.

Per UIView e altre NSObject sottoclassi, il metodo AwakeFromNib è la posizione consigliata per eseguire l'inizializzazione del controllo personalizzato dopo il caricamento dal file di layout. Ciò avviene perché tutte le proprietà personalizzate impostate nel pannello delle proprietà non verranno impostate quando viene eseguito il costruttore del controllo, ma verranno impostate prima AwakeFromNib della chiamata:

[Register ("CustomView"), DesignTimeVisible (true)]
public class CustomView : UIView {

    public CustomView (IntPtr handle) : base (handle) { }

    public override void AwakeFromNib ()
    {
        // Initialize the view here.
    }
}

Se il controllo è progettato anche per essere creato direttamente dal codice, è possibile creare un metodo con codice di inizializzazione comune, come illustrato di seguito:

[Register ("CustomView"), DesignTimeVisible (true)]
public class CustomView : UIView {

    public CustomView (IntPtr handle) : base (handle) { }

    public CustomView ()
    {
        // Called when created from code.
        Initialize ();
    }

    public override void AwakeFromNib ()
    {
        // Called when loaded from xib or storyboard.
        Initialize ();
    }

    void Initialize ()
    {
        // Common initialization code here.
    }
}

Inizializzazione delle proprietà e AwakeFromNib

Prestare attenzione quando e dove inizializzare le proprietà progettabili in un componente personalizzato in modo da non sovrascrivere i valori impostati all'interno di iOS Designer. Ad esempio, prendere il codice seguente:

[Register ("CustomView"), DesignTimeVisible (true)]
public class CustomView : UIView {

    [Export ("Counter"), Browsable (true)]
    public int Counter {get; set;}

    public CustomView (IntPtr handle) : base (handle) { }

    public CustomView ()
    {
        // Called when created from code.
        Initialize ();
    }

    public override void AwakeFromNib ()
    {
        // Called when loaded from xib or storyboard.
        Initialize ();
    }

    void Initialize ()
    {
        // Common initialization code here.
        Counter = 0;
    }
}

Il CustomView componente espone una Counter proprietà che può essere impostata dallo sviluppatore all'interno di iOS Designer. Tuttavia, indipendentemente dal valore impostato all'interno della finestra di progettazione, il valore della Counter proprietà sarà sempre zero (0). Ecco perché:

• Un'istanza CustomControl di viene gonfiata dal file Storyboard.
• Tutte le proprietà modificate nella finestra di progettazione iOS vengono impostate (ad esempio impostando il valore di Counter su due (2), ad esempio.
• Il AwakeFromNib metodo viene eseguito e viene effettuata una chiamata al metodo del Initialize componente.
• All'interno Initialize del valore della Counter proprietà viene reimpostato su zero (0).

Per risolvere la situazione precedente, inizializzare la Counter proprietà altrove (ad esempio nel costruttore del componente) o non eseguire l'override del AwakeFromNib metodo e chiamare Initialize se il componente non richiede ulteriori inizializzazione al di fuori di ciò che è attualmente gestito dai costruttori.

Modalità progettazione

Nell'area di progettazione un controllo personalizzato deve rispettare alcune restrizioni:

• Le risorse bundle dell'app non sono disponibili in modalità progettazione. Le immagini sono disponibili quando vengono caricate tramite i metodi UIImage.
• Le operazioni asincrone, ad esempio le richieste Web, non devono essere eseguite in modalità progettazione. L'area di progettazione non supporta l'animazione o altri aggiornamenti asincroni dell'interfaccia utente del controllo.

Un controllo personalizzato può implementare IComponent e utilizzare la proprietà DesignMode per verificare se si trova nell'area di progettazione. In questo esempio, l'etichetta visualizzerà "Modalità progettazione" nell'area di progettazione e "Runtime" in fase di esecuzione:

[Register ("DesignerAwareLabel")]
public class DesignerAwareLabel : UILabel, IComponent {

    #region IComponent implementation

    public ISite Site { get; set; }
    public event EventHandler Disposed;

    #endregion

    public DesignerAwareLabel (IntPtr handle) : base (handle) { }

    public override void AwakeFromNib ()
    {
        if (Site != null && Site.DesignMode)
            Text = "Design Mode";
        else
            Text = "Runtime";
    }
}

È consigliabile controllare sempre la Site proprietà per null prima di tentare di accedere a uno dei relativi membri. Se Site è null, è possibile presupporre che il controllo non sia in esecuzione nella finestra di progettazione. In modalità progettazione, Site verrà impostato dopo l'esecuzione del costruttore del controllo e prima AwakeFromNib della chiamata.

Debug

Un controllo che soddisfa i requisiti precedenti verrà visualizzato nella casella degli strumenti e sottoposto a rendering sulla superficie. Se non viene eseguito il rendering di un controllo, verificare la presenza di bug nel controllo o in una delle relative dipendenze.

L'area di progettazione può spesso intercettare le eccezioni generate da singoli controlli continuando a eseguire il rendering di altri controlli. Il controllo difettoso viene sostituito con un segnaposto rosso ed è possibile visualizzare la traccia delle eccezioni facendo clic sull'icona esclamativo:

Se i simboli di debug sono disponibili per il controllo, la traccia avrà nomi di file e numeri di riga. Facendo doppio clic su una riga nell'analisi dello stack, si passerà a tale riga nel codice sorgente.

Se la finestra di progettazione non è in grado di isolare il controllo difettoso, nella parte superiore dell'area di progettazione verrà visualizzato un messaggio di avviso:

Il rendering completo riprenderà quando il controllo difettoso è fisso o rimosso dall'area di progettazione.

Riepilogo

Questo articolo ha introdotto la creazione e l'applicazione di controlli personalizzati nella finestra di progettazione iOS. In primo luogo sono stati descritti i requisiti che i controlli devono soddisfare per essere sottoposti a rendering nell'area di progettazione ed esporre proprietà personalizzate nel pannello delle proprietà. Viene quindi esaminato il code-behind, inizializzazione del controllo e della proprietà DesignMode. Infine, descrive cosa accade quando vengono generate eccezioni e come risolverle.