ios - constraint - xcode use safe area layout guides




Área Segura do Xcode 9 (4)

O Guia de Layout da Área Segura ajuda a evitar a sobreposição de elementos da IU do Sistema ao posicionar o conteúdo e os controles.

A Área Segura é a área entre os elementos da IU do Sistema, que são a Barra de Status, a Barra de Navegação e a Barra de Ferramentas ou a Barra de Guias. Então, quando você adiciona uma barra de status ao seu aplicativo, a área segura é reduzida. 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 no retrato, mesmo quando nenhuma barra é mostrada. Na paisagem, a Área Segura é inserida dos lados das telas e do indicador de casa.

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

Enquanto explora o Xcode9 Beta Found Safe Area em construtores de Interface View hierarchy viewer. Fiquei curioso e tentei saber sobre a área de segurança na documentação da Apple, em essência o documento diz "A área de visualização que interage diretamente com o layout Auto" Mas não me satisfez, eu quero saber Prático uso dessa coisa nova.

Alguém tem alguma pista?

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

A classe UILayoutGuide foi projetada para executar todas as tarefas executadas anteriormente por visualizações falsas, mas para fazê-las de maneira mais segura e eficiente. Guias de layout não definem uma nova exibição. Eles não participam da hierarquia de exibição. Em vez disso, eles simplesmente definem uma região retangular no sistema de coordenadas da visã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-coberta por barras e outro conteúdo. No iOS 11+, a Apple está desaprovando os guias de layout superior e inferior e substituindo-os por um único guia de layout de área segura.

Quando a visualização é visível na tela, este guia reflete a parte da exibiçã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 visão de um controlador de exibição. (No tvOS, a área segura incorpora o painel da tela, conforme definido pela propriedade overscanCompensationInsets do UIScreen.) Ele também abrange qualquer espaço adicional definido pela propriedade additionalSafeAreaInsets do controlador de exibição. Se a visualização não estiver instalada atualmente em uma hierarquia de visualização ou ainda não estiver visível na tela, o guia de layout sempre corresponderá às bordas da exibição.

Para a visualização raiz do controlador de visualização, a área segura nesta propriedade representa a parte inteira do conteúdo do controlador de visualização que está obscurecido e quaisquer inserções adicionais especificadas. Para outras visões na hierarquia da visão, a área segura reflete apenas a porção daquela visão que está obscurecida. Por exemplo, se uma exibição estiver totalmente dentro da área segura da visualização raiz do controlador de exibição, os inserts de borda nessa propriedade serão 0.

Segundo a Apple, o Xcode 9 - Release note
O Interface Builder usa o UIView.safeAreaLayoutGuide como um substituto para os guias de layout Top e Bottom descontinuados no UIViewController. Para usar a nova área segura, selecione Guias de layout de área segura no Inspetor de arquivos do controlador de visualização e adicione restrições entre seu conteúdo e as novas âncoras de área segura. Isso impede que seu conteúdo seja obscurecido pelas barras superior e inferior e pela região de overscan no tvOS. As restrições para a área segura são convertidas para Superior e Inferior ao implementar em versões anteriores do iOS.

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

Layout de Área Segura:

AutoLayout

Como trabalhar com layout de área segura?

Siga estas etapas para encontrar a solução:

  • Ativar 'Layout de Área Segura', se não estiver ativado.
  • Remova 'all constraint' se eles mostrarem conexão com o Super view e reconectar todos com âncora de layout seguro. OU Clique duas vezes em uma restrição e edite a conexão da supervisualização para a âncora SafeArea

Aqui está um instantâneo de amostra, como ativar o layout de área segura e editar a restrição.

Aqui está o resultado das mudanças acima

Design de layout com SafeArea
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 de acesso à tela inicial.

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

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 aderir a guias de layout de margem e área segura.

Aqui está um código de amostra (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:

Assumindo que temos a visualização verde como uma propriedade em nosso controlador de visualizaçã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 à esquerda e à direita 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 segmentando apenas o iOS 11, será necessário agrupar as restrições do guia de layout da á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 extensão UIView , facilite o trabalho com 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 :

Aqui está a Documentação Oficial do Desenvolvedor da Apple para o Guia de Layout da Área Segura


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


  • Anteriormente no iOS 7.0–11.0 <Depreciado> o UIKit usa o topLayoutGuide & bottomLayoutGuide que é a propriedade UIView
  • O iOS11 + usa safeAreaLayoutGuide, que também é propriedade do UIView

  • Ative a caixa de seleção Guia de Layout de Área Segura no inspetor de arquivos.

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

  • No tvOS , a área segura também inclui as inserções de sobreexplicação da tela, que representam a área coberta pela moldura da tela.

  • O safeAreaLayoutGuide reflete a parte da exibição que não é coberta pelas barras de navegação, barras de guias, barras de ferramentas e outras exibições ancestrais.
  • Use áreas seguras como uma ajuda para colocar 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 de acesso à tela inicial.

  • Certifique-se de que os fundos estendam-se até as bordas da tela e que os layouts roláveis ​​verticalmente, como tabelas e coleções, continuem até a parte inferior.

  • A barra de status é mais alta no iPhone X do que em outros iPhones. Se seu aplicativo assumir uma altura de barra de status fixa para posicionar o conteúdo abaixo da barra de status, você deverá atualizar seu 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 localização, são print(UIApplication.shared.statusBarFrame.height)//44 for iPhone X, 20 for other iPhones

  • O contêiner do indicador de altura da casa é de 34 pontos.

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

Você pode definir restrições com o respectivo self.view.safeAreaLayoutGuide como-

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
        }


Eu quero mencionar algo que me pegou primeiro quando eu estava tentando adaptar um aplicativo baseado em SpriteKit para evitar as bordas arredondadas e "entalhe" do novo iPhone X, como sugerido pelo mais recente Human Interface Guidelines : A nova propriedade safeAreaLayoutGuide de UIView precisa ser consultado após a visualização ter sido adicionada à hierarquia (por exemplo, on -viewDidAppear: para relatar um quadro de layout significativo (caso contrário, apenas retornará o tamanho de tela inteira).

Da documentação da propriedade:

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

(ênfase minha)

Se você lê-lo tão cedo quanto -viewDidLoad: layoutFrame o layoutFrame do guia será {{0, 0}, {375, 812}} vez do esperado {{0, 44}, {375, 734}}







safearealayoutguide