Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

176
Visualizações
Custom Tab Bar with variable number of tabs in SwiftUI

I'm trying to replicate the tab bar in the iPad version of Safari, which looks like this:

enter image description here

(Is there a third party library which does this? I can't find one)

I'm using the code below. Which results in this:

enter image description here

I guess I need to turn the Views into arrays somehow, and have a button (on the tab, or page) to add and remove tabs. Any idea how to do this?

import SwiftUI

struct TabLabel : View {

      var text : String
      var imageName : String
      var color : Color

      var body : some View {
            VStack() {
                  Image(systemName: imageName)
                  Text(text).font(.caption)
            }.foregroundColor(color)
      }
}

struct TabButton : View {
      @Binding var currentSelection : Int
      var selectionIndex : Int
      var label : TabLabel

      var body : some View {
            Button(action: { self.currentSelection = self.selectionIndex }) { label }.opacity(selectionIndex == currentSelection ? 0.5 : 1.0)
      }
}

struct CustomTabBarView<SomeView1 : View, SomeView2 : View, SomeView3 : View> : View {


      var view1 : SomeView1
      var view2 : SomeView2
      var view3 : SomeView3

      @State var currentSelection : Int = 1
      var body : some View {

            let label1 = TabLabel(text: "First", imageName:  "1.square.fill", color: Color.red)
            let label2 = TabLabel(text: "Second", imageName:  "2.square.fill", color: Color.purple)
            let label3 = TabLabel(text: "Third", imageName:  "3.square.fill", color: Color.blue)

            let button1 = TabButton(currentSelection: $currentSelection, selectionIndex: 1, label: label1)
            let button2 = TabButton(currentSelection: $currentSelection, selectionIndex: 2, label: label2)
            let button3 = TabButton(currentSelection: $currentSelection, selectionIndex: 3, label: label3)


            return VStack() {
                
                HStack() {
                      button1
                      Spacer()
                      button2
                      Spacer()
                      button3

                }.padding(.horizontal, 48)
                      .frame(height: 48.0)
                      .background(Color(UIColor.systemGroupedBackground))
                
                  Spacer()

                  if currentSelection == 1 {
                        view1
                  }
                  else if currentSelection == 2 {
                        view2
                  }
                  else if currentSelection == 3 {
                        view3
                  }

                  Spacer()

                  
            }

      }
}



struct ContentView: View {
    @State private var showGreeting = true
    var body: some View {
        
                let view1 = VStack() {
                      Text("The First Tab").font(.headline)
                      Image(systemName: "triangle").resizable().aspectRatio(contentMode: .fit).frame(width: 100)
                }

                let view2 = Text("Another Tab").font(.headline)
                let view3 = Text("The Final Tab").font(.headline)

                return CustomTabBarView(view1: view1, view2: view2, view3: view3)
          }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
over 4 years ago · Santiago Trujillo
1 Respostas
Responde à pergunta

0

Like a lot of problems with SwiftUI, this seems overly complex because you're mixing the concept of state with how that state is drawn on screen.

Removing the visuals for a moment, what you have in terms of data is:

  • an ordered collection of pages, each with a title and image
  • a concept of which page in that collection is active

(Note that I call them 'pages' here to try and separate them from the visual representation as tabs.)

You also have some actions which will alter that data:

  • your user can choose which page should be the active one
  • they can add a new page to the collection
  • they can remove an existing page from the collection

Now, if you think of those small steps as your data model, you can build an object or objects which cleanly encapsulate that.

Then, you can go on to determine how SwiftUI represents that data and how it might include the action triggers. For example:

  • A list of horizontal tabs loops through the ordered collection of pages and renders each one
  • Each tab has a button action which, when tapped, sets that button to be the active one
  • Each tab has a close button which, when tapped, removes it from the pages collection
  • A separate button, when tapped, can add a new page to the collection

And so on. Hopefully, you can see that each view in SwiftUI would now have a specific purpose, and should be easier for you to think about.

And you might even decide on a different UI – you could list your pages vertically in a List, for example, or in a grid like the iPhone's Safari page view. But even if you did, your underlying data wouldn't change.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda