Erstellen Sie mit SwiftUI 2.0 eine benutzerdefinierte Registerkartenansicht

API in Swift UI 2.0 hinzugefügt

Ich wollte den in SwiftUI 2.0 hinzugefügten "PageTabViewStyle" verwenden, also habe ich so etwas wie eine benutzerdefinierte Registerkarte erstellt.

• TabView
• PageTabViewStyle

Formular vorerst ausgefüllt

Ich würde gerne so etwas machen. GitHub ist da. https://github.com/hoshi005/custom-tab

Entwicklungsumgebung

• Xcode 12.1
• iOS 14.1

Vorbereitungen

• Ich verwende SDWebImageSwiftUI, weil ich animierte Gifs verwenden wollte.
• Piyokoyarou verwendet eine animierte GIF-Datei.
• https://hiyokoyarou.com/nyoronyoro-gif/
• https://hiyokoyarou.com/cat-to-hiyoko-aruku/
• https://hiyokoyarou.com/odoru-penguin/
• https://hiyokoyarou.com/tobu-penguin/

Erstellen eines Tab-Teils

Da die Animations-GIF-Datei so benannt und platziert wurde, wird die Aufzählung durch Abgleichen der Namen definiert.

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

Ich habe eine "TabItemView" hinzugefügt, um jede Registerkarte darzustellen, und sie wie folgt definiert.

struct TabItemView: View {
    
    let tabItem: TabItem
    @Binding var selected: TabItem
    
    var body: some View {
        //SDWebImageSwiftUI-Import erforderlich.
        AnimatedImage(name: tabItem.name)
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 40)
            .onTapGesture {
                selected = tabItem //Tippen Sie auf, um sich selbst auszuwählen.
            }
    }
}

In der Haupt-ContentView ist die Registerkartenansicht wie folgt definiert.

struct ContentView: View {
    
    //Registerkartenauswahl und Anfangswerte.
    @State private var selected: TabItem = .piyo
    
    var body: some View {
        
        //Tab-Ansichtsteil.
        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)
    }
}

Hier ist das fertige Produkt. Bei dieser Geschwindigkeit verstehen Sie den Auswahlstatus nicht wirklich.

Passen Sie das Erscheinungsbild so an, dass Sie den ausgewählten Status sehen können

Schreiben Sie "TabItemView" wie folgt um, um das Erscheinungsbild zu ändern, wenn es ausgewählt / nicht ausgewählt ist.

• Rahmen einstellen
• Passen Sie die Polsterung an
• Offset einstellen
• Fügen Sie dem Tippvorgang eine Animation hinzu

var body: some View {
   AnimatedImage(name: tabItem.name)
       .resizable()
       .aspectRatio(contentMode: .fit)
       //Passen Sie die Größe und den Abstand entsprechend dem Auswahlstatus an.
       .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 //Tippen Sie auf, um sich selbst auszuwählen.
           }
       }
}

Es sieht aus wie das. Sie sehen jetzt den Auswahlstatus auf einen Blick.

Einstellung der Hintergrundfarbe und Anpassung der Tab-Platzierung

Passen Sie das Erscheinungsbild von "ContentView" an.

• Schließen Sie das Ganze mit ZStack ein
• Platzieren Sie Color (" bg "). IgnoresSafeArea () auf der Rückseite, um die Hintergrundfarbe festzulegen
• Platzieren Sie den Tab-Ansichtsteil am unteren Bildschirmrand mit "VStack" und "Spacer"

var body: some View {
    
    ZStack {
        
        //Hintergrundfarbe.
        Color("bg").ignoresSafeArea()
        
        VStack {
            
            Spacer(minLength: 0)
            
            //Tab-Ansichtsteil.
            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)
        }
    }
}

Es sieht aus wie das. Es wird immer mehr so.

Wechseln Sie die Bildschirme mit Registerkarten

Da wir eine Registerkarte vorbereitet haben, wechseln wir den Bildschirm in Verbindung mit dieser Registerkarte.

Bereiten Sie zuerst das Bildschirmteil mit einem Dummy vor. Es ist geeignet, also denke ich, dass Sie es machen können, wie Sie möchten.

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)
    }
}

Definieren Sie diese Ansichten schließlich mit "TabView", um mit benutzerdefinierten Registerkarten zu arbeiten.

• Indem Sie im Argument von "TabView" "selected" angeben, funktioniert dies mit der benutzerdefinierten Registerkarte.
• Durch Angabe von "PageTabViewStyle" können Sie durch horizontales Wischen wechseln.

ZStack {
    
    //Hintergrundfarbe.
    Color("bg").ignoresSafeArea()
    
    //Der Hauptbildschirmteil wird von TabView definiert.
    TabView(selection: $selected) {
        HomeView()
            .tag(TabItem.piyo)
        ListView()
            .tag(TabItem.pen)
        SearchView()
            .tag(TabItem.neko)
        SettingView()
            .tag(TabItem.tobipen)
    }
    //Verwenden Sie den PageTab-Stil(Anzeige ist ausgeblendet).
    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    
    VStack {
        //Kürzung.
    }
}

Zusammenfassung

Ich habe den Eindruck, dass die Definition von Registerkarten recht einfach ist, aber ich bin froh, dass es noch einfacher ist, eine "Benutzeroberfläche zum Wechseln" zu erstellen. Es scheint, dass dasselbe mit der von [diesem Artikel] erstellten Umschaltansicht (https://qiita.com/hoshi005/items/83cafdc3270bd0e248c0) getan werden kann. Bitte versuchen Sie es, wenn Sie möchten.