Área segura do Xcode 9

Ao explorar a Área segura encontrada Beta do Xcode9 nos construtores de interface, visualize o visualizador de hierarquia. Fiquei curioso e tentei conhecer a documentação do Safe Area on Apples, em essência o documento diz "A área de visualização que interage diretamente com o layout Automático". Mas não me satisfez, quero saber o uso prático dessa novidade.

Alguém tem alguma pista?

Parágrafo de conclusão do documento da Apple para a área segura.

A classe UILayoutGuide foi projetada para executar todas as tarefas anteriormente executadas pelas visualizações fictícias, mas para fazê-lo de maneira mais segura e eficiente. As guias de layout não definem uma nova exibição. Eles não participam da hierarquia de visualizações. Em vez disso, eles simplesmente definem uma região retangular no sistema de coordenadas da visualização proprietária que pode interagir com o Layout automático.

Área segura é um guia de layout ( Guia de layout de área segura ) .
O guia de layout que representa a parte da sua exibição que não é ocultada por barras e outros conteúdos. No iOS 11+, a Apple descontinuou as guias de layout superior e inferior e as substituiu por um único guia de layout de área segura.

Quando a visualização é visível na tela, este guia reflete a parte da visualização que não é coberta por outro conteúdo. A área segura de uma exibição reflete a área coberta por barras de navegação, barras de guias, barras de ferramentas e outros ancestrais que obscurecem a exibição de um controlador de exibição. (No tvOS, a área segura incorpora o painel da tela, conforme definido pela overscanCompensationInsetspropriedade do UIScreen.) Ele também cobre qualquer espaço adicional definido pela additionalSafeAreaInsetspropriedade do controlador de exibição . Se a vista não estiver instalada no momento em uma hierarquia de vistas ou ainda não estiver visível na tela, o guia de layout sempre corresponderá às bordas da vista.

Para a visualização raiz do controlador de exibição, a área segura nesta propriedade representa toda a parte do conteúdo do controlador de exibição que está obscurecida e quaisquer inserções adicionais que você especificou. Para outras visualizações na hierarquia de visualizações, a área segura reflete apenas a parte dessa visualização que está obscurecida. Por exemplo, se uma visualização estiver totalmente dentro da área segura da visualização raiz do controlador de visualização, as inserções de borda nessa propriedade serão 0.

De acordo com a Apple, o Xcode 9 - Nota da versão O
Interface Builder usa o UIView.safeAreaLayoutGuide como um substituto para os guias de layout superior e inferior obsoletos no UIViewController. Para usar a nova área segura, selecione Guias de layout da área segura no inspetor de arquivos do controlador de exibição e adicione restrições entre o conteúdo e as novas âncoras da área segura. Isso evita que seu conteúdo seja obscurecido pelas barras superior e inferior e pela região de overscan no tvOS. As restrições à área segura são convertidas em Superior e Inferior ao implantar em versões anteriores do iOS.

Aqui está uma referência simples como uma comparação (para gerar um efeito visual semelhante) entre o Guia de Layout existente (Superior e Inferior) e o Guia de Layout de Área Segura.

Layout da área segura:

AutoLayout

Como trabalhar com o Layout de área segura?

Siga estas etapas para encontrar a solução:

• Ative 'Layout da área segura', se não estiver ativado.
• Remova 'todas as restrições' se elas mostrarem conexão com o Super view e reconecte tudo com uma âncora de layout segura. OU Clique duas vezes em uma restrição e edite a conexão da super visão para a âncora SafeArea

Aqui está um exemplo de instantâneo, como habilitar o layout de área segura e editar restrições.

Aqui está o resultado das alterações acima

Projeto de layout com SafeArea
Ao projetar para o iPhone X, você deve garantir que os layouts preencham a tela e não sejam ocultados pelos cantos arredondados do dispositivo, pela caixa do sensor ou pelo indicador de acesso à tela inicial.

A maioria dos aplicativos que usam elementos padrão da interface do usuário fornecidos pelo sistema, como barras de navegação, tabelas e coleções, se adaptam automaticamente ao novo fator de forma do dispositivo. Os materiais de fundo se estendem até as bordas da tela e os elementos da interface do usuário são inseridos e posicionados adequadamente.

Para aplicativos com layouts personalizados, o suporte ao iPhone X também deve ser relativamente fácil, especialmente se o aplicativo usar o Layout automático e seguir os guias de layout de área e margem seguros.

Aqui está o código de exemplo (Ref: Guia de layout de área segura ) :
Se você criar suas restrições no código, use a propriedade safeAreaLayoutGuide do UIView para obter as âncoras de layout relevantes. Vamos recriar o exemplo acima do Interface Builder no código para ver como fica:

Supondo que temos a visão verde como uma propriedade em nosso controlador de exibição:

private let greenView = UIView()

Podemos ter uma função para configurar as visualizações e restrições chamadas de viewDidLoad:

private func setupView() {
  greenView.translatesAutoresizingMaskIntoConstraints = false
  greenView.backgroundColor = .green
  view.addSubview(greenView)
}

Crie as restrições de margem inicial e final, como sempre, usando o layoutMarginsGuide da visualização raiz:

 let margins = view.layoutMarginsGuide
    NSLayoutConstraint.activate([
      greenView.leadingAnchor.constraint(equalTo: margins.leadingAnchor),
      greenView.trailingAnchor.constraint(equalTo: margins.trailingAnchor)
 ])

Agora, a menos que você esteja direcionando apenas para o iOS 11, será necessário agrupar as restrições do guia de layout de área segura com #available e voltar aos guias de layout superior e inferior das versões anteriores do iOS:

if #available(iOS 11, *) {
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
   greenView.topAnchor.constraintEqualToSystemSpacingBelow(guide.topAnchor, multiplier: 1.0),
   guide.bottomAnchor.constraintEqualToSystemSpacingBelow(greenView.bottomAnchor, multiplier: 1.0)
   ])

} else {
   let standardSpacing: CGFloat = 8.0
   NSLayoutConstraint.activate([
   greenView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: standardSpacing),
   bottomLayoutGuide.topAnchor.constraint(equalTo: greenView.bottomAnchor, constant: standardSpacing)
   ])
}

Resultado:

Após a UIViewextensão, facilite o trabalho com o SafeAreaLayout programaticamente.

extension UIView {

  // Top Anchor
  var safeAreaTopAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.topAnchor
    } else {
      return self.topAnchor
    }
  }

  // Bottom Anchor
  var safeAreaBottomAnchor: NSLayoutYAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.bottomAnchor
    } else {
      return self.bottomAnchor
    }
  }

  // Left Anchor
  var safeAreaLeftAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.leftAnchor
    } else {
      return self.leftAnchor
    }
  }

  // Right Anchor
  var safeAreaRightAnchor: NSLayoutXAxisAnchor {
    if #available(iOS 11.0, *) {
      return self.safeAreaLayoutGuide.rightAnchor
    } else {
      return self.rightAnchor
    }
  }

}

Aqui está o código de exemplo no Objective-C :

• Como adicionar uma área segura programaticamente

Aqui está a documentação oficial do desenvolvedor da Apple para o Guia de layout de área segura

A Área segura é necessária para lidar com o design da interface do usuário do iPhone-X. Aqui está a diretriz básica de Como criar uma interface de usuário para iPhone-X usando o Layout de área segura

Quero mencionar algo que me chamou a atenção quando estava tentando adaptar um aplicativo baseado em SpriteKit para evitar as arestas arredondadas e o "entalhe" do novo iPhone X, conforme sugerido pelas mais recentes Diretrizes de Interface Humana : A nova propriedade safeAreaLayoutGuidedas UIViewnecessidades de ser consultado após a visualização ter sido adicionada à hierarquia (por exemplo, ativada -viewDidAppear:) para relatar um quadro de layout significativo (caso contrário, ele retornará apenas o tamanho da tela inteira).

Na documentação da propriedade:

O guia de layout que representa a parte da sua exibição que não é ocultada por barras e outros conteúdos. Quando a vista é visível na tela , este guia reflete a parte da vista que não é coberta por barras de navegação, barras de guias, barras de ferramentas e outras vistas ancestrais. (No tvOS, a área segura reflete a área não coberta pelo painel da tela.) Se a visualização não estiver atualmente instalada em uma hierarquia de visualizações ou ainda não estiver visível na tela, as bordas da guia de layout serão iguais às bordas da visualização .

(ênfase minha)

Se você o ler o mais cedo possível -viewDidLoad:, layoutFrameo guia será em {{0, 0}, {375, 812}}vez do esperado{{0, 44}, {375, 734}}

• Anteriormente, no iOS 7.0–11.0, < Deprecated > UIKitusa o topLayoutGuide e o bottomLayoutGuide, que é UIViewpropriedade

• O iOS11 + usa safeAreaLayoutGuide, que também é UIViewpropriedade

• Ative o Guia de layout de área segura do inspetor de arquivos.

• As áreas seguras ajudam a colocar suas visualizações na parte visível da interface geral.

• No tvOS , a área segura também inclui as inserções overscan da tela, que representam a área coberta pelo painel da tela.

• safeAreaLayoutGuide reflete a parte da visualização que não é coberta por barras de navegação, barras de guias, barras de ferramentas e outras visualizações ancestrais.

• Use áreas seguras como auxílio para exibir seu conteúdo como UIButton etc.

• Ao projetar para o iPhone X, você deve garantir que os layouts preencham a tela e não sejam obscurecidos pelos cantos arredondados do dispositivo, pela caixa do sensor ou pelo indicador para acessar a tela inicial.

• Verifique se os fundos se estendem até as bordas da tela e se os layouts roláveis ​​verticalmente, como tabelas e coleções, continuam até o final.

• A barra de status é mais alta no iPhone X do que em outros iPhones. Se o seu aplicativo assumir uma altura fixa da barra de status para posicionar o conteúdo abaixo da barra de status, você deverá atualizar o aplicativo para posicionar dinamicamente o conteúdo com base no dispositivo do usuário. Observe que a barra de status no iPhone X não muda de altura quando tarefas em segundo plano, como gravação de voz e rastreamento de local, estão ativas print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

• A altura do recipiente indicador doméstico é de 34 pontos.

• Depois de ativar o Guia de layout de área segura, você pode ver a propriedade de restrições de área segura listada no construtor de interface.

Você pode definir restrições com respectiva de self.view.safeAreaLayoutGuideas-

ObjC:

  self.demoView.translatesAutoresizingMaskIntoConstraints = NO;
    UILayoutGuide * guide = self.view.safeAreaLayoutGuide;
    [self.demoView.leadingAnchor constraintEqualToAnchor:guide.leadingAnchor].active = YES;
    [self.demoView.trailingAnchor constraintEqualToAnchor:guide.trailingAnchor].active = YES;
    [self.demoView.topAnchor constraintEqualToAnchor:guide.topAnchor].active = YES;
    [self.demoView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor].active = YES;

Rápido:

   demoView.translatesAutoresizingMaskIntoConstraints = false
        if #available(iOS 11.0, *) {
            let guide = self.view.safeAreaLayoutGuide
            demoView.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
            demoView.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
            demoView.bottomAnchor.constraint(equalTo: guide.bottomAnchor).isActive = true
            demoView.topAnchor.constraint(equalTo: guide.topAnchor).isActive = true
        } else {
            NSLayoutConstraint(item: demoView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .trailing, relatedBy: .equal, toItem: view, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: demoView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        }

A Apple apresentou o topLayoutGuide e o bottomLayoutGuide como propriedades do UIViewController no iOS 7. Eles permitiram criar restrições para impedir que seu conteúdo fosse oculto pelas barras do UIKit, como status, navegação ou barra de guias. Esses guias de layout foram descontinuados no iOS 11 e substituídos por um único guia de layout de área segura.

Consulte o link para mais informações.

O Guia de layout de área segura ajuda a evitar a sobreposição de elementos da interface do sistema ao posicionar conteúdo e controles.

A Área segura é a área entre os elementos da interface do sistema que são Barra de status, Barra de navegação e Barra de ferramentas ou Barra de guias. Portanto, quando você adiciona uma barra de status ao seu aplicativo, a Área segura diminui. Quando você adiciona uma barra de navegação ao seu aplicativo, a área segura diminui novamente.

No iPhone X, a Área segura fornece inserção adicional das bordas superior e inferior da tela em retrato, mesmo quando nenhuma barra é exibida. Na paisagem, a Área segura é inserida pelas laterais das telas e pelo indicador de casa.

Isso é retirado do vídeo da Apple Designing for iPhone X, onde eles também visualizam como diferentes elementos afetam a Área Segura.