Xcode - tableView renders slowly with UIImages

CodingForFun333
August 25, 2021
171 views
1 vote
2 Answers

I have a custom cell that populates the tableView with users post on the app. The user can post a text message or a text message with a uiimage.

The initial problem i had was in setting the height of the cell when i contained an images. I ended up having image sin the tableview cells with ridiculous height and the images were not loading correctly.

so i added the code below to the tableView CellforRowAt function, in order to alter the frame of the images so that the UIImages loaded in a uniform size. Although this is working perfectly now, when i scroll on the tableview it is super glitchy and slow. I assume its because of the frame being altered and it takes a while to process this new frame. Is it possible to make this more efficient and smoother?

  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
       if indexPath.section == 0 {
        let cell = tableView.dequeueReusableCell(withIdentifier: "postCell", for: indexPath) as! PostTableViewCell
            cell.set(post: posts[indexPath.row])
            cell.delegate = self
            cell.commentDelegate = self
            cell.likeDelegate = self
            cell.selectionStyle = .none
            let imageIndex = posts[indexPath.row].mediaURL
            let url = NSURL(string: imageIndex)! as URL
            if let imageData: NSData = NSData(contentsOf: url) {
               let image = UIImage(data: imageData as Data)
                let newWidth = cell.MediaPhoto.frame.width
                let scale = newWidth/image!.size.width
                let newHeight = image!.size.height * scale
                UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
                image!.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
                    let newImage = UIGraphicsGetImageFromCurrentImageContext()
                    UIGraphicsEndImageContext()
                    cell.MediaPhoto.image = newImage
                cell.MediaPhoto.contentMode = .scaleToFill
                cell.MediaPhoto.clipsToBounds = true
            }
        }
        return cell
        
    }

Answers

Chosen as BEST ANSWER

I ended up using this code to fix the image size to be 400 x 400 and it worked great. It doesn't render slowly or glitch anymore.

func set(post:Posts) {
    
    self.post = post
    
    // get PROFILE image
    let url = post.url
    profileImageView.sd_setImage(with: url, completed: nil)
    
    // get MEDIA image
    let mediaString = post.urlM.absoluteString
    if mediaString == "none" {
        MediaPhoto.image = nil
    } else {
        let mediaUrl = post.urlM
        MediaPhoto.sd_setImage(with: mediaUrl, completed: nil)
        
        //RESIZE MEDIA PHOTO
        let itemSize:CGSize = CGSize(width: 400, height: 400)
        UIGraphicsBeginImageContextWithOptions(itemSize, false, UIScreen.main.scale)
        let imageRect : CGRect = CGRect(x: 0, y: 0, width: itemSize.width, height: itemSize.height)
        MediaPhoto!.image?.draw(in: imageRect)
        MediaPhoto!.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
}

(Edit)

Try moving the work outside of the main thread.

     class PostTableViewCell: UITableViewCell {

var image: UIImage? {
    didSet {
        setNeedsDisplay()
    }
}
func set(post: Post) {

        DispatchQueue.global().async { [weak self] in
            let strongSelf = self!
            if let url = NSURL(string: strongSelf.mediaUrl) as URL?,
                let imageData: NSData = NSData(contentsOf: url) {
                
                strongSelf.image = UIImage(data: imageData as Data)
               
            
        }
    }
}

override func draw(_ rect: CGRect) {
    guard let image = image else { super.draw(rect) }
    let newWidth = MediaPhoto.frame.width
    let scale = newWidth/image.size.width
    let newHeight = image.size.height * scale
    
    UIGraphicsBeginImageContext(CGSize(width: newWidth, height: newHeight))
    image!.draw(in: CGRect(x: 0, y: 0, width: newWidth, height: newHeight))
   
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    MediaPhoto.image = newImage
    MediaPhoto.contentMode = .scaleToFill
    MediaPhoto.clipsToBounds = true
}

}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

let cell = tableView.dequeueReusableCell(withIdentifier: "postCell", for: indexPath) as! PostTableViewCell

if indexPath.section == 0 {
    cell.set(post: posts[indexPath.row])
    cell.delegate = self
    cell.commentDelegate = self
    cell.likeDelegate = self
    cell.selectionStyle = .none
}
return cell

}

Please signup or login to give your own answer.

Click here to cancel reply.

Xcode – tableView renders slowly with UIImages

Answers