Merge pull request #666 from rechsteiner/swiftui-api

Add new API for PageView implementation in SwiftUI
rechsteiner · Apr 2, 2023 · d738017 · d738017
2 parents a0d1b3c + 817a7f1
commit d738017
Show file tree

Hide file tree

Showing 24 changed files with 1,414 additions and 293 deletions.
diff --git a/ExampleSwiftUI/ChangeItems.swift b/ExampleSwiftUI/ChangeItems.swift
diff --git a/ExampleSwiftUI/ChangeItemsView.swift b/ExampleSwiftUI/ChangeItemsView.swift
@@ -0,0 +1,61 @@
+import Parchment
+import SwiftUI
+import UIKit
+
+struct ChangeItemsView: View {
+    @State var isToggled: Bool = false
+
+    var body: some View {
+        PageView {
+            if isToggled {
+                Page("Title 2") {
+                    VStack {
+                        Text("Page 2")
+                            .font(.largeTitle)
+                            .padding(.bottom)
+
+                        Button("Click me") {
+                            isToggled.toggle()
+                        }
+                    }
+                }
+
+                Page("Title 3") {
+                    VStack {
+                        Text("Page 3")
+                            .font(.largeTitle)
+                            .padding(.bottom)
+
+                        Button("Click me") {
+                            isToggled.toggle()
+                        }
+                    }
+                }
+            } else {
+                Page("Title 0") {
+                    VStack {
+                        Text("Page 0")
+                            .font(.largeTitle)
+                            .padding(.bottom)
+
+                        Button("Click me") {
+                            isToggled.toggle()
+                        }
+                    }
+                }
+
+                Page("Title 1") {
+                    VStack {
+                        Text("Page 1")
+                            .font(.largeTitle)
+                            .padding(.bottom)
+
+                        Button("Click me") {
+                            isToggled.toggle()
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/ExampleSwiftUI/CustomizedView.swift b/ExampleSwiftUI/CustomizedView.swift
@@ -0,0 +1,42 @@
+import Parchment
+import SwiftUI
+import UIKit
+
+struct CustomizedView: View {
+    var body: some View {
+        PageView {
+            Page("Title 1") {
+                VStack(spacing: 25) {
+                    Text("Page 1")
+                    Image(systemName: "arrow.down")
+                }
+                .font(.largeTitle)
+            }
+
+            Page("Title 2") {
+                VStack(spacing: 25) {
+                    Image(systemName: "arrow.up")
+                    Text("Page 2")
+                }
+                .font(.largeTitle)
+            }
+        }
+        .menuItemSize(.fixed(width: 100, height: 60))
+        .menuItemSpacing(20)
+        .menuItemLabelSpacing(30)
+        .menuBackgroundColor(.white)
+        .menuInsets(.vertical, 20)
+        .menuHorizontalAlignment(.center)
+        .menuPosition(.bottom)
+        .menuTransition(.scrollAlongside)
+        .menuInteraction(.swipe)
+        .contentInteraction(.scrolling)
+        .contentNavigationOrientation(.vertical)
+        .selectedScrollPosition(.preferCentered)
+        .indicatorOptions(.visible(height: 4))
+        .indicatorColor(.blue)
+        .borderOptions(.visible(height: 4))
+        .borderColor(.blue.opacity(0.2))
+        .foregroundColor(.blue)
+    }
+}
diff --git a/ExampleSwiftUI/DefaultView.swift b/ExampleSwiftUI/DefaultView.swift
@@ -3,18 +3,52 @@ import SwiftUI
 import UIKit
 
 struct DefaultView: View {
-    let items = [
-        PagingIndexItem(index: 0, title: "View 0"),
-        PagingIndexItem(index: 1, title: "View 1"),
-        PagingIndexItem(index: 2, title: "View 2"),
-        PagingIndexItem(index: 3, title: "View 3"),
-    ]
-
     var body: some View {
-        PageView(items: items) { item in
-            Text(item.title)
-                .font(.largeTitle)
-                .foregroundColor(.gray)
+        PageView {
+            Page { _ in
+                Image(systemName: "star.fill")
+                    .padding()
+            } content: {
+                Text("Page 1")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 2") {
+                Text("Page 2")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 3") {
+                Text("Page 3")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 4") {
+                Text("Page 4")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Some very long title") {
+                Text("Page 5")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 6") {
+                Text("Page 6")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 7") {
+                Text("Page 7")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
         }
     }
 }
diff --git a/ExampleSwiftUI/DynamicItemsView.swift b/ExampleSwiftUI/DynamicItemsView.swift
@@ -0,0 +1,27 @@
+import Parchment
+import SwiftUI
+import UIKit
+
+struct DynamicItemsView: View {
+    @State var items: [Int] = [0, 1, 2, 3, 4]
+
+    var body: some View {
+        PageView(items, id: \.self) { item in
+            Page("Title \(item)") {
+                VStack {
+                    Text("Page \(item)")
+                        .font(.largeTitle)
+                        .padding(.bottom)
+
+                    Button("Click me") {
+                        if items.count > 2 {
+                            items = [5, 6]
+                        } else {
+                            items = [0, 1, 2, 3, 4]
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/ExampleSwiftUI/ExampleApp.swift b/ExampleSwiftUI/ExampleApp.swift
@@ -6,10 +6,17 @@ struct ExampleApp: App {
         WindowGroup {
             NavigationView {
                 List {
-                    NavigationLink("Default", destination: DefaultView())
-                    NavigationLink("Change selected index", destination: SelectedIndexView())
-                    NavigationLink("Lifecycle events", destination: LifecycleView())
-                    NavigationLink("Change items", destination: ChangeItemsView())
+                    Text("**Welcome to Parchment**. These examples shows how to use Parchment with SwiftUI. For more advanced examples, see the UIKit examples or reach out on GitHub Discussions.")
+
+                    Section {
+                        NavigationLink("Default", destination: DefaultView())
+                        NavigationLink("Interpolated", destination: InterpolatedView())
+                        NavigationLink("Customized", destination: CustomizedView())
+                        NavigationLink("Change selected index", destination: SelectedIndexView())
+                        NavigationLink("Lifecycle events", destination: LifecycleView())
+                        NavigationLink("Change items", destination: ChangeItemsView())
+                        NavigationLink("Dynamic items", destination: DynamicItemsView())
+                    }
                 }
                 .navigationBarTitleDisplayMode(.inline)
             }

diff --git a/ExampleSwiftUI/InterpolatedView.swift b/ExampleSwiftUI/InterpolatedView.swift
@@ -0,0 +1,67 @@
+import Parchment
+import SwiftUI
+import UIKit
+
+struct InterpolatedView: View {
+    var body: some View {
+        PageView {
+            Page { state in
+                Image(systemName: "star.fill")
+                    .scaleEffect(x: 1 + state.progress, y: 1 + state.progress)
+                    .rotationEffect(Angle(degrees: 180 * state.progress))
+                    .padding(30 * state.progress + 20)
+            } content: {
+                Text("Page 1")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+            Page { state in
+                Text("Rotate")
+                    .fixedSize()
+                    .rotationEffect(Angle(degrees: 90 * state.progress))
+                    .padding(.horizontal, 10)
+            } content: {
+                Text("Page 2")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page { state in
+                Text("Tracking")
+                    .tracking(10 * state.progress)
+                    .fixedSize()
+                    .padding()
+            } content: {
+                Text("Page 3")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page { state in
+                Text("Growing")
+                    .fixedSize()
+                    .padding(.vertical)
+                    .padding(.horizontal, 20 * state.progress + 10)
+                    .background(Color.black.opacity(0.1))
+                    .cornerRadius(6)
+            } content: {
+                Text("Page 4")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Normal") {
+                Text("Page 5")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Normal") {
+                Text("Page 6")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+        }
+        .menuItemSize(.selfSizing(estimatedWidth: 100, height: 80))
+    }
+}
diff --git a/ExampleSwiftUI/LifecycleView.swift b/ExampleSwiftUI/LifecycleView.swift
@@ -3,27 +3,34 @@ import SwiftUI
 import UIKit
 
 struct LifecycleView: View {
-    let items = [
-        PagingIndexItem(index: 0, title: "View 0"),
-        PagingIndexItem(index: 1, title: "View 1"),
-        PagingIndexItem(index: 2, title: "View 2"),
-        PagingIndexItem(index: 3, title: "View 3"),
-    ]
-
     var body: some View {
-        PageView(items: items) { item in
-            Text(item.title)
-                .font(.largeTitle)
-                .foregroundColor(.gray)
+        PageView {
+            Page("Title 1") {
+                Text("Page 1")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 2") {
+                Text("Page 2")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
+
+            Page("Title 3") {
+                Text("Page 3")
+                    .font(.largeTitle)
+                    .foregroundColor(.gray)
+            }
         }
-        .willScroll { pagingItem in
-            print("will scroll: ", pagingItem)
+        .willScroll { item in
+            print("will scroll: ", item)
         }
-        .didScroll { pagingItem in
-            print("did scroll: ", pagingItem)
+        .didScroll { item in
+            print("did scroll: ", item)
         }
-        .didSelect { pagingItem in
-            print("did select: ", pagingItem)
+        .didSelect { item in
+            print("did select: ", item)
         }
     }
 }