PinterestLayout

Custom collection view layout with different image and text sizes.

PinterestVC	Custom Cell

Requirements
Installation
Usage
Tips
Contact us
License

Requirements

iOS 8.0+
Swift 3.0+

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

CocoaPods 1.1.0+ is required to build Reusable 1.0.0+.

To integrate Reusable into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'PinterestLayout'
end

Then, run the following command:

$ pod install

Usage

PinterestVC subclass

All you need to do is to sublcass from PinterestVC and provide items to be shown.
PinterestVC will calculate image and text sizes.

import UIKit
import PinterestLayout

class MyPinterestVC: PinterestVC {
    
    override public func viewDidLoad() {
        super.viewDidLoad()
        
        let text = "Some text. Some text. Some text. Some text."
        
        items = [
            PinterestItem(image: UIImage(named: "new_york"), text: text),
            PinterestItem(image: UIImage(named: "bigben_river"), text: text),
            PinterestItem(image: UIImage(named: "dubai"), text: text),
            PinterestItem(image: UIImage(named: "4"), text: text),
            PinterestItem(image: UIImage(named: "tiger"), text: text)
        ]
    }
}

Using custom cell

0 - Import PinterestLayout

import PinterestLayout

1 - Set PinterestLayout to your collection view.

let layout = PinterestLayout()
collectionView.collectionViewLayout = layout

2 - Setup layout

layout.delegate = self
layout.cellPadding = 5
layout.numberOfColumns = 2

3 - Implement methods of PinterestLayoutDelegate

/**
Height for image view in cell.
     
@param collectionView - collectionView
@param indexPath - index path for cell
     
Returns height of image view.
*/
func collectionView(collectionView: UICollectionView,
                    heightForImageAtIndexPath indexPath: IndexPath,
                    withWidth: CGFloat) -> CGFloat
    
/**
Height for annotation view (label) in cell.
     
@param collectionView - collectionView
@param indexPath - index path for cell
     
Returns height of annotation view.
*/
func collectionView(collectionView: UICollectionView,
                    heightForAnnotationAtIndexPath indexPath: IndexPath,
                    withWidth: CGFloat) -> CGFloat

PinterestLayout provides public API to easily calculate the best imageview and text heigths based on available width.

public extension UIImage {
    /**
     Calculates the best height of the image for available width.
     */
    public func height(forWidth width: CGFloat) -> CGFloat
//...
public extension String {
    /**
     Calculates the best height of the text for available width and font used.
     */
    public func heightForWidth(width: CGFloat, font: UIFont) -> CGFloat

So implementation of PinterestLayoutDelegate might be:

extension CustomCollectionVC: PinterestLayoutDelegate {
    
    func collectionView(collectionView: UICollectionView,
                        heightForImageAtIndexPath indexPath: IndexPath,
                        withWidth: CGFloat) -> CGFloat {
        let image = images[indexPath.item]
        
        return image.height(forWidth: withWidth)
    }
    
    func collectionView(collectionView: UICollectionView,
                        heightForAnnotationAtIndexPath indexPath: IndexPath,
                        withWidth: CGFloat) -> CGFloat {
        let textFont = UIFont(name: "Arial-ItalicMT", size: 11)!                
        return "Some text".heightForWidth(width: withWidth, font: textFont)
    }
}

4 - Create custom cell and apply PinterestLayoutAttributes

Example is here

class CollectionViewCell: UICollectionViewCell {
//...
override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        super.apply(layoutAttributes)
        if let attributes = layoutAttributes as? PinterestLayoutAttributes {
            //change image view height by changing its constraint
            imageViewHeightLayoutConstraint.constant = attributes.imageHeight
        }
    }
}

Tips

Headers/Footers

PinterestLayout fully supports collection view headers and footers. So you can have many sections.

When you load data from service

In case you load data asynchronously please follow next steps:

Do not use PinterestVC as parent class to your view controller. Use custom cell approach.
Make sure server returns image sorce with its sizes (height and width)

{
    "src": "/upload/resize_cache/iblock/8e7/204_265_2/8e7f1f04d5e835f596ef33da74946847.jpg",
    "width": 204,
    "height": 265
}

when data is loaded invalidate layout as well as reload data on collection view.

collectionView.collectionViewLayout.invalidateLayout()
collectionView.reloadData()

Contact us

Contact our team on email - roman.sorochak@gmail.com

License

PinterestLayout is released under the MIT license. See LICENSE for details.

buithuyen/PinterestLayout