talksik/nirvana-ios
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

scrolling automatically to a particular item with scrollview reader

Browse Source
This commit is contained in:
talksik
2021-12-16 16:44:53 -08:00
parent 595e49983a
commit 23e1368af4
1 changed files with 57 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nirvana-ios/v2/InnerCircle/InnerCircleView.swift
+57 -50
View File
@@ -66,6 +66,7 @@ struct InnerCircleView: View {
private static let spacingBetweenColumns: CGFloat = 16 private static let spacingBetweenColumns: CGFloat = 16
private static let spacingBetweenRows: CGFloat = 16 private static let spacingBetweenRows: CGFloat = 16
private static let totalColumns: Int = 10 private static let totalColumns: Int = 10
private var numberOfItems: Int = 59
let frameSize: CGPoint = CGPoint(x: UIScreen.main.bounds.size.width*0.5,y: UIScreen.main.bounds.size.height*0.5) let frameSize: CGPoint = CGPoint(x: UIScreen.main.bounds.size.width*0.5,y: UIScreen.main.bounds.size.height*0.5)
@@ -87,59 +88,65 @@ struct InnerCircleView: View {
// .frame(maxWidth: .infinity) // .frame(maxWidth: .infinity)
// .blur(radius: 8) // .blur(radius: 8)
ScrollView([.horizontal, .vertical], showsIndicators: false) { ScrollViewReader {scrollReaderValue in
LazyVGrid( ScrollView([.horizontal, .vertical], showsIndicators: false) {
columns: gridItems, LazyVGrid(
alignment: .center, columns: gridItems,
spacing: Self.spacingBetweenRows alignment: .center,
) { spacing: Self.spacingBetweenRows
) {
ForEach(1..<60) { value in
GeometryReader {gridProxy in ForEach(1..<60) { value in
let posRelToGrid = gridProxy.frame(in: .global) // relative to the entire lazygrid GeometryReader {gridProxy in
let posRelToGrid = gridProxy.frame(in: .global) // relative to the entire lazygrid
Image("Artboards_Diversity_Avatars_by_Netguru-\(value)")
.resizable() Image("Artboards_Diversity_Avatars_by_Netguru-\(value)")
.scaledToFit() .resizable()
.background(Color.white.opacity(0.5)) .scaledToFit()
.cornerRadius(100) .background(Color.white.opacity(0.5))
.shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 20) .cornerRadius(100)
.scaleEffect( .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 20)
scale( // .scaleEffect(
x: isEvenRow(value) ? gridProxy.frame(in: .global).midX + gridProxy.size.width/2 : // scale(
gridProxy.frame(in: .global).midX, // x: isEvenRow(value) ? gridProxy.frame(in: .global).midX + gridProxy.size.width/2 :
y: gridProxy.frame(in: .global).midY, // gridProxy.frame(in: .global).midX,
value: value%43 // y: gridProxy.frame(in: .global).midY,
// value: value%43
// )
// )
.offset(
x: honeycombOffSetX(value),
y: 0
) )
) .onTapGesture {
.offset( self.selectedUserIndex = value
x: honeycombOffSetX(value),
y: 0 print("the selected item is: \(value)")
)
.onTapGesture { let rowNumber = value / Self.totalColumns // 10 / 10
self.selectedUserIndex = value
print("the rownumber is: \(rowNumber)")
print("the selected item is: \(value)")
// make every even row have the honeycomb offset
let rowNumber = value / Self.totalColumns // 10 / 10 if rowNumber % 2 == 0 {
print("the offset is \(Self.size / 2 + Self.spacingBetweenColumns / 2 )") // account for the column spacing from before
print("the rownumber is: \(rowNumber)") } else {
print("there is no offset")
// make every even row have the honeycomb offset }
if rowNumber % 2 == 0 {
print("the offset is \(Self.size / 2 + Self.spacingBetweenColumns / 2 )") // account for the column spacing from before
} else {
print("there is no offset")
} }
} .animation(Animation.spring(), value: selectedUserIndex)
.animation(Animation.spring(), value: selectedUserIndex) } // geometry reader
.id(value) // id for scrollviewreader
.frame(height: Self.size)
} }
.frame(height: Self.size) } // lazyvgrid
} .padding(.trailing, Self.size / 2 + Self.spacingBetweenColumns / 2)
} // lazyvgrid }// scrollview
.padding(.trailing, Self.size / 2 + Self.spacingBetweenColumns / 2) .onAppear {
} // scrollview scrollReaderValue.scrollTo(self.numberOfItems / 2)
}
} // scrollview reader
// navigation/footer // navigation/footer