Panoramica dell'interfaccia utente di iOS 7

iOS 7 introduce una pletora di modifiche all'interfaccia utente. Questo articolo illustra alcune delle modifiche più grandi, sia nell'aspetto visivo dei controlli che nelle API che supportano la nuova progettazione.

iOS 7 è incentrato sul contenuto su Chrome. Gli elementi dell'interfaccia utente in iOS 7 deselezionano il riquadro rimuovendo attributi quali bordi estranei, barre di stato e barre di spostamento, riducendo così la quantità di spazio sullo schermo usato dalle visualizzazioni contenuto. In iOS 7 il contenuto è progettato per usare l'intero schermo.

iOS 7 introduce diverse altre modifiche: il colore viene usato per distinguere gli elementi dell'interfaccia utente, anziché gli attributi, ad esempio i bordi dei pulsanti. Molti elementi, ad esempio le barre di spostamento e le barre di stato, sono ora sfocati e traslucenti o trasparenti, con le visualizzazioni del contenuto che riguardano l'area sottostante. Queste visualizzazioni del contenuto vengono visualizzate attraverso le barre sfocate, trasmettendo una sensazione di profondità nell'interfaccia utente.

Questo articolo illustra diverse modifiche apportate agli elementi dell'interfaccia utente in iOS 7, nonché varie API correlate alla nuova progettazione dell'interfaccia utente.

Visualizzare e controllare le modifiche

Tutte le visualizzazioni in UIKit sono conformi al nuovo aspetto di iOS 7. Questa sezione evidenzia alcune delle modifiche apportate a queste visualizzazioni, nonché le API correlate modificate per supportare la nuova interfaccia utente.

UIButton

I pulsanti creati dalla UIButton classe sono ora senza bordi, senza sfondo per impostazione predefinita, come illustrato di seguito:

Lo UIButtonType.RoundedRect stile è stato deprecato. Se usato in iOS 7, UIButtonType.RoundedRect verrà UIButtonType.System usato, che produce lo stile predefinito del pulsante senza bordi di sfondo o visibili, come illustrato in precedenza.

UIBarButtonItem

Analogamente a UIButton, anche i pulsanti della barra sono senza bordi, per impostazione predefinita con il nuovo UIBarButtonItemStyle.Plain stile illustrato di seguito:

Inoltre, lo UIBarButtonItemStyle.Bordered stile è stato deprecato. L'impostazione UIBarButtonItemStyle.Bordered in iOS 7 comporterà l'uso dello UIBarButtonItemStyle.Plain stile.

Lo UIBarButtonItemStyle.Done stile non è stato deprecato. Tuttavia, creerà anche un pulsante senza bordi, solo con uno stile di testo in grassetto come illustrato:

UIAlertView

Oltre alla modifica dello stile per il nuovo aspetto di iOS 7, le visualizzazioni degli avvisi non supportano più la personalizzazione tramite visualizzazione secondaria. Anche se UIAlertView eredita da UIView, la chiamata AddSubview a un oggetto UIAlertView non ha alcun effetto. Si consideri il codice di esempio seguente:

UIBarButtonItem button = new UIBarButtonItem ("Bar Button", UIBarButtonItemStyle.Plain, (s,e) =>
{
    UIAlertView alert = new UIAlertView ("Title", "Message", null, "Cancel", "OK");

    alert.AddSubview (new UIView () {
        Frame = new CGRect(50, 50,100, 100),
        BackgroundColor = UIColor.Green
    });

    alert.Show ();
});

In questo modo viene generata una visualizzazione avviso standard, con la visualizzazione secondaria ignorata, come illustrato di seguito:

Nota: UIAlertView è stato deprecato in iOS 8. Visualizzare la ricetta del controller di avviso usando una visualizzazione avvisi in iOS 8 e versioni successive.

UISegmentedControl

I controlli segmentati in iOS 7 sono trasparenti e supportano il colore tinta. Il colore della tinta viene utilizzato per il testo e il colore del bordo. Quando viene selezionato un segmento, il colore viene scambiato tra lo sfondo e il testo, con il colore della tinta usato per evidenziare il segmento selezionato, come illustrato di seguito:

Inoltre, è UISegmentedControlStyle stato deprecato in iOS 7.

Visualizzazioni selezione

L'API per le visualizzazioni di selezione è in gran parte invariata; Tuttavia, le linee guida per la progettazione di iOS 7 ora le visualizzazioni selezione stato devono essere presentate inline anziché come visualizzazioni di input animate dalla parte inferiore dello schermo o tramite un nuovo controller inserito nello stack del controller di spostamento, come nelle versioni precedenti di iOS. Questo può essere visualizzato nell'app del calendario di sistema:

UISearchDisplayController

La barra di ricerca viene ora visualizzata all'interno della barra di spostamento quando la UISearchDisplayController.DisplaysSearchBarInNavigationBar proprietà è impostata su true. Se è impostata su false, ovvero l'impostazione predefinita, la barra di spostamento viene nascosta quando viene visualizzato il controller di ricerca.

Lo screenshot seguente mostra la barra di ricerca all'interno di un UISearchDisplayControlleroggetto :

UITableView

Le API intorno UITableView sono principalmente invariate. Tuttavia, lo stile è cambiato radicalmente in modo da conformarsi alla nuova progettazione dell'interfaccia utente. Anche la gerarchia di visualizzazione interna è leggermente diversa. Questa modifica non influirà sulla maggior parte delle app, ma è qualcosa di cui tenere conto.

Stile tabella raggruppata

Lo stile raggruppato è stato modificato, con il contenuto che ora si estende ai bordi dello schermo, come illustrato di seguito:

SeparatorInset

I separatori di riga possono ora essere rientrati impostando la UITableVIewCell.SeparatorInset proprietà . Ad esempio, il codice seguente verrà usato per rientro delle celle dal bordo sinistro:

cell.SeparatorInset = new UIEdgeInsets (0, 50, 0, 0);

Ciò produce nella vista tabella con celle rientrate, come illustrato di seguito:

Stili pulsante tabella

Tutti i vari pulsanti usati nelle visualizzazioni tabella sono stati modificati. Lo screenshot seguente presenta una visualizzazione tabella in modalità di modifica:

Modifiche aggiuntive al controllo

Sono stati modificati anche altri controlli UIKit, inclusi dispositivi di scorrimento, commutatori e stepper. Queste modifiche sono puramente visive. Per altre informazioni, vedere la Guida alla transizione dell'interfaccia utente di iOS 7 di Apple.

Modifiche generali dell'interfaccia utente

Oltre alle modifiche apportate a UIKit, iOS 7 introduce un'ampia gamma di modifiche visive all'interfaccia utente, tra cui:

• Contenuto a schermo intero
• Aspetto barra
• Colore tinta

Contenuto a schermo intero

iOS 7 è progettato per consentire alle applicazioni di sfruttare l'intero schermo. I controller di visualizzazione ora vengono visualizzati sovrapposti da una barra di stato e da una barra di spostamento, se presente, anziché apparire sotto le barre di stato e di spostamento.

Quando si prepara l'applicazione per iOS 7, è possibile riallineare visivamente le visualizzazioni secondarie usando Interface Builder o Xamarin iOS Designer. È anche possibile usare una delle nuove API per gestire il contenuto a schermo intero a livello di codice. Queste API sono state introdotte di seguito.

TopLayoutGuide e BottomLayoutGuide

TopLayoutGuide e BottomLayoutGuide fungono da riferimento per la posizione in cui le visualizzazioni devono iniziare o terminare, in modo che il contenuto non si sovrapponga a una barra traslucente UIKit , come nell'esempio seguente:

Queste API possono essere usate per calcolare lo spostamento di una visualizzazione dalla parte superiore o inferiore dello schermo e regolare il posizionamento del contenuto di conseguenza:

public override void ViewDidLayoutSubviews ()
{
    base.ViewDidLayoutSubviews ();

    if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) {
        nfloat displacement_y = this.TopLayoutGuide.Length;

        //load subviews with displacement
    }

}

È possibile usare il valore calcolato sopra per impostare ImageViewlo spostamento dalla parte superiore dello schermo, in modo che l'intera immagine sia visibile:

Il valore di spostamento viene generato in modo dinamico dopo l'aggiunta della vista alla gerarchia, quindi il tentativo di leggere TopLayoutGuide e BottomLayoutGuide i valori in ViewDidLoad restituirà 0. Calcolare il valore dopo il caricamento della vista, ad esempio in ViewDidLayoutSubviews.

Importante

TopLayoutGuide e BottomLayoutGuide sono deprecati in iOS 11 a favore del nuovo layout dell'area sicura. Apple ha dichiarato che l'uso dell'area sicura è compatibile con la versione di iOS precedente a iOS 11. Per altre informazioni, vedere la guida Aggiornamento dell'app per iOS 11 .

EdgeForExtendedLayout

Questa API specifica quali bordi di una visualizzazione devono essere estesi a schermo intero, indipendentemente dalla traslucidità della barra. In iOS 7 le barre di spostamento e le barre degli strumenti vengono visualizzate a livelli sopra la visualizzazione del controller, a differenza delle versioni precedenti di iOS, in cui non occupavano lo stesso spazio. L'applicazione iOS 7 Foto illustra il valore predefinitoUIViewController.EdgesForExtendedLayout, UIRectEdge.All. Questa impostazione riempie tutti e quattro i bordi della visualizzazione con il contenuto, creando l'effetto sovrapposto e a schermo intero:

Toccando l'immagine vengono rimosse le barre e viene visualizzata l'immagine a schermo intero:

Poiché il contenuto a schermo intero è l'impostazione predefinita, le applicazioni configurate per iOS 6 avranno parte della visualizzazione ritagliata, come nello screenshot seguente:

La modifica della UIViewController.EdgesForExtendedLayout proprietà viene modificata per questo comportamento. È possibile specificare che la visualizzazione non riempie alcun bordo, quindi la visualizzazione eviterà di visualizzare il contenuto nello spazio occupato dagli spostamenti o dalle barre degli strumenti (a ogni orientamento):

if (UIDevice.CurrentDevice.CheckSystemVersion (7, 0)) {
    this.EdgesForExtendedLayout = UIRectEdge.None;
}

Nell'app si noterà che la visualizzazione viene riposizionata di nuovo, in modo che l'intera immagine sia visibile:

Si noti che, mentre gli effetti delle TopLayoutGuide/BottomLayoutGuide API e EdgesForExtendedLayout sono simili, sono concepiti per soddisfare obiettivi diversi. La modifica dell'impostazione EdgesForExtendedLayout predefinita può correggere le visualizzazioni ritagliate nelle applicazioni progettate per iOS 6, ma un buon design iOS 7 deve rispettare l'estetica a schermo intero e offrire un'esperienza di visualizzazione a schermo intero, affidandosi TopLayoutGuide a e BottomLayoutGuide posizionare correttamente il contenuto che deve essere manipolato in un luogo confortevole per l'utente.

Barra di spostamento e stato

Il rendering della barra di stato e delle barre di spostamento viene eseguito con trasparenza. Le barre di stato sono trasparenti, mentre le barre degli strumenti e le barre di spostamento sono traslucenti e sfocate per trasmettere la sensazione di profondità nell'interfaccia utente. Lo screenshot seguente mostra questa sfocatura e la trasparenza, in cui il colore di sfondo blu della visualizzazione raccolta mostra attraverso le barre di stato e di spostamento, dando loro un aspetto blu chiaro:

Stili barra di stato

Oltre alla sfocatura e alla trasparenza, il primo piano di una barra di stato può essere chiaro o scuro (l'impostazione predefinita è scura). Lo stile della barra di stato può essere impostato dal controller di visualizzazione. Un controller di visualizzazione può anche impostare se la barra di stato è nascosta o visualizzata.

Ad esempio, il codice seguente esegue l'override del PreferredStatusBarStyle metodo di un controller di visualizzazione per fare in modo che la barra di stato visualizzi un primo piano chiaro:

public override UIStatusBarStyle PreferredStatusBarStyle ()
{
    return UIStatusBarStyle.LightContent;
}

In questo modo la barra di stato viene visualizzata come indicato di seguito:

Per nascondere la barra di stato dal codice del controller di visualizzazione, eseguire l'override PrefersStatusBarHiddendi , come illustrato di seguito:

public override bool PrefersStatusBarHidden ()
{
    return true;
}

In questo modo viene nascosta la barra di stato:

Colore tinta

I pulsanti vengono ora visualizzati come testo senza chrome. Il colore del testo può essere controllato usando la nuova TintColor proprietà in UIView. L'impostazione TintColor di applica il colore all'intera gerarchia di visualizzazione per la vista che la imposta. Per applicare un oggetto TintColorin un'app, impostarlo su Window. È anche possibile rilevare quando il colore della tinta cambia tramite il UIView.TintColorDidChange metodo .

Ad esempio, lo screenshot seguente mostra l'effetto della modifica del colore della tinta nella visualizzazione di un controller di spostamento in viola:

Il colore della tinta può essere applicato anche alle immagini quando RenderingMode è impostato su UIImageRenderingMode.AlwaysTemplate.

Importante

Non è possibile impostare il colore della tinta usando UIAppearance.

Tipo dinamico

In iOS 7 l'utente può specificare le dimensioni del testo nelle impostazioni di sistema. Con il tipo dinamico, il tipo di carattere viene regolato in modo dinamico per avere un aspetto ottimale indipendentemente dalle dimensioni. UIFont.PreferredFontForTextStyle deve essere usato per ottenere un tipo di carattere ottimizzato per le dimensioni controllate dall'utente.

Riepilogo

Questo articolo illustra le modifiche apportate agli elementi dell'interfaccia utente in iOS 7. Esamina diverse modifiche apportate alle visualizzazioni e ai controlli in UIKit, evidenziando sia le modifiche visive che le modifiche alle API correlate. Introduce infine nuove API per l'uso con contenuto a schermo intero, il supporto dei nuovi colori tinta e il tipo dinamico.