Work on adding alignments to both static and wrapping views

Author: defaultdino

Assets/Header.png

@@ -1,6 +1,15 @@
 {
   "colors" : [
     {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x6F",
+          "green" : "0x52",
+          "red" : "0xEA"
+        }
+      },
       "idiom" : "universal"
     }
   ],

Assets/Logo.png

@@ -1,7 +1,7 @@
 {
   "images" : [
     {
-      "filename" : "PillPickerViewLogo.png",
+      "filename" : "Logo.png",
       "idiom" : "universal",
       "platform" : "ios",
       "size" : "1024x1024"

Example/PillPickerViewExample/Assets.xcassets/AccentColor.colorset/Contents.json

@@ -21,55 +21,91 @@ struct PillPickerViewExample: App {
 
 struct ContentView: View {
 
-    /// Sample model conforming to the `Pill` protocol.
-    /// An element must have a `title` attribute.
-    struct ColorPill: Pill {
-        let title: String
-        let color: Color
-    }
-    
     /// Required collection of items confirming to `Pill`
     /// which will be used for tracking which objects
     /// are selected
     @State private var selectedColors: [ColorPill] = []
 
-    /// Collection of items conforming to `Pill`
-    let colorPills: [ColorPill] = [
-        ColorPill(title: "Red", color: .red),
-        ColorPill(title: "Green", color: .green),
-        ColorPill(title: "Blue", color: .blue),
-        ColorPill(title: "Yellow", color: .yellow),
-        ColorPill(title: "Orange", color: .orange),
-        ColorPill(title: "Purple", color: .purple),
-        ColorPill(title: "Pink", color: .pink),
-    ]
-    
     var body: some View {
         NavigationView {
-            VStack(alignment: .leading, spacing: 40) {
-                Text("Select Your Favorite Colors")
-                    .font(.system(size: 26, weight: .semibold, design: .rounded))
-                
-                /// PillPickerView usage example
-                PillPickerView(items: colorPills, selectedPills: $selectedColors)
-                    .pillStackStyle(StackStyle.noWrap)
+            TabView {
 
-                Text("Selected Colors:")
-                    .font(.system(size: 20, weight: .semibold, design: .rounded))
-                
-                HStack(spacing: 10) {
-                    ForEach(selectedColors, id: \.self) { colorPill in
-                        RoundedRectangle(cornerRadius: 40)
-                            .foregroundColor(colorPill.color)
-                            .frame(width: 40, height: 40)
-                    }
-                }
+                /// Example view where pills wrap to new line and only occupy
+                /// necessary space
+                ExampleBuilder(selectedColors: $selectedColors, content: {
+                    PillPickerView(items: colorPills, selectedPills: $selectedColors)
+                        .pillStackStyle(.wrap)
+                })
+                .tag(0)
+                .navigationTitle("Wrapping pills")
 
+                /// Example view where pills do not wrap to new line and occupy
+                /// set amount of space horizontally and vertically
+                ExampleBuilder(selectedColors: $selectedColors, content: {
+                    PillPickerView(items: colorPills, selectedPills: $selectedColors)
+                        .pillStackStyle(.noWrap)
+                })
+                .tag(1)
+                .navigationTitle("Static pills")
+            }
+            .tabViewStyle(.page)
+            .tint(.accentColor)
+        }
+    }
+}
+
+struct ExampleBuilder<V : View>: View {
+    
+    typealias ContentGenerator = () -> V
+    
+    @Binding var selectedColors: [ColorPill]
+    
+    var content: ContentGenerator
+    
+    var body: some View {
+        ScrollView (showsIndicators: false) {
+            HStack {
+                Text("Select Your Favorite Colors")
+                    .font(.system(size: 26, weight: .semibold, design: .rounded))
                 Spacer()
             }
-            .padding()
-            .padding(.top, 15)
-            .navigationTitle("PillPickerView")
+            .padding(.vertical, 30)
+            
+            /// PillPickerView usage example
+            content()
+            
+            Text("Selected Colors:")
+                .font(.system(size: 20, weight: .semibold, design: .rounded))
+                .padding(.top, 30)
+            
+            HStack(spacing: 10) {
+                ForEach(selectedColors, id: \.self) { colorPill in
+                    RoundedRectangle(cornerRadius: 40)
+                        .foregroundColor(colorPill.color)
+                        .frame(width: 40, height: 40)
+                }
+            }
+            
+            Spacer()
         }
+        .padding(.horizontal, 15)
     }
 }
+
+/// Sample model conforming to the `Pill` protocol.
+/// An element must have a `title` attribute.
+struct ColorPill: Pill {
+    let title: String
+    let color: Color
+}
+
+/// Collection of items conforming to `Pill`
+let colorPills: [ColorPill] = [
+    ColorPill(title: "Red", color: .red),
+    ColorPill(title: "Green", color: .green),
+    ColorPill(title: "Blue", color: .blue),
+    ColorPill(title: "Yellow", color: .yellow),
+    ColorPill(title: "Orange", color: .orange),
+    ColorPill(title: "Purple", color: .purple),
+    ColorPill(title: "Pink", color: .pink),
+]

Example/PillPickerViewExample/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -270,7 +270,7 @@ public extension PillPickerView {
 
 }
 
-// MARK: - Child views
+// MARK: - Pill View
 
 /// View containing the selectable element
 struct PillView<T: Pill>: View {
@@ -405,34 +405,63 @@ struct StaticStack<T, V>: View where T: Hashable, V: View {
     /// Chunk size which `items` is divided into
     @State private var chunkSize: Int = 1
 
+    /// Current total height calculated
+    @State private var totalHeight = CGFloat.zero
+    
     private func calculateChunkSize(geometry: GeometryProxy) {
         let availableWidth = geometry.size.width
         let itemWidth: CGFloat = 100
 
-        chunkSize = max(Int(availableWidth / itemWidth), 1)
+        chunkSize = max(Int(availableWidth / (itemWidth + options.horizontalSpacing)), 1)
+    }
+    
+    // MARK: - Height Calculation
+    
+    /// Used to calculate the total height of the view. It wraps the ZStack
+    /// in a GeometryReader to obtain the height of the content and updates
+    /// the `totalHeight` state variable accordingly.
+    private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
+        return GeometryReader { geometry -> Color in
+            let rect = geometry.frame(in: .local)
+            DispatchQueue.main.async {
+                binding.wrappedValue = rect.size.height
+            }
+            return .clear
+        }
     }
 
     var body: some View {
-        GeometryReader { geometry in
-            VStack(alignment: options.staticAlignment, spacing: options.verticalSpacing) {
-                ForEach(items.chunked(into: chunkSize), id: \.self) { chunk in
-                    HStack(spacing: options.horizontalSpacing) {
-                        ForEach(chunk, id: \.self) { item in
-                            viewGenerator(item)
+        VStack {
+            GeometryReader { geometry in
+                VStack(spacing: options.verticalSpacing) {
+                    ForEach(items.chunked(into: chunkSize), id: \.self) { chunk in
+                        HStack(spacing: options.horizontalSpacing) {
+                            ForEach(chunk, id: \.self) { item in
+                                viewGenerator(item)
+                            }
                         }
+                        .frame(width: geometry.size.width, alignment: options.wrappingAlignment)
                     }
                 }
-            }
-            .onAppear {
-                calculateChunkSize(geometry: geometry)
-            }
-            
-            /// Dynamically generate chunk size based on
-            /// screen direction and dimension
-            .onChange(of: geometry.size.width) { _ in
-                calculateChunkSize(geometry: geometry)
+                
+                /// Necessary to get generated height
+                /// of child elements combined, then
+                /// set the parent `VStack` height accordingly
+                .background(viewHeightReader($totalHeight))
+                
+                .onAppear {
+                    calculateChunkSize(geometry: geometry)
+                }
+                
+                /// Dynamically generate chunk size based on
+                /// screen direction and dimension
+                .onChange(of: geometry.size.width) { _ in
+                    calculateChunkSize(geometry: geometry)
+                }
             }
         }
+        .frame(height: totalHeight)
+        .frame(maxWidth: .infinity)
     }
 }
 
@@ -481,7 +510,7 @@ public struct FlowStack<T, V>: View where T: Hashable, V: View {
                 generateContent(in: geometry)
             }
         }
-        .frame(maxHeight: totalHeight)
+        .frame(height: totalHeight)
     }
 
     // MARK: - Content Generation
@@ -512,7 +541,7 @@ public struct FlowStack<T, V>: View where T: Hashable, V: View {
         /// to 0 and subtracts the item's height from height to move to the next row.
         /// Otherwise, it returns the current `width` value and updates `width` by subtracting the item's width.
         func calculateLeadingAlignment(dimension: ViewDimensions, item: T) -> CGFloat {
-            if abs(width - (dimension.width + dimension.width / 2)) > geometry.size.width {
+            if abs(width - dimension.width) > geometry.size.width {
                 width = 0
                 height -= dimension.height
             }
@@ -537,19 +566,18 @@ public struct FlowStack<T, V>: View where T: Hashable, V: View {
         }
 
     }
+}
 
-    // MARK: - Height Calculation
-    
-    /// Used to calculate the total height of the view. It wraps the ZStack
-    /// in a GeometryReader to obtain the height of the content and updates
-    /// the `totalHeight` state variable accordingly.
-    private func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
-        return GeometryReader { geometry -> Color in
-            let rect = geometry.frame(in: .local)
-            DispatchQueue.main.async {
-                binding.wrappedValue = rect.size.height
-            }
-            return .clear
+/// MARK: - Utility functions
+
+/// Get height of context and set passed binding
+/// parameter based on received value
+func viewHeightReader(_ binding: Binding<CGFloat>) -> some View {
+    return GeometryReader { geometry -> Color in
+        let rect = geometry.frame(in: .local)
+        DispatchQueue.main.async {
+            binding.wrappedValue = rect.size.height
         }
+        return .clear
     }
 }