Item size preferences (#22)

* item size preferences

* readme

Author: ay42

Examples/GridExamples/AutoColumnsLayoutView.swift

@@ -2,11 +2,32 @@ import SwiftUI
 import Grid
 
 struct AutoColumnsLayoutView: View {
+    @State var selection: Int = 0
+    
     var body: some View {
-        Grid(0...100) { number in
+        Grid(0..<100) { number in
             Card(title: "\(number)")
+                .onTapGesture {
+                    self.selection = number
+                }
         }
         .padding()
+        .overlayPreferenceValue(GridItemPreferences.Key.self) { preferences in
+            GeometryReader { geometry in
+                RoundedRectangle(cornerRadius: 16)
+                    .strokeBorder(lineWidth: 4)
+                    .foregroundColor(.white)
+                    .frame(
+                        width: geometry[preferences[self.selection].bounds].size.width,
+                        height: geometry[preferences[self.selection].bounds].size.height
+                    )
+                    .offset(
+                        x: geometry[preferences[self.selection].bounds].minX,
+                        y: geometry[preferences[self.selection].bounds].minY
+                    )
+                    .animation(.spring())
+            }
+        }
     }
 }
 

README.md

@@ -73,6 +73,40 @@ Grid(0...100) { number in
 - watchOS 6+
 - Xcode 11.0+
 
+## Preferences
+Get item size and position with preferences
+```swift
+struct CardsView: View {
+    @State var selection: Int = 0
+    
+    var body: some View {
+        Grid(0..<100) { number in
+            Card(title: "\(number)")
+                .onTapGesture {
+                    self.selection = number
+                }
+        }
+        .padding()
+        .overlayPreferenceValue(GridItemPreferences.Key.self) { preferences in
+            GeometryReader { geometry in
+                RoundedRectangle(cornerRadius: 16)
+                    .strokeBorder(lineWidth: 4)
+                    .foregroundColor(.white)
+                    .frame(
+                        width: geometry[preferences[self.selection].bounds].size.width,
+                        height: geometry[preferences[self.selection].bounds].size.height
+                    )
+                    .offset(
+                        x: geometry[preferences[self.selection].bounds].minX,
+                        y: geometry[preferences[self.selection].bounds].minY
+                    )
+                    .animation(.spring())
+            }
+        }
+    }
+}
+```
+
 ## Version 1.0.0
 Stable version will be released as soon as XCode 11 GM becomes available. We will strictly follow semantic versioning moving forward.
 

Sources/Grid/AutoColumnsGridStyle.swift

@@ -23,10 +23,10 @@ public struct AutoColumnsGridStyle: GridStyle {
         self.vSpacing = vSpacing
     }
 
-    public func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat? {
+    public func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat {
         self.itemHeight
     }
-    public func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat? {
+    public func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat {
         self.itemWidth(for: geometry, minItemWidth: self.minItemWidth, padding: self.padding, hSpacing: self.hSpacing)
     }
 

Sources/Grid/FixedColumnsGridStyle.swift

@@ -23,10 +23,10 @@ public struct FixedColumnsGridStyle: GridStyle {
         self.vSpacing = vSpacing
     }
 
-    public func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat? {
+    public func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat {
         self.itemHeight
     }
-    public func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat? {
+    public func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat {
         self.itemWidth(for: geometry, columns: self.columns, padding: self.padding, hSpacing: self.hSpacing)
     }
 

Sources/Grid/Grid+Style.swift

@@ -4,10 +4,24 @@ import SwiftUI
 public protocol GridStyle {
     var padding: EdgeInsets { get set }
 
-    func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat?
-    func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat?
+    func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat
+    func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat
     func position(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGPoint
     func gridHeight(with geometry: GeometryProxy, itemsCount: Int) -> CGFloat
+    
+    func itemRect(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGRect
+}
+
+public extension GridStyle {
+    /// Translated from center origin to leading.
+    @inlinable func itemRect(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGRect {
+        CGRect(
+            x: self.position(at: index, with: geometry, itemsCount: itemsCount).x - geometry.size.width / 2,
+            y: self.position(at: index, with: geometry, itemsCount: itemsCount).y - geometry.size.height / 2,
+            width: self.frameWidth(at: index, with: geometry, itemsCount: itemsCount),
+            height: self.frameHeight(at: index, with: geometry, itemsCount: itemsCount)
+        )
+    }
 }
 
 

Sources/Grid/Grid.swift

@@ -14,10 +14,13 @@ public struct Grid<Content> : View where Content : View {
                         self.items[index]
                             .frame(
                                 width: self.style.frameWidth(at: index, with: geometry, itemsCount: self.items.count),
-                                height: self.style.frameHeight(at: index, with: geometry, itemsCount: self.items.count),
-                                alignment: Alignment(horizontal: .leading, vertical: .top)
+                                height: self.style.frameHeight(at: index, with: geometry, itemsCount: self.items.count)
                             )
+
                             .position(self.style.position(at: index, with: geometry, itemsCount: self.items.count))
+                            .anchorPreference(key: GridItemPreferences.Key.self, value: .rect(self.style.itemRect(at: index, with: geometry, itemsCount: self.items.count))) {
+                                [GridItemPreferences(index: index, bounds: $0)]
+                            }
                     }
                 }
                 .frame(

Sources/Grid/GridItemPreferences.swift

@@ -0,0 +1,15 @@
+import Foundation
+import SwiftUI
+
+public struct GridItemPreferences {
+    public struct Key: PreferenceKey {
+        public static var defaultValue: [GridItemPreferences] = []
+        
+        public static func reduce(value: inout [GridItemPreferences], nextValue: () -> [GridItemPreferences]) {
+            value.append(contentsOf: nextValue())
+        }
+    }
+    
+    public let index: Int
+    public let bounds: Anchor<CGRect>
+}

Sources/Grid/SingleColumnGridStyle.swift

@@ -12,10 +12,10 @@ public struct SingleColumnGridStyle: GridStyle {
         self.spacing = spacing
     }
 
-    public func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat? {
+    public func frameHeight(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat {
         itemHeight
     }
-    public func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat? {
+    public func frameWidth(at index: Int, with geometry: GeometryProxy, itemsCount: Int) -> CGFloat {
         geometry.size.width - (padding.leading + padding.trailing)
     }