Swift Calculate Content Offset of item moving across visible screen - ios

Question

I am re-creating the iPhone App Switcher page where the app's tab view size is based off the location of it on the visual screen (bigger on the right and smaller on the left). I I have an array of views within a scroll view. I want to set the size of each view (tab) based on the location / content offset of the view as it scrolls horizontally across the visible screen x-axis.
Here's my code in scrollViewDidScroll:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
tabViews.forEach { (tabView) in // tabViews: [UIView]
let screenWidth = UIScreen.main.bounds.width
// This should be a value between 0 and 1
var screenOffsetX = tabView.convert(CGPoint(x: tabView.frame.minX, y: 0),to: view).x
let maxValue: CGFloat = screenWidth / 8 // Max value is 1 + 1/8 scale size
if screenOffsetX > maxValue { // Set max scale
screenOffsetX = min(screenOffsetX, maxValue)
}
let minValue: CGFloat = 0
if screenOffsetX < minValue { // Set min scale
screenOffsetX = max(screenOffsetX, minValue)
}
let scaleAmount: CGFloat = 1 + (screenOffsetX / screenWidth)
let scaleTransform = CGAffineTransform(scaleX: scaleAmount, y: scaleAmount)
tabView.transform = scaleTransform
}
}
I think the math is off. I don't think the abcd.convert(point: ) is returning the correct content offset on the visual screen. Here's an image of the scroll view with views (tabs):
Each view should be slightly bigger on the right side of the screen and smaller on the left.
Any ideas?

Answer 1

tabView.convert won't return values between 0...1 for sure - it just translates a point to a different view coordinates.
Also it should be scrollView.convert, not tabView.convert.
Those checks can be simplified:
if screenOffsetX > maxValue { // Set max scale
screenOffsetX = min(screenOffsetX, maxValue)
}
There is no point of doing min after you already confirmed that maxValue is smaller. You either do:
if screenOffsetX > maxValue { // Set max scale
screenOffsetX = maxValue
}
or
screenOffsetX = min(screenOffsetX, maxValue)
I am not sure what is the usage in your code for maxValue and minValue, but if you want to scale things based on their position, I would suggest doing this:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
tabViews.forEach { tabView in // tabViews: [UIView]
let screenWidth = UIScreen.main.bounds.width
var screenOffsetX = scrollView.convert(CGPoint(x: tabView.frame.minX, y: 0), to: view).x
var screenOffsetPercentage = screenOffsetX / screenWidth
let minValue: CGFloat = 0.5
let maxValue: CGFloat = 1
let scaleAmount = minValue + (maxValue - minValue) * screenOffsetPercentage
let scaleTransform = CGAffineTransform(scaleX: scaleAmount, y: scaleAmount)
tabView.transform = scaleTransform
}
}
You will have to adapt it to your idea, but as a start it scales from 1.0 scale at right side, to 0.5 scale at the left side.
Results looks like: https://media.giphy.com/media/m5KSgIInJmGjEHLZXb/giphy.gif