SwiftUI #19: Área segura (Safe Area)

iOS define una guía de layout llamada "Safe Area", que es el área de la ventana, por debajo del "notch" o "isla dinámica" (dependiendo del dispositivo). La barra en la parte superior de la pantalla, es el espacio ocupado por el "toolbar" del sistema.

Para ignorar el área segunda, se puede usar el modificador ignoresSafeArea(_:edges:).

Las regiones de área segura (SafeAreaRegions) son:

• all
• container: Espacio disponible en la ventana después del espacio de las barras de navegación y toolbar.
• keyboard: El espacio que queda después de que el teclado es visible.

Los extremos que se pueden ignorar es un conjunto de tipo Edge.Set que puede ser all, bottom, leading, top y trailing.

struct ContentView: View {
  var body: some View {
    VStack(alignment: .center) {
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Text("Medellin")
        .font(.body.bold())
      Spacer()
    }
    .ignoresSafeArea(.all)
  }
}

El ejemplo anterior pintaría la vista por debajo del teclado. Si se quiere ignorar los bordes del contenedor pero sin ignorar el espacio del teclado, se puede usar container.

struct ContentView: View {
  var body: some View {
    VStack(alignment: .center) {
      Spacer()
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Text("Medellin")
        .font(.body.bold())
    }
    .ignoresSafeArea(.all, edges: .bottom)
  }
}

En el ejemplo anterior, si se abriera el teclado, la vista se desplazaría arriba de él.

Cambiar el tamaño del área segura

Es posible meter una vista dentro del área segunda por medio del modificador safeAreaInset. Esto se usa para garantizar que alguna vista en un extremo de la pantalla sea siempre visible.

• safeAreaInset(edge:alignment:spacing:content:)

struct ContentView: View {
  var body: some View {
    VStack(alignment: .center) {
      Spacer()
      Image(systemName: "pencil")
        .font(.system(size: 80))
      Text("Medellin")
        .font(.body.bold())
    }
    .safeAreaInset(edge: .bottom) {
      HStack {
        Spacer()
        Text("Importante")
          .padding()
        Spacer()
      }.background(.yellow)
    }
  }
}