[SUI] TabView (Pestañas)

#swiftui #swift #ios

Se puede organizar el contenido de la aplicación en pestañas con TabView y Tab

TabView.init(selection:content:). content es una lista de Tabs. selection es un Binding que identifica la vista visible en el momento.
TabView.init(content:)
Tab.init(value:role:content:). value es el identificador de la pestaña. role define el propósito semántico de la pestañana (incluye TabRole.search. content es la vista contenida de la pestaña.
Tab.init(_:systemImage:value:role:content:): titleKey es el texto que aparece en la pestaña. systemImage es la imagen que aparece en la pestaña.

enum TabFeature {
  case home, remove, trips, draw, settings, account
}

struct ContentView: View {

  @State private var selectedTab = TabFeature.draw
  @State private var newTrips = 2

  var body: some View {
    TabView(selection: $selectedTab) {
      Tab("Home", systemImage: "book.circle", value: TabFeature.home) {
        Text("Home content")
      }
      Tab("Remove", systemImage: "trash", value: TabFeature.remove) {
        Text("Remove content")
      }
      Tab("Trips", systemImage: "airplane", value: TabFeature.trips) {
        Text("Trips content")
          .onAppear {
            newTrips = 0
          }
      }.badge(newTrips)
      Tab("Draw", systemImage: "pencil", value: TabFeature.draw) {
        Text("Draw content")
          .onAppear {
            newTrips += 1
          }
      }
      Tab("Settings", systemImage: "gear", value: TabFeature.settings) {
        Text("Settings content")
      }
      Tab("Account", systemImage: "person", value: TabFeature.account) {
        Text("Accounts content")
      }
    }
  }
}

Definiendo las pestañas

Se puede definir las pestañas creando un contenedor de tipo TabView y luego envolver cada pantalla a presentar con Tab.

Si no se necesita controlar de forma programática las pestañas, ni definir una inicial específica, entonces se puede ignorar el argumento selection. En caso contrario, hay que crear un Binding y conectarlo a selection.
Si no se necesita identificar las pestañas, se puede omitir value. De lo contrario se lo debe definir con un valor Hashable.

struct ContentView: View {

  @State private var selectedTab = TabFeature.draw

  var body: some View {
    TabView(selection: $selectedTab) {
      Tab("Home", systemImage: "book.circle", value: TabFeature.home) {
        Text("Home content")
      }
      // ...
      Tab("Draw", systemImage: "pencil", value: TabFeature.draw) {
        Text("Draw content")
      }
      // ...
    }
  }
}

Control de cantidad de pestañas

Puedo agregar tantas pestañas como sean necesarias. Si se agrega más de las que pueden caber cómodamente en la barra de pestañas, entonces el sistema agrupa las excedentes bajo una pestaña "more" (o "más", en español).

Al seleccionar la pestaña "more", se abre una nueva vista con una lista de las pestañas que faltan:

Si selecciono uno de los elementos de la lista, se abre la pestaña que le correspondía originalmente, aunque en la barra de pestañas sigue apareciendo bajo el dominio "more":

Notificaciones en pestañas

Puedo utilizar TabContent.badge(_:) para pintar una medalla con un número adentro, encima del ícono de la pestaña. Esta medalla puede ser dinámica y para ello debo usar un Binding.

enum TabFeature {
  case home, remove, trips, draw, settings, account
}

struct ContentView: View {
  @State private var newTrips = 2

  var body: some View {
    TabView(selection: $selectedTab) {
      // ...
      Tab("Trips", systemImage: "airplane", value: TabFeature.trips) {
        Text("Trips content")
          .onAppear {
            newTrips = 0
          }
      }.badge(newTrips)
      Tab("Draw", systemImage: "pencil", value: TabFeature.draw) {
        Text("Draw content")
          .onAppear {
            newTrips += 1
          }
      }
      // ...
    }
  }
}