iOS Collection View Lagging - swift

In my App I am using a CollectionView to display some Images. When I start scrolling performance is quite poor and big lags occur. I tried utilising an Image cache so the Images are not reloaded every time the cell appears. I have also tried removing the rounded edges and utilising layer.shouldRasterize. Nothing seems to help. The Images are in the Assets of the App.
let imageCache = NSCache<AnyObject, AnyObject>()
...
class MainMenuController: UIViewController, UICollectionViewDataSource, UICollectionViewDataSourcePrefetching, UICollectionViewDelegateFlowLayout {
#IBOutlet weak var collectionView: UICollectionView!
let reuseIdentifier = "cell"
override func viewDidLoad() {
super.viewDidLoad()
....
}
//Collection View
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MainMenuCell
cell.titleLabel.text = self.items[indexPath.item].getName()
cell.titleLabel.textColor = ColorInterface.sharedInstance.ultra_textcolor
if let imageFromCache = imageCache.object(forKey: items[indexPath.item].getKey() as AnyObject) as? UIImage {
cell.imageView.image = imageFromCache
}
else
{
let imageToCache = UIImage(named: items[indexPath.item].getImage())!
imageCache.setObject(imageToCache, forKey: items[indexPath.item].getKey() as AnyObject)
cell.imageView.image = imageToCache
}
cell.layer.cornerRadius = 7
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let totalHeight: CGFloat = (collectionView.frame.width / 2)
let totalWidth: CGFloat = (collectionView.frame.width / 2)
return CGSize(width: ceil(totalWidth - 5),height: ceil(totalHeight - 5))
}
func collectionView(_ collectionView: UICollectionView, prefetchItemsAt indexPaths: [IndexPath]) {
for index in indexPaths
{
if imageCache.object(forKey: items[index.item].getKey() as AnyObject) == nil
{
let imageToCache = UIImage(named: items[index.item].getImage())!
imageCache.setObject(imageToCache, forKey: items[index.item].getKey() as AnyObject)
}
}
}
}
After I scrolled to the bottom once everything is silky smooth which originally lead me to believing it is the loading of the images which is causing problems. What am I doing wrong here ?

Related

Why is my uiCollection view cell not changing based on different screen size? I'm using storyboards and Swift

just as to make it clear all other similar questions are asking for objective C or either not in storyboard hence my question is valid..
So I want to do is create a full screen image slider. Im using collection view to do it. but the outcome is not as expected especially the scrolling and the way the cell is displayed.
here is my code for collection view:
import UIKit
import Firebase
import FirebaseDatabase
import SDWebImage
class DoceFullImageVIew: UIViewController {
#IBOutlet weak var colltionView: UICollectionView!
var images = [ChudoInsta]()
// var imgArr = [ChudoInsta]()
var dbRef: DatabaseReference!
let viewImageSegueIdentifier = "doceImageSegueIdentifier"
override func viewDidLoad() {
super.viewDidLoad()
dbRef = Database.database().reference().child("wedding/doce_pics")
loadDB()
}
func loadDB(){
dbRef.observe(DataEventType.value, with: { (snapshot) in
var newImages = [ChudoInsta]()
for chudoInstaSnapshot in snapshot.children {
let chudoInstaObject = ChudoInsta(snapshot: chudoInstaSnapshot as! DataSnapshot)
newImages.append(chudoInstaObject)
}
self.images = newImages
self.colltionView.reloadData()
})
}
func printvalue() {
print("This is the doce full image firebase \(images)")
// print("This is the doce full image firebase \(images)")
}
}
extension DoceFullImageVIew: UICollectionViewDelegate, UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return images.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as? DataCollectionViewCell
let image = images[indexPath.row]
cell?.img.sd_setImage(with: URL(string: image.imageUrl), placeholderImage: UIImage(named: "image1"))
return cell!
}
}
extension DoceFullImageVIew: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
let size = UIScreen.main.bounds
return CGSize(width: size.width, height: size.height)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
//return UIEdgeInsets(0, 5, 0, 5);
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 0
}
}
Can some one point out what is wrong and why the output comes like this images chopped :
https://drive.google.com/file/d/1JzbX-B0dhuInJ_ydwFWyuYTNq6d_lZS_/view?usp=sharing
https://drive.google.com/file/d/1KdPKkcvdAR4lMEY-0nwthsFlS2OxC_Te/view?usp=sharing
and in landscape the images are chopped as well:
https://drive.google.com/file/d/1RgqUCtUL_L2Xystg1eDDm7ZMBBhqaZvj/view?usp=sharing
here are some of my story board screenshots:
https://drive.google.com/file/d/1NMzvSHfEHWil_HsMtELmU4kd2Awe4nXt/view?usp=sharing
https://drive.google.com/file/d/1Q6DiBWWXGCzZ6bVKn9dkprMeluXuuonW/view?usp=sharing
https://drive.google.com/file/d/1-CB_XtGSI_rXpqbckytGgNrdaH1upaUy/view?usp=sharing
https://drive.google.com/file/d/1r4gAV2p_VS4Ix5ht_HPQVe7Rs8LeKtpX/view?usp=sharing
my flow delegate:
https://drive.google.com/file/d/1BjIBwvTVe0Ew_MAKBpeorkowQlDdD3eT/view?usp=sharing
Im trying to achieve a fullscreen image slider with collection view(images are retrieved from firebase)

UICollectionViewLayout Not working with UIImage in Swift 5 and Xcode 11

Please check this attached code and screen short. It's work fine when I set the color of container view but when I add UIImage in cell then it's not working. I changed the imageview content mode but it's not working.
class ViewController: UIViewController {
#IBOutlet weak var segColumn: UISegmentedControl!
#IBOutlet weak var collectionView: UICollectionView!
fileprivate var items: [UIImage] = [ // My images ]
override func viewDidLoad() {
super.viewDidLoad()
self.setup()
}
}
extension ViewController: UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return items.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.imgCell.image = items[indexPath.row]
cell.imgCell.contentMode = .scaleAspectFill
cell.contentView.backgroundColor = .red
return cell
}
}
extension ViewController: UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: (collectionView.bounds.width/3 - 2), height: (collectionView.bounds.width/3))
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
return 2
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
return 2
}
}
Please try this solution. I think there are some changes from Xcode 11.
Change the CollectionView Estimate Size to None then it will work.
it is probably because the red is dominating over the image
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.imgCell.image = items[indexPath.row]
cell.imgCell.contentMode = .scaleAspectFill
cell.contentView.backgroundColor = .red
return cell
}
try:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! CollectionViewCell
cell.contentView.backgroundColor = .red
cell.imgCell.image = items[indexPath.row]
cell.imgCell.contentMode = .scaleAspectFill
return cell
}

Print image name to console from UICollectionView

I'm working with a UICollectionView where I have a UIImage with a Tap Gesture Recogniser as the cell model for my CollectionView. I also have 57 images with different names that I want to print to the console depending on which image I tap on.
Here is my code:
import UIKit
class ViewController: UIViewController {
let OLLData = OLLCases()
// MARK: - Outlets
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
// MARK: - Navigation
#IBAction func isSelected(_ sender: Any) {
print("selected \(caseName)")
}
}
//MARK: - Data source
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return OLLData.list.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
let image = OLLData.list[indexPath.item].image
let caseName = OLLData.list[indexPath.item].image
cell.label.text = caseName
cell.imageView.image = UIImage(named: image)
return cell
}
}
I then have another swift file (PhotoCell )where I have the IBOutlets for label and imageView.
What methods are there of doing this?
Thanks.
You can use UICollectionViewDelegate method to detect tap on cell but to use that first of all your UICollectionView need to confirm the delegate with your UIViewController like:
collectionView.delegate = self
in your viewDidLoad method.
then you need to replace
extension ViewController: UICollectionViewDataSource {
with
extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
and use delegate method
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
}
and you can get selected image name with
let caseName = OLLData.list[indexPath.item].image
print(caseName)
and didSelectItemAt will look like:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let caseName = OLLData.list[indexPath.item].image
print(caseName)
}
EDIT:
Your extension will look like:
extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return OLLData.list.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
let image = OLLData.list[indexPath.item].image
let caseName = OLLData.list[indexPath.item].image
cell.label.text = caseName
cell.imageView.image = UIImage(named: image)
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let caseName = OLLData.list[indexPath.item].image
print(caseName)
}
}
You should implement didSelectItemAt method, then get the cell you've selected like this:
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as! PhotoCell
print(cell.imageView)
print(cell.label)
}
Hope this help
Add an extension for UICollectionViewDelegate below the last extension in your ViewController:
extension ViewController: UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
print(OLLData.list[indexPath.item].image)
}
}

UICollectionview - blink when move item

I want to reorder my cells in my UICollectionView. But when I drop my item, the "cellForItemAt" method is called and this will cause the cell to flash (See image below).
What should I do to avoid this behavior ?
Thank you in advance for your help.
class ViewController: UIViewController {
#IBOutlet weak var collectionView: UICollectionView!
private let cellIdentifier = "cell"
private let cells = [""]
private var longPressGesture: UILongPressGestureRecognizer!
override func viewDidLoad() {
super.viewDidLoad()
longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(self.handleLongGesture(gesture:)))
collectionView.addGestureRecognizer(longPressGesture)
}
//Selectors
#objc func handleLongGesture(gesture: UILongPressGestureRecognizer) {
switch(gesture.state) {
case .began:
guard let selectedIndexPath = collectionView.indexPathForItem(at: gesture.location(in: collectionView)) else {
break
}
collectionView.beginInteractiveMovementForItem(at: selectedIndexPath)
case .changed:
collectionView.updateInteractiveMovementTargetPosition(gesture.location(in: gesture.view!))
case .ended:
collectionView.endInteractiveMovement()
default:
collectionView.cancelInteractiveMovement()
}
}
}
// MARK: - UICollectionViewDataSource
extension ViewController: UICollectionViewDataSource {
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return 10
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
return cell
}
func collectionView(_ collectionView: UICollectionView, canMoveItemAt indexPath: IndexPath) -> Bool {
return true
}
func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
}
}
// MARK: - UICollectionViewDelegateFlowLayout
extension ViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: 100, height: 100)
}
}
You need to call endInteractiveMovement in perfomBatchUpdates.
But whenever endInteractiveMovement triggered, cellForRow called. So cell will be refreshed and new cell will added(check with random color extension). To secure that, you need to save selectedCell in variable. And return that cell when endInteractiveMovement called.
Declare currentCell in ViewController
var isEnded: Bool = true
var currentCell: UICollectionViewCell? = nil
Store selected cell in variable when gesture began & call endInteractiveMovement in performBatchUpdates.
So, your handleLongGesture func look like below:
//Selectors
#objc func handleLongGesture(gesture: UILongPressGestureRecognizer) {
switch(gesture.state) {
case .began:
guard let selectedIndexPath = collectionView.indexPathForItem(at: gesture.location(in: collectionView)) else {
break
}
isEnded = false
//store selected cell in currentCell variable
currentCell = collectionView.cellForItem(at: selectedIndexPath)
collectionView.beginInteractiveMovementForItem(at: selectedIndexPath)
case .changed:
collectionView.updateInteractiveMovementTargetPosition(gesture.location(in: gesture.view!))
case .ended:
isEnded = true
collectionView.performBatchUpdates({
self.collectionView.endInteractiveMovement()
}) { (result) in
self.currentCell = nil
}
default:
isEnded = true
collectionView.cancelInteractiveMovement()
}
}
Also need to change cellForRow
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if currentCell != nil && isEnded {
return currentCell!
} else {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath)
cell.backgroundColor = .random
return cell
}
}
TIP
Use random color extension for better testing
extension UIColor {
public class var random: UIColor {
return UIColor(red: CGFloat(drand48()), green: CGFloat(drand48()), blue: CGFloat(drand48()), alpha: 1.0)
}
}
EDIT
If you have multiple sections.
Lets take array of array
var data: [[String]] = [["1","2"],
["1","2","3","4","5","6","7"],
["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15"]]
Then you need to maintain data when reordering
func collectionView(_ collectionView: UICollectionView, moveItemAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
print("\(sourceIndexPath) -> \(destinationIndexPath)")
let movedItem = data[sourceIndexPath.section][sourceIndexPath.item]
data[sourceIndexPath.section].remove(at: sourceIndexPath.item)
data[destinationIndexPath.section].insert(movedItem, at: destinationIndexPath.item)
}
You can try to call
collectionView.reloadItems(at: [sourceIndexPath, destinationIndexPath])
right after all your updates (drag and drop animation) are done.
For example call it after performBatchUpdates. It will remove blinking.

Url Image in Swift

I using the LJWebImage sample project, Which,I found from github on the following link https://github.com/likumb/LJWebImage. Project,similar to SDWebImage.I am successfully imported the sample project into my project.I am using collectionView to populating the image from plist which contain number of url links.I am trying pass the collectionView selected cellimage to my imageView but no luck so for.please someone point me the direction.my partial collectionView code below.
Thanks in Advance.
let apps: NSArray = AppInfo.appInfo()
#IBOutlet weak var imageView: UIImageView!
#IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
collectionView!.reloadData()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
// MARK: - CollectionView data source
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return apps.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath as IndexPath) as! Cell
cell.app = apps[indexPath.row] as? AppInfo
return cell
}
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
if let filePath = Bundle.main.path(forResource: "apps", ofType: "plist"),
let image = UIImage(contentsOfFile: filePath) {
imageView.contentMode = .scaleAspectFit
imageView.image = image
}
}
}
You can retrieve the corresponding app object from the data source array using the indexPath.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
guard let app = apps[indexPath.row] as? AppInfo else { return }
guard let image = UIImage(contentsOfFile: app.filePath) else { return }
imageView.contentMode = .scaleAspectFit
imageView.image = image
}
Or you could retrieve the cell using the indexPath and get the image from it's imageView.
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
guard let cell = collectionView.cellForItem(at: indexPath) as? Cell else { return }
imageView.contentMode = .scaleAspectFit
imageView.image = cell.imageView.image
}