Créer un onglet personnalisé avec SwiftUI 2.0

API ajoutée dans Swift UI 2.0

Je voulais utiliser le PageTabViewStyle ajouté dans SwiftUI 2.0, j'ai donc créé quelque chose comme un onglet personnalisé.

• TabView
• PageTabViewStyle

Formulaire rempli pour le moment

J'aimerais faire quelque chose comme ça. GitHub est là. https://github.com/hoshi005/custom-tab

Environnement de développement

• Xcode 12.1
• iOS 14.1

Préparation préalable

• J'utilise SDWebImageSwiftUI parce que je voulais utiliser des gifs animés.
• Piyokoyarou utilise un fichier gif animé.
• https://hiyokoyarou.com/nyoronyoro-gif/
• https://hiyokoyarou.com/cat-to-hiyoko-aruku/
• https://hiyokoyarou.com/odoru-penguin/
• https://hiyokoyarou.com/tobu-penguin/

Créer un onglet

Puisque le fichier gif d'animation a été nommé et placé comme ceci, enum est défini en faisant correspondre les noms.

enum TabItem: String, CaseIterable {
    case piyo
    case pen
    case neko
    case tobipen
    
    var name: String {
        "\(self.rawValue).gif"
    }
}

J'ai ajouté un TabItemView pour représenter chaque onglet et je l'ai défini comme suit.

struct TabItemView: View {
    
    let tabItem: TabItem
    @Binding var selected: TabItem
    
    var body: some View {
        //Importation SDWebImageSwiftUI requise.
        AnimatedImage(name: tabItem.name)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 40)
            .onTapGesture {
                selected = tabItem //Appuyez pour vous sélectionner.
            }
    }
}

Dans le ContentView principal, la vue de l'onglet est définie comme suit.

struct ContentView: View {
    
    //Sélection d'onglets et valeurs initiales.
    @State private var selected: TabItem = .piyo
    
    var body: some View {
        
        //Partie vue onglet.
        HStack {
            ForEach(TabItem.allCases, id: \.self) { tabItem in
                TabItemView(tabItem: tabItem, selected: $selected)
            }
        }
        .padding(.vertical, 10.0)
        .padding(.horizontal, 20.0)
        .background(Color.white.clipShape(Capsule()))
        .shadow(color: Color.black.opacity(0.3), radius: 5, x: -5, y: 5)
    }
}

Voici le produit fini. À ce rythme, vous ne comprenez pas vraiment l'état de la sélection.

Ajustez l'apparence de sorte que vous puissiez voir l'état sélectionné

Réécrivez TabItemView comme suit pour changer l'apparence lorsqu'il est sélectionné / non sélectionné.

• Ajuster le cadre
• Ajuster le rembourrage
• Ajuster le décalage --Ajouter une animation au processus de taraudage

var body: some View {
   AnimatedImage(name: tabItem.name)
       .resizable()
       .aspectRatio(contentMode: .fit)
       //Ajustez la taille et l'espacement en fonction de l'état de la sélection.
       .frame(width: tabItem == selected ? 100 : 40)
       .padding(.vertical, tabItem == selected ? -30 : 0)
       .padding(.horizontal, tabItem == selected ? -14 : 16)
       .offset(y: tabItem == selected ? -15 : 0)
       .onTapGesture {
           withAnimation(.spring()) {
               selected = tabItem //Appuyez pour vous sélectionner.
           }
       }
}

Ça ressemble à ça. Vous pouvez maintenant voir l'état de la sélection en un coup d'œil.

Réglage de la couleur d'arrière-plan et ajustement du placement des onglets

Ajustez l'apparence de «ContentView».

• Entourez le tout avec ZStack --Place Color (" bg "). IgnoresSafeArea () sur le dos pour en faire la couleur d'arrière-plan --Placez la partie vue onglet en bas de l'écran en utilisant VStack et Spacer

var body: some View {
    
    ZStack {
        
        //Couleur de l'arrière plan.
        Color("bg").ignoresSafeArea()
        
        VStack {
            
            Spacer(minLength: 0)
            
            //Partie vue onglet.
            HStack {
                ForEach(TabItem.allCases, id: \.self) { tabItem in
                    TabItemView(tabItem: tabItem, selected: $selected)
                }
            }
            .padding(.vertical, 10.0)
            .padding(.horizontal, 20.0)
            .background(Color.white.clipShape(Capsule()))
            .shadow(color: Color.black.opacity(0.3), radius: 5, x: -5, y: 5)
        }
    }
}

Ça ressemble à ça. Cela devient de plus en plus comme ça.

Changer d'écran avec des onglets

Puisque nous avons préparé un onglet, nous changerons l'écran en conjonction avec cet onglet.

Tout d'abord, préparez la partie écran avec un mannequin. C'est approprié, donc je pense que vous pouvez le faire comme vous le souhaitez.

struct HomeView: View {
    var body: some View {
        Text("Home")
            .font(.largeTitle)
            .fontWeight(.heavy)
            .foregroundColor(.red)
    }
}

struct ListView: View {
    var body: some View {
        Text("List")
            .font(.largeTitle)
            .fontWeight(.heavy)
            .foregroundColor(.green)
    }
}

struct SearchView: View {
    var body: some View {
        Text("Search")
            .font(.largeTitle)
            .fontWeight(.heavy)
            .foregroundColor(.blue)
    }
}

struct SettingView: View {
    var body: some View {
        Text("Setting")
            .font(.largeTitle)
            .fontWeight(.heavy)
            .foregroundColor(.yellow)
    }
}

Enfin, définissez ces vues avec TabView pour travailler avec des onglets personnalisés.

• En spécifiant selected dans l'argument de TabView, cela fonctionne avec l'onglet personnalisé.
• En spécifiant «PageTabViewStyle», vous pouvez basculer en faisant glisser votre doigt horizontalement.

ZStack {
    
    //Couleur de l'arrière plan.
    Color("bg").ignoresSafeArea()
    
    //La partie principale de l'écran est définie par TabView.
    TabView(selection: $selected) {
        HomeView()
            .tag(TabItem.piyo)
        ListView()
            .tag(TabItem.pen)
        SearchView()
            .tag(TabItem.neko)
        SettingView()
            .tag(TabItem.tobipen)
    }
    //Utiliser le style PageTab(L'indicateur est masqué).
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    
    VStack {
        //réduction.
    }
}

Sommaire

J'ai l'impression que la définition des onglets est assez simple, mais je suis content qu'il soit encore plus facile de créer une "UI pour changer". Il semble que la même chose puisse être faite avec la vue de commutation créée par cet article. Veuillez l'essayer si vous le souhaitez.