How to add an Image to an ScrollView in Swift - ios

Question

I develop an App in Xcoode and I add an ScrollView. Now I added some little Images in a Row.
let myImages = ["BallBeispielBlau.png","BallBeispielRot.png","BallBeispielGelb.png","BallBeispielBlau.png","BallBeispielRot.png","BallBeispielGelb.png","BallBeispielBlau.png","BallBeispielRot.png","BallBeispielGelb.png"]
let imageWidth:CGFloat = 66
let imageHeight:CGFloat = 66
var xPosition:CGFloat = 0
var scrollViewSize:CGFloat=0
for image in myImages {
let myImage:UIImage = UIImage(named: image)!
let myImageView:UIImageView = UIImageView()
myImageView.image = myImage
let LongTapGestureRecognizer = UILongPressGestureRecognizer(target: self, action: "InfosZuEinemEvent:")
LongTapGestureRecognizer.minimumPressDuration = 1.0;
myImageView.addGestureRecognizer(LongTapGestureRecognizer)
myImageView.userInteractionEnabled = true
myImageView.frame.size.width = imageWidth
myImageView.frame.size.height = imageHeight
myImageView.frame.origin.x = xPosition
myImageView.frame.origin.y = 0
ScrollViewFreunde.addSubview(myImageView)
ScrollViewFreunde.showsHorizontalScrollIndicator = false
xPosition += imageWidth
scrollViewSize += imageWidth
}
ScrollViewFreunde.contentSize = CGSize(width: scrollViewSize, height: imageHeight)
That works fine but I want it that the six image so the image which come after the five image where show under the first image so in the second row. I try it with an if statement but it doesn´t work. I hope you could help me.
Thanks for help.

Answer 1

You should reeeeally use a Collection View for this. It is really easy and way better to display items in a matricial form.
However, to answer your question...
You can create a "yPosition" variable that will be incremented by imageHeight every time one image overflows the scrollView visible frame.
When this happens, xPositions goes to 0.
var yPosition = 0
for image in myImages {
let myImage:UIImage = UIImage(named: image)!
let myImageView:UIImageView = UIImageView()
myImageView.image = myImage
let LongTapGestureRecognizer = UILongPressGestureRecognizer(target: self, action: "InfosZuEinemEvent:")
LongTapGestureRecognizer.minimumPressDuration = 1.0;
myImageView.addGestureRecognizer(LongTapGestureRecognizer)
myImageView.userInteractionEnabled = true
myImageView.frame.size.width = imageWidth
myImageView.frame.size.height = imageHeight
myImageView.frame.origin.x = xPosition
myImageView.frame.origin.y = yPosition
ScrollViewFreunde.addSubview(myImageView)
ScrollViewFreunde.showsHorizontalScrollIndicator = false
xPosition += imageWidth
if xPosition + imageWidth >= view.frame.width {
xPosition = 0
yPosition += imageHeight
}
scrollViewSize += imageWidth
}

Answer 2

You should prefer collectionview instead of scrollview. Its just a suggestion.

Answer 3

I've wrote a stack view for this reason, you can download a sample project at:
https://github.com/mcmatan/StackViewWithAutoLayout
Its pretty straight forward, you just call "addSubviewWithLayout" and add your view.
The stack view will manage the scroll content size.
You can call "removeViewWithLayout" to remove a view from the stack.
Cheers