Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – tableView renders slowly with UIImages

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
        
    }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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()
    }
}

  2. 0

    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

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search