Merge pull request #1 from adisve/ui/wrapping

UI/wrapping

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"

Assets/Showroom_1.png

@@ -21,54 +21,125 @@ 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),
-    ]
+    @State private var selectedGenres: [Genre] = []
 
     var body: some View {
         NavigationView {
-            VStack(alignment: .leading, spacing: 40) {
-                Text("Select Your Favorite Colors")
+            VStack {
+                TabView {
+                    
+                    /// Example view where pills wrap to new line and only occupy
+                    /// necessary space
+                    ExampleBuilder(selectedItems: $selectedGenres, content: {
+                        PillPickerView(items: genres, selectedPills: $selectedGenres)
+                            .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(selectedItems: $selectedGenres, content: {
+                        PillPickerView(items: genres, selectedPills: $selectedGenres)
+                            .pillStackStyle(.noWrap)
+                    })
+                    .tag(1)
+                    .navigationTitle("Static pills")
+                }
+                .tabViewStyle(.page)
+                .tint(.accentColor)
+            }
+            .toolbar(content: {
+                ToolbarItem(placement: .navigationBarTrailing, content: {
+                    Button(action: {
+                        withAnimation {
+                            selectedGenres.removeAll()
+                        }
+                    }, label: {
+                        Text("Clear All")
+                    })
+                })
+            })
+        }
+    }
+}
+
+struct ExampleBuilder<T, V>: View where T: Pill, V: View {
+    
+    typealias ContentGenerator = () -> V
+    
+    @Binding var selectedItems: [T]
+    
+    var content: ContentGenerator
+    
+    var body: some View {
+        ScrollView (showsIndicators: false) {
+            HStack {
+                Text("Select Your Favorite Genres")
                     .font(.system(size: 26, weight: .semibold, design: .rounded))
-                
-                /// PillPickerView usage example
-                PillPickerView(items: colorPills, selectedPills: $selectedColors)
-                
-                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)
+                Spacer()
+            }
+            .padding(.vertical, 30)
+            
+            /// PillPickerView usage example
+            content()
+            
+            Text("Selected Genres:")
+                .font(.system(size: 20, weight: .semibold, design: .rounded))
+                .padding(.top, 30)
+            
+            VStack(spacing: 10) {
+                ForEach(selectedItems, id: \.self) { item in
+                    HStack {
+                        Text(item.title)
+                            .font(.system(size: 16, weight: .semibold, design: .rounded))
+                            .foregroundColor(.white)
                     }
+                    .padding()
+                    .frame(maxWidth: .infinity)
+                    .background(
+                        RoundedRectangle(cornerRadius: 20)
+                            .foregroundColor(.accentColor)
+                    )
                 }
-                
-                Spacer()
             }
-            .padding()
-            .padding(.top, 15)
-            .navigationTitle("PillPickerView")
+            .padding(.bottom, 60)
+            
+            Spacer()
         }
+        .padding(.horizontal, 15)
     }
 }
+
+/// Sample model conforming to the `Pill` protocol.
+/// An element must have a `title` attribute.
+struct Genre: Pill {
+    let title: String
+}
+
+/// Collection of items conforming to `Pill`
+let genres: [Genre] = [
+    Genre(title: "Action"),
+    Genre(title: "Adventure"),
+    Genre(title: "Comedy"),
+    Genre(title: "Drama"),
+    Genre(title: "Fantasy"),
+    Genre(title: "Horror"),
+    Genre(title: "Mystery"),
+    Genre(title: "Romance"),
+    Genre(title: "Sci-Fi"),
+    Genre(title: "Thriller"),
+    Genre(title: "Western"),
+    Genre(title: "Animation"),
+    Genre(title: "Documentary"),
+    Genre(title: "Historical"),
+    Genre(title: "Musical"),
+    Genre(title: "War"),
+    Genre(title: "Crime"),
+    Genre(title: "Family"),
+    Genre(title: "Sports"),
+    Genre(title: "Biography")
+]

Assets/Showroom_2.png

@@ -21,6 +21,20 @@ A SwiftUI library to present a Pill Picker view
 
 ## How it looks
 
+<div style="display:flex; justify-content: center;">
+    <div>
+        <h4>Static placement</h4>
+        <img src="Assets/Showroom_1.png" alt="PillPickerView example 1" style="width: 200px;margin-right:50px;"/>
+    </div>
+    <div>
+        <h4>Flowing placement</h4>
+        <img src="Assets/Showroom_2.png" alt="PillPickerView example 2" style="width: 200px;"/>
+    </div>
+</div>
+
+<br>
+
+Demo: 
 https://github.com/adisve/PillPickerView/assets/96535657/4f052e75-36f1-4f59-9664-0a187b07de28
 
 <br>
@@ -124,8 +138,12 @@ In the example above, replace YourPillType with your custom pill type and yourIt
 
 PillPickerView offers a range of customization options to tailor the appearance of the pills to your app's design. You can customize the font, colors, animation, size, and other visual aspects of the pills by using the available modifier functions. 
 
+The PillPickerView includes a wrapping mechanism that automatically adjusts the layout of pills to fit within the available space. If the pills exceed the horizontal width of the container, the view wraps the excess pills to a new line. This makes it easy to present a large number of pills without worrying about truncation.
+
 You can customize the appearance of the pills by chaining the available modifier functions on the PillPickerView. For example:
 
+<br>
+
 ```swift
 PillPickerView(
     items: yourItemList,
@@ -138,6 +156,22 @@ PillPickerView(
 
 <br>
 
+To switch between the underlying stack style for the content. Choosing `.noWrap` will invariably cause any text inside the pills to be truncated depending on length, as it will automatically be fitted inside the view and not wrap to a new line. Choosing `.wrap` will let the pills be dynamically placed an move in the PillPickerView.
+
+```swift
+.pillStackStyle(.noWrap) // Prevents pills from wrapping to a new line and being dynamic
+.pillStackStyle(.wrap) // Default value. Allows pills to move in container
+```
+
+<br>
+
+To modify the vertical or horizontal spacing in the PillPickerView
+
+```swift
+.pillViewVerticalSpacing(10)
+.pillViewHorizontalSpacing(5)
+```
+
 To change the font of the pills
 
 ```swift
@@ -146,6 +180,24 @@ To change the font of the pills
 
 <br>
 
+You can of course chain things together to get a good layout based on your circumstances and requirements.
+
+```swift
+.pillFont(.title3)
+.pillViewHorizontalSpacing(30)
+```
+
+<br>
+
+To change the icon used by each pill when it is 'selected'.
+I advise you to choose something that indicates that the pill will no longer be selected if this icon is pressed, as this is the intended behavior.
+
+```swift
+.pillSelectedIcon(Image(systemName: "xmark"))
+```
+
+<br>
+
 To change the background color of a not selected and selected pill, respectively
 
 ```swift
@@ -195,9 +247,3 @@ Padding can also be applied
 ```swift
 .pillPadding(10)
 ```
-
-<br>
-
-## Note:
-
-The PillPickerView includes a wrapping mechanism that automatically adjusts the layout of pills to fit within the available space. If the pills exceed the horizontal width of the container, the view wraps the excess pills to a new line. This makes it easy to present a large number of pills without worrying about truncation.