Pinterest Layout Programmatically

Question

I am trying to create a pinterest style layout programmatically. I'm using this project as a reference and trying to transition it. I'm trying to get rid of the storyboard and have it all run programmatically.

I know I have to change the code to the App delegate and the collection view cell.

The code for the app delegate is:

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

func application(_ application: UIApplication, 
didFinishLaunchingWithOptions launchOptions: 
[UIApplicationLaunchOptionsKey: Any]?) -> Bool {
return true
  }
}

I think I'm to change the code to this:

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

var window: UIWindow?

func application(_ application: UIApplication, 
didFinishLaunchingWithOptions launchOptions: 
[UIApplicationLaunchOptionsKey: Any]?) -> Bool {

window = UIWindow(frame: UIScreen.main.bounds)
window?.makeKeyAndVisible()

window?.rootViewController = PhotoStreamViewController()

return true
  }
}

The other area I believe I need to change is the collection view cell. The current code is:

class AnnotatedPhotoCell: UICollectionViewCell {

@IBOutlet fileprivate weak var imageView: UIImageView!
@IBOutlet fileprivate weak var imageViewHeightLayoutConstraint: 
NSLayoutConstraint!
@IBOutlet fileprivate weak var captionLabel: UILabel!
@IBOutlet fileprivate weak var commentLabel: UILabel!

var photo: Photo? {
didSet {
  if let photo = photo {
    imageView.image = photo.image
    captionLabel.text = photo.caption
    commentLabel.text = photo.comment
      }
    }
  }

  override func apply(_ layoutAttributes: 
UICollectionViewLayoutAttributes) {
super.apply(layoutAttributes)

if let attributes = layoutAttributes as? PinterestLayoutAttributes {
  imageViewHeightLayoutConstraint.constant = attributes.photoHeight
    }
  } 
}

I thought this code would work, however I have been unsuccess with getting the app to run:

class AnnotatedPhotoCell: UICollectionViewCell {

let roundedCornersView: UIView = {
    let view = UIView()
    view.backgroundColor = UIColor.white
    view.translatesAutoresizingMaskIntoConstraints = false
    view.layer.cornerRadius = 5
    view.layer.masksToBounds = true
    return view
}()

var imageView: UIImageView!
var imageViewHeightLayoutConstraint: NSLayoutConstraint!
var captionLabel: UILabel!
var commentLabel: UILabel!

var photo: Photo? {
    didSet {

        addSubview(roundedCornersView)
        roundedCornersView.addSubview(imageView)
        roundedCornersView.addSubview(captionLabel)
        roundedCornersView.addSubview(commentLabel)

        if let photo = photo {
            imageView.image = photo.image
            captionLabel.text = photo.caption
            commentLabel.text = photo.comment
        }

        captionLabel.heightAnchor.constraint(equalToConstant: 17).isActive = true
        roundedCornersView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        roundedCornersView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        roundedCornersView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
        roundedCornersView.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true

        imageView.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
        imageView.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
        imageView.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
        captionLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 4).isActive = true
        captionLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 4).isActive = true
        captionLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -4).isActive = true
        commentLabel.leftAnchor.constraint(equalTo: self.leftAnchor, constant: 4).isActive = true
        commentLabel.rightAnchor.constraint(equalTo: self.rightAnchor, constant: -4).isActive = true
        commentLabel.topAnchor.constraint(equalTo: captionLabel.bottomAnchor).isActive = true

        imageViewHeightLayoutConstraint = imageView.heightAnchor.constraint(equalToConstant: 120)
        imageViewHeightLayoutConstraint?.isActive = true
    }
}

override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes!) {
    super.apply(layoutAttributes)
    if let attributes = layoutAttributes as? PinterestLayoutAttributes {
        imageViewHeightLayoutConstraint.constant = attributes.photoHeight
    }
}
}

I'd appreciate it if you could help me figure this one out. Not sure where I'm going wrong.

Thanks

Pinterest Layout Programmatically

0 Answers0