Condividi tramite

Aggiornamenti della progettazione visiva in iOS 11

In iOS 11 Apple ha introdotto nuove modifiche visive, inclusi gli aggiornamenti alla barra di spostamento, alla barra di ricerca e alle visualizzazioni tabella. Sono stati apportati miglioramenti per consentire maggiore flessibilità rispetto ai margini e al contenuto a schermo intero. Queste modifiche sono illustrate in questa guida.

Per informazioni specifiche sulla progettazione per iPhone X, guardare il video design di Apple per iPhone X .

UIKit

Le barre UIKit sono state adattate in iOS 11 per renderle più accessibili per gli utenti finali.

Una di queste modifiche è una nuova visualizzazione HUD visualizzata quando un utente preme a lungo su un elemento della barra. Per abilitare questa operazione, impostare la largeContentSizeImage proprietà su UIBarItem e aggiungere un'immagine più grande tramite un catalogo di asset:

barItem.LargeContentSizeImage = UIImage.FromBundle("AccessibleImage");

iOS 11 ha introdotto nuove funzionalità per semplificare la lettura dei titoli delle barre di spostamento. Le app possono visualizzare questo titolo più grande assegnando la PrefersLargeTitles proprietà a true:

NavigationController.NavigationBar.PrefersLargeTitles = true;

L'impostazione di titoli più grandi nell'app rende più grandi tutti i titoli delle barre di spostamento nell'app, come illustrato nello screenshot seguente:

Titolo di spostamento grande

Per controllare quando viene visualizzato un titolo di grandi dimensioni su una barra di spostamento, impostare sull'elemento LargeTitleDisplayMode di spostamento su Always, Nevero Automatic.

Controller di ricerca

iOS 11 ha reso più semplice aggiungere un controller di ricerca direttamente alla barra di spostamento. Dopo aver creato un controller di ricerca, aggiungerlo alla barra di spostamento con la SearchController proprietà :

NavigationItem.SearchController = searchController;

Titolo di spostamento grande con barra di ricerca

A seconda della funzionalità dell'app, potresti o meno voler nascondere la barra di ricerca quando un utente scorre un elenco. È possibile modificarlo usando la HidesSearchBarWhenScrolling proprietà .

Margini

Apple ha creato una nuova proprietà , directionalLayoutMargins che può essere usata per impostare lo spazio tra visualizzazioni e visualizzazioni secondarie. Usare directionalLayoutMargins con leading o trailing inset. Indipendentemente dal fatto che il sistema sia una lingua da sinistra a destra o da destra a sinistra, la spaziatura nell'app viene impostata in modo appropriato da iOS.

In iOS 10 e versioni precedenti, tutte le visualizzazioni hanno una dimensione minima del margine a cui si allineano. iOS 11 ha introdotto l'opzione per eseguire l'override di che usa ViewRespectsSystemMinimumLayoutMargins. Ad esempio, l'impostazione di questa proprietà su false consente di regolare gli inset di arco su zero:

ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;

Immagine che mostra il margine con zero inset in ios 11

Contenuto a schermo intero

iOS 7 ha introdotto topLayoutGuide e bottomLayoutGuide come modo per vincolare le visualizzazioni in modo che non siano nascoste dalle barre UIKit e si trovino in un'area visibile dello schermo. Questi sono stati deprecati in iOS 11 a favore dell'area sicura.

L'area sicura è un nuovo modo di pensare allo spazio visibile dell'applicazione e al modo in cui vengono aggiunti vincoli tra una visualizzazione e una visualizzazione con privilegi avanzati. Ad esempio, si consideri l'immagine seguente:

Guida al layout superiore e inferiore rispetto all'area sicura

In precedenza, se è stata aggiunta una visualizzazione e si voleva che fosse visibile nell'area verde precedente, è necessario vincolare l'oggetto alla parte inferiore di TopLayoutGuide e alla parte superiore di BottomLayoutGuide. In iOS 11 è invece necessario vincolare l'area all'inizio e alla parte inferiore dell'area sicura. Di seguito è riportato un esempio:

var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;

Visualizzazione tabella

UITableView ha avuto una serie di piccole modifiche, ma significative, in iOS 11.

Per impostazione predefinita, le intestazioni, i piè di pagina e le celle vengono ridimensionate automaticamente in base al contenuto. Per rifiutare esplicitamente questo comportamento di ridimensionamento automatico, impostare EstimatedRowHeight, EstimatedSectionHeaderHeighto EstimatedSectionFooterHeight su zero.

In alcune circostanze, ad esempio quando si aggiunge UITableViewController quando si usano storyboard esistenti in Interface Builder, potrebbe essere necessario abilitare manualmente le celle di ridimensionamento automatico. A tale scopo, assicurarsi di avere impostato le proprietà seguenti nella visualizzazione tabella rispettivamente per Celle, Intestazioni e Piè di pagina:

// Cells
TableView.RowHeight = UITableView.AutomaticDimension;
TableView.EstimatedRowHeight = UITableView.AutomaticDimension;

// Header
TableView.SectionHeaderHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionHeaderHeight = 40f;

//Footer
TableView.SectionFooterHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionFooterHeight = 40f;

iOS 11 ha ampliato le funzionalità delle azioni di riga. UISwipeActionsConfiguration è stato introdotto per definire un set di azioni che devono essere eseguite quando l'utente scorre rapidamente in entrambe le direzioni di una riga in una vista tabella. Questo comportamento è simile a quello del Mail.app nativo. Per altre informazioni, vedere la guida azioni di riga.

Le visualizzazioni tabella supportano il trascinamento della selezione in iOS 11. Per altre informazioni, vedere la guida Al trascinamento della selezione .