Merge pull request #3 from KazaiMazai/Alignment-issue-fix

Alignment issue fix
KazaiMazai · May 21, 2022 · c3c6396 · c3c6396
2 parents 754ca0a + ec4c48c
commit c3c6396
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -8,14 +8,15 @@ Custom segmented picker for SwiftUI
 
 struct SegmentedPickerExample: View {
     let titles: [String]
-    @State var selectedIndex: Int = 0
+    @State var selectedIndex: Int?
 
     var body: some View {
         SegmentedPicker(
             titles,
             selectedIndex: Binding(
                 get: { selectedIndex },
-                set: { selectedIndex = $0 ?? 0 }),
+                set: { selectedIndex = $0 }),
+            selectionAlignment: .bottom,
             content: { item, isSelected in
                 Text(item)
                     .foregroundColor(isSelected ? Color.black : Color.gray )
@@ -25,11 +26,12 @@ struct SegmentedPickerExample: View {
             selection: {
                 VStack(spacing: 0) {
                     Spacer()
-                    Rectangle()
-                        .fill(Color.black)
-                        .frame(height: 1)
+                    Color.black.frame(height: 1)
                 }
             })
+            .onAppear {
+                selectedIndex = 0
+            }
             .animation(.easeInOut(duration: 0.3))
     }
 }
@@ -49,14 +51,14 @@ or this guy with a capsule as selection view:
 
 struct SegmentedPickerExample: View {
     let titles: [String]
-    @State var selectedIndex: Int = 0
+    @State var selectedIndex: Int?
 
     var body: some View {
         SegmentedPicker(
             titles,
             selectedIndex: Binding(
                 get: { selectedIndex },
-                set: { selectedIndex = $0 ?? 0 }),
+                set: { selectedIndex = $0 }),
             content: { item, isSelected in
                 Text(item)
                     .foregroundColor(isSelected ? Color.white : Color.gray )
@@ -67,6 +69,9 @@ struct SegmentedPickerExample: View {
                 Capsule()
                     .fill(Color.gray)
             })
+            .onAppear {
+                selectedIndex = 0
+            }
             .animation(.easeInOut(duration: 0.3))
     }
 }

diff --git a/Sources/SegmentedPicker/SegmentedPicker.swift b/Sources/SegmentedPicker/SegmentedPicker.swift
@@ -20,9 +20,11 @@ public struct SegmentedPicker<Element, Content, Selection>: View
     private let data: Data
     private let selection: () -> Selection
     private let content: (Data.Element, Bool) -> Content
+    private let selectionAlignment: VerticalAlignment
 
     public init(_ data: Data,
                 selectedIndex: Binding<Data.Index?>,
+                selectionAlignment: VerticalAlignment = .center,
                 @ViewBuilder content: @escaping (Data.Element, Bool) -> Content,
                 @ViewBuilder selection: @escaping () -> Selection) {
 
@@ -32,11 +34,12 @@ public struct SegmentedPicker<Element, Content, Selection>: View
         self._selectedIndex = selectedIndex
         self._frames = State(wrappedValue: Array(repeating: .zero,
                                                  count: data.count))
+        self.selectionAlignment = selectionAlignment
     }
 
     public var body: some View {
         ZStack(alignment: Alignment(horizontal: .horizontalCenterAlignment,
-                                    vertical: .center)) {
+                                    vertical: selectionAlignment)) {
 
             if let selectedIndex = selectedIndex {
                 selection()