Fixed issue with pagecontrol offset

README.md

@@ -26,7 +26,7 @@ For Swift Package Manager add the following package to your Package.swift:
 
 Carthage is also supported, add FormView by adding to Cartfile:
 ```
-github "fredyshox/PageView" ~> 1.3.1
+github "fredyshox/PageView" ~> 1.3.2
 ```
 
 ## Demo
@@ -60,14 +60,15 @@ VPageView {
 By default PageView fills all the available area, you can constrain it's size using `.frame(width:, height:)` View modifier.
 
 You can customize the styling of page control component by passing `PageControlTheme`. Customizable properties:
-* background color
-* active page dot color
-* inactive page dot color
-* size of page dot
-* spacing between dots
-* padding of page control
-* page control offset
-* alignment of page control component (default: bottom-center for horizontal axis, center-leading for vertical axis)
+* `backgroundColor`
+* `dotActiveColor`: active page dot color
+* `dotInactiveColor`: inactive page dot color
+* `dotSize`: size of page dot
+* `spacing`: spacing between dots
+* `padding`: padding of page control
+* `xOffset`: page control x-axis offset, used only in vertical mode
+* `yOffset`: page control y-axis offset, used only in horizontal mode
+* `alignment`: alignment of page control component (default: bottom-center in horizontal mode, center-leading in vertical mode)
 
 ```swift
 let theme = PageControlTheme(
@@ -77,7 +78,8 @@ let theme = PageControlTheme(
     dotSize: 10.0,
     spacing: 12.0,
     padding: 5.0,
-    offset: 8.0,
+  	xOffset: 8.0,
+    yOffset: -8.0,
     alignment: Alignment(horizontal: .trailing, vertical: .top)
 )
 ...

Sources/PageControl.swift

@@ -35,7 +35,9 @@ public enum PageControl {
         public var body: some View {
             HStack(spacing: theme.spacing) {
                 bodyCreator(pageCount, $selectedPage, theme)
-            }.modifier(Background(theme: theme))
+            }
+                .modifier(Background(theme: theme))
+                .offset(x: 0.0, y: theme.yOffset)
         }
     }
 
@@ -50,7 +52,9 @@ public enum PageControl {
         public var body: some View {
             VStack(spacing: theme.spacing) {
                 bodyCreator(pageCount, $selectedPage, theme)
-            }.modifier(Background(theme: theme))
+            }
+                .modifier(Background(theme: theme))
+                .offset(x: theme.xOffset, y: 0.0)
         }
     }
 

Sources/PageControlTheme.swift

@@ -14,7 +14,8 @@ public struct PageControlTheme {
     public var dotSize: CGFloat
     public var spacing: CGFloat
     public var padding: CGFloat
-    public var offset: CGFloat
+    public var xOffset: CGFloat
+    public var yOffset: CGFloat
     public var alignment: Alignment?
 
     public static var `default`: PageControlTheme {
@@ -26,7 +27,8 @@ public struct PageControlTheme {
                 dotSize: 7.0,
                 spacing: 9.0,
                 padding: 4.0,
-                offset: 12.0,
+                xOffset: 12.0,
+                yOffset: -12.0,
                 alignment: nil
             )
         #elseif os(watchOS)
@@ -37,7 +39,8 @@ public struct PageControlTheme {
                 dotSize: 6.0,
                 spacing: 5.0,
                 padding: 2.0,
-                offset: 0.0,
+                xOffset: 0.0,
+                yOffset: 0.0,
                 alignment: nil
             )
         #else
@@ -48,7 +51,8 @@ public struct PageControlTheme {
                 dotSize: 12.0,
                 spacing: 8.0,
                 padding: 8.0,
-                offset: 16.0,
+                xOffset: 16.0,
+                yOffset: -16.0,
                 alignment: nil
             )
         #endif

Sources/PageView.swift

@@ -128,7 +128,12 @@ struct PageView_Previews: PreviewProvider {
                 .fontWeight(.bold)
                 .foregroundColor(.gray)
         }
-        return HPageView {
+
+        var theme = PageControlTheme.default
+        theme.alignment = Alignment(horizontal: .center, vertical: .bottom)
+        theme.yOffset = -14
+
+        return HPageView(theme: theme) {
             v1
             v2
         }