Improve usability by using content closures

Package.swift

@@ -5,6 +5,7 @@ import PackageDescription
 
 let package = Package(
     name: "SlidingTabView",
+    platforms: [.iOS(.v13)],
     products: [
         // Products define the executables and libraries produced by a package, and make them visible to other packages.
         .library(

README.md

@@ -9,32 +9,28 @@
 Please use Swift Package Manager to install **SlidingTabView**
 
 ## Usage
-Just instantiate and bind it to your state. That is it!
+Just instantiate, bind it to your state and add your tabs with their respective content. That is it!
 ```swift
-@State private var selectedTabIndex = 0
-SlidingTabView(selection: $selectedTabIndex,tabs: ["First Tab", "Second Tab"]
-```
+import SlidingTabView
 
-## Canvas Preview
-```swift
-struct SlidingTabConsumerView : View {
-    @State private var selectedTabIndex = 0
+struct MyView: View {
+
+    @State var selectedTab: Int = 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()
-        }
-            .padding(.top, 50)
-            .animation(.none)
-    }
-}
+        SlidingTabView(
+            selection: $selectedTab,
+            tabs: SlidingTab(title: "Hello") {
+
+                Text("Hello")
+
+            },
+            SlidingTab(title: "World!") {
+
+                Text("World!")
 
-@available(iOS 13.0.0, *)
-struct SlidingTabView_Previews : PreviewProvider {
-    static var previews: some View {
-        SlidingTabConsumerView()
+            }
+        )
     }
 }
 ```

Sources/SlidingTabView/SlidingTab.swift

@@ -0,0 +1,42 @@
+//
+//  SlidingTab.swift
+//  
+//  Copyright (c) 2019 Quynh Nguyen
+//
+//  Permission is hereby granted, free of charge, to any person obtaining a copy
+//  of this software and associated documentation files (the "Software"), to deal
+//  in the Software without restriction, including without limitation the rights
+//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+//  copies of the Software, and to permit persons to whom the Software is
+//  furnished to do so, subject to the following conditions:
+//
+//  The above copyright notice and this permission notice shall be included in
+//  all copies or substantial portions of the Software.
+//
+//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+//  THE SOFTWARE.
+//
+
+import Foundation
+import SwiftUI
+
+public struct SlidingTab {
+
+    public let title: String
+    public let content: () -> AnyView
+
+    public init<Content: View>(title: String, @ViewBuilder content: @escaping () -> Content) {
+
+        self.title = title
+        self.content = {
+            AnyView(content())
+        }
+
+    }
+
+}

Sources/SlidingTabView/SlidingTabView.swift

@@ -24,7 +24,6 @@
 
 import SwiftUI
 
-@available(iOS 13.0, *)
 public struct SlidingTabView : View {
 
     // MARK: Internal State
@@ -41,8 +40,8 @@ public struct SlidingTabView : View {
     /// Binding the selection index which will  re-render the consuming view
     @Binding var selection: Int
 
-    /// The title of the tabs
-    let tabs: [String]
+    /// The list of tabs
+    let tabs: [SlidingTab]
 
     // Mark: View Customization Properties
 
@@ -58,6 +57,9 @@ public struct SlidingTabView : View {
     /// The accent color when the tab is not selected
     let inactiveAccentColor: Color
 
+    /// The height of the tabs.
+    let tabHeight: CGFloat
+
     /// The color of the selection bar
     let selectionBarColor: Color
 
@@ -79,11 +81,12 @@ public struct SlidingTabView : View {
     // MARK: init
 
     public init(selection: Binding<Int>,
-                tabs: [String],
+                tabs: SlidingTab...,
                 font: Font = .body,
                 animation: Animation = .spring(),
                 activeAccentColor: Color = .blue,
                 inactiveAccentColor: Color = Color.black.opacity(0.4),
+                tabHeight: CGFloat = 50,
                 selectionBarColor: Color = .blue,
                 inactiveTabColor: Color = .clear,
                 activeTabColor: Color = .clear,
@@ -96,6 +99,7 @@ public struct SlidingTabView : View {
         self.animation = animation
         self.activeAccentColor = activeAccentColor
         self.inactiveAccentColor = inactiveAccentColor
+        self.tabHeight = tabHeight
         self.selectionBarColor = selectionBarColor
         self.inactiveTabColor = inactiveTabColor
         self.activeTabColor = activeTabColor
@@ -109,50 +113,65 @@ public struct SlidingTabView : View {
     public var body: some View {
         assert(tabs.count > 1, "Must have at least 2 tabs")
 
-        return 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
-                    }) {
-                        HStack {
-                            Spacer()
-                            Text(tab).font(self.font)
-                            Spacer()
+        return ZStack {
+
+            VStack(alignment: .leading, spacing: 0) {
+
+                Group {
+                    HStack(spacing: 0) {
+
+                        ForEach(0..<self.tabs.count) { (index) in
+
+                            let tab = tabs[index]
+
+                            Button(action: {
+
+                                self.selectionState = index
+
+                            }) {
+                                HStack {
+                                    Spacer()
+                                    Text(tab.title).font(self.font)
+                                    Spacer()
+                                }
+                            }
+                            .frame(height: self.tabHeight)
+                            .foregroundColor(
+                                self.isSelected(tabIndex: index)
+                                    ? self.activeAccentColor
+                                    : self.inactiveAccentColor)
+                            .background(
+                                self.isSelected(tabIndex: index)
+                                    ? self.activeTabColor
+                                    : self.inactiveTabColor)
                         }
                     }
-                    .padding(.vertical, 16)
-                        .accentColor(
-                            self.isSelected(tabIdentifier: tab)
-                                ? self.activeAccentColor
-                                : self.inactiveAccentColor)
-                        .background(
-                            self.isSelected(tabIdentifier: tab)
-                                ? self.activeTabColor
-                                : self.inactiveTabColor)
+                    GeometryReader { geometry in
+                        ZStack(alignment: .leading) {
+                            Rectangle()
+                                .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)
+                        }.fixedSize(horizontal: false, vertical: true)
+                    }.fixedSize(horizontal: false, vertical: true)
+                    Spacer()
                 }
             }
-            GeometryReader { geometry in
-                ZStack(alignment: .leading) {
-                    Rectangle()
-                        .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)
-                }.fixedSize(horizontal: false, vertical: true)
-            }.fixedSize(horizontal: false, vertical: true)
+
+            let tab = tabs[selectionState]
+            tab.content().offset(y: self.tabHeight + self.selectionBarHeight)
 
         }
     }
 
     // MARK: Private Helper
 
-    private func isSelected(tabIdentifier: String) -> Bool {
-        return tabs[selectionState] == tabIdentifier
+    private func isSelected(tabIndex: Int) -> Bool {
+        return selectionState == tabIndex
     }
 
     private func selectionBarXOffset(from totalWidth: CGFloat) -> CGFloat {
@@ -165,30 +184,27 @@ public struct SlidingTabView : View {
 }
 
 #if DEBUG
-
-@available(iOS 13.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()
-        }
-        .padding(.top, 50)
-            .animation(.none)
-    }
-}
-
-@available(iOS 13.0.0, *)
 struct SlidingTabView_Previews : PreviewProvider {
+
+    @State static var selectedTab = 0
+
     static var previews: some View {
-        SlidingTabConsumerView()
+        SlidingTabView(
+            selection: $selectedTab,
+            tabs: SlidingTab(title: "Hello") {
+
+                Text("Hello")
+
+            },
+            SlidingTab(title: "World!") {
+
+                Text("World!")
+
+            },
+            font: .body,
+            activeAccentColor: Color.blue,
+            selectionBarColor: Color.blue
+        )
     }
 }
 #endif