Efficiently load many views in a UIScrollView - ios

Question

I have a UIScrollView that I am trying to use as an Image Viewer. For this I have paging enabled and I add "Slides" to the view for each Image, including a UIImageView and multiple labels and buttons. This works perfectly while I only have a few Slides to show, but I will need to have more than 100 of them, and I am running into really bad performance issues.
When I present the ViewController, and therefore set up the ScrollView, I get a good 10-15s of delay. Apparently loading this many views is a little much.
So I was wondering if any of you had an idea how I could make this more efficient.
I have tried making the array of Slides in the previous VC, and passing it, instead of creating it on the spot, that helped a bit, but not enough to make it feel acceptable, especially since changing device orientation will require me to set the ScrollView up again (because the Slides height/width will be off).
Here are the functions to set up the Slides, and to present them on the ScrollView:
func createSlides() -> [Slide] {
print("creating Slides")
let Essence = EssenceModel.Essence
var ImageArray = [Slide]()
var slide: Slide
var count = 0
for img in Essence{
count += 1
slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide
slide.imageView.image = UIImage(named: img.imageUrl)
slide.isUserInteractionEnabled = true
slide.textLabel.text = img.description
slide.likeButton.imageView?.contentMode = .scaleAspectFit
slide.hero.id = img.heroID
slide.tag = count
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(showOrHide))
slide.imageView.addGestureRecognizer(tapGesture)
let dismissGesture = UITapGestureRecognizer(target: self, action: #selector(dismissVC))
slide.backButton.addGestureRecognizer(dismissGesture)
slide.backButton.isUserInteractionEnabled = true
let swipeUp = UISwipeGestureRecognizer(target: self, action: #selector(swipedUp))
swipeUp.direction = .up
slide.addGestureRecognizer(swipeUp)
let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(swipedDown))
swipeDown.direction = .down
slide.addGestureRecognizer(swipeDown)
let slideRecognizer = UITapGestureRecognizer(target: self, action: #selector(startSlideshow))
slide.slideButton.addGestureRecognizer(slideRecognizer)
slide.likeButton.imageView?.contentMode = .scaleAspectFit
slide.setupZoom()
ImageArray.append(slide)
}
count = 0
print(ImageArray.count)
return ImageArray
}
func setupSlideScrollView(slides : [Slide]) {
scrollView.subviews.forEach { $0.removeFromSuperview() }
scrollView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
scrollView.contentSize = CGSize(width: view.frame.width * CGFloat(slides.count), height: view.frame.height)
scrollView.isPagingEnabled = true
for i in 0 ..< slides.count {
slides[i].frame = CGRect(x: view.frame.width * CGFloat(i), y: 0, width: view.frame.width, height: view.frame.height)
scrollView.addSubview(slides[i])
}
}
As I said, I am looking for ways of making this more efficient in any way so I can actually use it. Preferebly I would probably just load the Slide that I am on, the next and previous one, but I have no clue how I would go about doing that.
Here is also a Screenshot, so you can see what it looks like.

Answer 1

Would be better to do something like that:
1) Add UICollectionView
2) Add UITableViewCell with restorationID
3) Add relations to your controller/view
4) Set horizontal scroll direction: https://www.screencast.com/t/wmPiwVdY
5) And after that create logic something like that:
class ImageCollectionViewVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
#IBOutlet weak var collectionView: UICollectionView!
private var images = [Slide]()
override func viewDidLoad() {
super.viewDidLoad()
collectionView.delegate = self
collectionView.dataSource = self
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return images.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
guard let imageCell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageSlideCellRestorationID", for: indexPath) as? ImageSlideCell else {
return ImageSlideCell()
}
imageCell.image.image = UIImage(named: images[indexPath.row].imageUrl)
return imageCell
}
}
class ImageSlideCell: UICollectionViewCell {
#IBOutlet weak var image: UIImageView!
}

Answer 2

Instead using uiscroll and got a performance problems. You should using uicollectionview, scroll horizontal, custom cell with one image and buttons.