Partilhar via


Atualizações de design visual no iOS 11

No iOS 11, a Apple introduziu novas mudanças visuais, incluindo atualizações na barra de navegação, barra de pesquisa e visualizações de tabela. Além disso, foram feitas melhorias para permitir mais flexibilidade sobre margens e conteúdo em tela cheia. Essas alterações são abordadas neste guia.

Para obter informações específicas sobre o design para o iPhone X, assista ao vídeo Designing for iPhone X da Apple.

UIKit

As barras UIKit foram adaptadas no iOS 11 para torná-las mais acessíveis para os usuários finais.

Uma dessas mudanças é uma nova exibição de HUD que aparece quando um usuário pressiona longamente um item de barra. Para habilitar isso, defina a largeContentSizeImage propriedade e UIBarItem adicione uma imagem maior por meio de um catálogo de ativos:

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

O iOS 11 introduziu uma nova funcionalidade para facilitar a leitura dos títulos da barra de navegação. Os aplicativos podem exibir esse título maior atribuindo a PrefersLargeTitles propriedade a true:

NavigationController.NavigationBar.PrefersLargeTitles = true;

Definir títulos maiores em seu aplicativo faz com que todos os títulos das barras de navegação em seu aplicativo pareçam maiores, conforme ilustrado na captura de tela a seguir:

Título de navegação grande

Para controlar quando um título grande é exibido em uma barra de navegação, defina no LargeTitleDisplayMode item de navegação como Always, Never, ou Automatic.

Controlador de pesquisa

O iOS 11 facilitou a adição de um controlador de pesquisa diretamente à barra de navegação. Depois de criar um controlador de pesquisa, adicione-o à sua barra de navegação com a SearchController propriedade:

NavigationItem.SearchController = searchController;

Título de navegação grande com barra de pesquisa

Dependendo da funcionalidade do seu aplicativo, você pode ou não querer que a barra de pesquisa seja ocultada quando um usuário rolar por uma lista. Você pode ajustar isso usando a HidesSearchBarWhenScrolling propriedade.

Margens

A Apple criou uma nova propriedade – directionalLayoutMargins – que pode ser usada para definir o espaço entre visualizações e subvisualizações. Use directionalLayoutMargins com leading ou trailing inserções. Independentemente de o sistema ser um idioma da esquerda para a direita ou da direita para a esquerda, o espaçamento em seu aplicativo é definido adequadamente pelo iOS.

No iOS 10 e anteriores, todas as visualizações tinham um tamanho mínimo de margem ao qual se alinhavam. O iOS 11 introduziu a opção de substituir isso usando ViewRespectsSystemMinimumLayoutMargins. Por exemplo, definir essa propriedade como false permite ajustar suas inserções de borda para zero:

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

Imagem mostrando margem com inserção zero no ios 11

Conteúdo em tela cheia

O iOS 7 introduziu topLayoutGuide e bottomLayoutGuide como uma forma de restringir suas visualizações para que elas não fiquem ocultas pelas barras do UIKit e fiquem em uma área visível da tela. Eles foram preteridos no iOS 11 em favor da área segura.

A área segura é uma nova maneira de pensar sobre o espaço visível do seu aplicativo e como as restrições são adicionadas entre uma exibição e uma supervisualização. Por exemplo, considere a seguinte imagem:

Área segura vs guia de layout superior e inferior

Anteriormente, se você tivesse adicionado uma exibição e quisesse que ela ficasse visível na área verde acima, você a restringiria à parte inferior TopLayoutGuide e superior do BottomLayoutGuide. No iOS 11, você o restringiria à parte superior e inferior da Área Segura. Há um exemplo a seguir:

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

Exibição da Tabela

O UITableView teve uma série de mudanças pequenas, mas significativas, no iOS 11.

Por padrão, cabeçalhos, rodapés e células agora são dimensionados automaticamente com base em seu conteúdo. Para recusar esse comportamento de dimensionamento automático, EstimatedSectionHeaderHeightdefina , EstimatedRowHeightou EstimatedSectionFooterHeight como zero.

No entanto, em algumas circunstâncias (como ao adicionar UITableViewController ao usar Storyboards existentes no Construtor de Interfaces), talvez seja necessário habilitar manualmente as células de autodimensionamento. Para fazer isso, certifique-se de ter definido as seguintes propriedades na exibição de tabela para Células, Cabeçalhos e Rodapés, respectivamente:

// 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;

O iOS 11 expandiu a funcionalidade das ações de linha. UISwipeActionsConfiguration foi introduzido para definir um conjunto de ações que devem ocorrer quando o usuário passa o dedo em qualquer direção em uma linha em uma exibição de tabela. Esse comportamento é semelhante ao do Mail.app nativo. Para obter mais informações, consulte o guia Ações de Linha.

As exibições de tabela têm suporte para arrastar e soltar no iOS 11. Para obter mais informações, consulte o guia Arrastar e soltar .