New functionality: Swipe between pages

Package.swift

@@ -1,26 +1,26 @@
-// swift-tools-version:5.1
+// swift-tools-version:5.3
 // The swift-tools-version declares the minimum version of Swift required to build this package.
 
 import PackageDescription
 
 let package = Package(
     name: "SlidingTabView",
+    platforms: [.iOS(.v14)],
     products: [
         // Products define the executables and libraries produced by a package, and make them visible to other packages.
         .library(
             name: "SlidingTabView",
             targets: ["SlidingTabView"]),
     ],
     dependencies: [
-        // Dependencies declare other packages that this package depends on.
-        // .package(url: /* package url */, from: "1.0.0"),
+        .package(url: "https://github.com/GeorgeElsham/ViewExtractor", from: "2.0.0")
     ],
     targets: [
         // Targets are the basic building blocks of a package. A target can define a module or a test suite.
         // Targets can depend on other targets in this package, and on products in packages which this package depends on.
         .target(
             name: "SlidingTabView",
-            dependencies: [],
+            dependencies: ["ViewExtractor"],
             path: "Sources"),
         .testTarget(
             name: "SlidingTabViewTests",

README.md

@@ -12,7 +12,10 @@ Please use Swift Package Manager to install **SlidingTabView**
 Just instantiate and bind it to your state. That is it!
 ```swift
 @State private var selectedTabIndex = 0
-SlidingTabView(selection: $selectedTabIndex,tabs: ["First Tab", "Second Tab"]
+SlidingTabView(selection: $selectedTabIndex,tabs: ["First Tab", "Second Tab"]) {
+    Text("First Page")
+    Text("Second Page")
+}
 ```
 
 ## Canvas Preview
@@ -21,17 +24,18 @@ struct SlidingTabConsumerView : View {
     @State private var selectedTabIndex = 0
 
     var body: some View {
-        VStack(alignment: .leading) {
-            SlidingTabView(selection: self.$selectedTabIndex, tabs: ["First", "Second"])
-            (selectedTabIndex == 0 ? Text("First View") : Text("Second View")).padding()
-            Spacer()
+        SlidingTabView(selection: self.$selectedTabIndex,
+                       tabs: ["First", "Second"],
+                       font: .body,
+                       activeAccentColor: Color.blue,
+                       selectionBarColor: Color.blue) {
+            Text("First View")
+            Text("Second View")
         }
-            .padding(.top, 50)
-            .animation(.none)
     }
 }
 
-@available(iOS 13.0.0, *)
+@available(iOS 14.0.0, *)
 struct SlidingTabView_Previews : PreviewProvider {
     static var previews: some View {
         SlidingTabConsumerView()

Sources/SlidingTabView/SlidingTabView.swift

@@ -23,19 +23,11 @@
 //
 
 import SwiftUI
+import ViewExtractor
+
+@available(iOS 14.0, *)
+public struct SlidingTabView<Content:View>: View{
 
-@available(iOS 13.0, *)
-public struct SlidingTabView : View {
-
-    // MARK: Internal State
-
-    /// Internal state to keep track of the selection index
-    @State private var selectionState: Int = 0 {
-        didSet {
-            selection = selectionState
-        }
-    }
-
     // MARK: Required Properties
 
     /// Binding the selection index which will  re-render the consuming view
@@ -44,7 +36,9 @@ public struct SlidingTabView : View {
     /// The title of the tabs
     let tabs: [String]
 
-    // Mark: View Customization Properties
+    let content: () -> Content
+
+    // MARK: View Customization Properties
 
     /// The font of the tab title
     let font: Font
@@ -89,7 +83,8 @@ public struct SlidingTabView : View {
                 activeTabColor: Color = .clear,
                 selectionBarHeight: CGFloat = 2,
                 selectionBarBackgroundColor: Color = Color.gray.opacity(0.2),
-                selectionBarBackgroundHeight: CGFloat = 1) {
+                selectionBarBackgroundHeight: CGFloat = 1,
+                @ViewBuilder content: @escaping () -> Content) {
         self._selection = selection
         self.tabs = tabs
         self.font = font
@@ -102,35 +97,36 @@ public struct SlidingTabView : View {
         self.selectionBarHeight = selectionBarHeight
         self.selectionBarBackgroundColor = selectionBarBackgroundColor
         self.selectionBarBackgroundHeight = selectionBarBackgroundHeight
+        self.content = content
     }
 
     // MARK: View Construction
 
-    public var body: some View {
-        assert(tabs.count > 1, "Must have at least 2 tabs")
-
-        return VStack(alignment: .leading, spacing: 0) {
+    private var tabsView: some View {
+        VStack(alignment: .leading, spacing: 0) {
+
             HStack(spacing: 0) {
                 ForEach(self.tabs, id:\.self) { tab in
-                    Button(action: {
-                        let selection = self.tabs.firstIndex(of: tab) ?? 0
-                        self.selectionState = selection
-                    }) {
+                    Button{
+                        withAnimation(self.animation) {
+                            self.selection =  self.tabs.firstIndex(of: tab)!
+                        }
+                    } label: {
                         HStack {
                             Spacer()
                             Text(tab).font(self.font)
                             Spacer()
                         }
                     }
-                    .padding(.vertical, 16)
-                        .accentColor(
-                            self.isSelected(tabIdentifier: tab)
-                                ? self.activeAccentColor
-                                : self.inactiveAccentColor)
-                        .background(
-                            self.isSelected(tabIdentifier: tab)
-                                ? self.activeTabColor
-                                : self.inactiveTabColor)
+                    .frame(height: 52)
+                    .accentColor(
+                        self.isSelected(tabIdentifier: tab)
+                        ? self.activeAccentColor
+                        : self.inactiveAccentColor)
+                    .background(
+                        self.isSelected(tabIdentifier: tab)
+                        ? self.activeTabColor
+                        : self.inactiveTabColor)
                 }
             }
             GeometryReader { geometry in
@@ -139,7 +135,7 @@ public struct SlidingTabView : View {
                         .fill(self.selectionBarColor)
                         .frame(width: self.tabWidth(from: geometry.size.width), height: self.selectionBarHeight, alignment: .leading)
                         .offset(x: self.selectionBarXOffset(from: geometry.size.width), y: 0)
-                        .animation(self.animation)
+
                     Rectangle()
                         .fill(self.selectionBarBackgroundColor)
                         .frame(width: geometry.size.width, height: self.selectionBarBackgroundHeight, alignment: .leading)
@@ -149,14 +145,32 @@ public struct SlidingTabView : View {
         }
     }
 
+    public var body: some View {
+        assert(tabs.count > 1, "Must have at least 2 tabs")
+
+        return VStack(alignment: .leading) {
+            tabsView
+            Extract(content) { views in
+                TabView(selection: $selection.animation(self.animation)) {
+                    ForEach(Array(zip(views.indices, views)), id: \.1.id) {index, view in
+                        view.tag(index)
+                    }
+                }
+                .tabViewStyle(.page)
+                .indexViewStyle(.page(backgroundDisplayMode: .never))
+
+            }
+        }
+    }
+
     // MARK: Private Helper
 
     private func isSelected(tabIdentifier: String) -> Bool {
-        return tabs[selectionState] == tabIdentifier
+        return tabs[selection] == tabIdentifier
     }
 
     private func selectionBarXOffset(from totalWidth: CGFloat) -> CGFloat {
-        return self.tabWidth(from: totalWidth) * CGFloat(selectionState)
+        return self.tabWidth(from: totalWidth) * CGFloat(selection)
     }
 
     private func tabWidth(from totalWidth: CGFloat) -> CGFloat {
@@ -166,26 +180,23 @@ public struct SlidingTabView : View {
 
 #if DEBUG
 
-@available(iOS 13.0, *)
+@available(iOS 14.0, *)
 struct SlidingTabConsumerView : View {
     @State private var selectedTabIndex = 0
 
     var body: some View {
-        VStack(alignment: .leading) {
-            SlidingTabView(selection: self.$selectedTabIndex,
-                           tabs: ["First", "Second"],
-                           font: .body,
-                           activeAccentColor: Color.blue,
-                           selectionBarColor: Color.blue)
-            (selectedTabIndex == 0 ? Text("First View") : Text("Second View")).padding()
-            Spacer()
+        SlidingTabView(selection: self.$selectedTabIndex,
+                       tabs: ["First", "Second"],
+                       font: .body,
+                       activeAccentColor: Color.blue,
+                       selectionBarColor: Color.blue) {
+            Text("First View")
+            Text("Second View")
         }
-        .padding(.top, 50)
-            .animation(.none)
     }
 }
 
-@available(iOS 13.0.0, *)
+@available(iOS 14.0.0, *)
 struct SlidingTabView_Previews : PreviewProvider {
     static var previews: some View {
         SlidingTabConsumerView()