Á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 :
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
