{"id":21373860,"url":"https://github.com/MagicLab-team/PinterestLayout","last_synced_at":"2025-07-13T08:31:26.244Z","repository":{"id":62450751,"uuid":"96210195","full_name":"MagicLab-team/PinterestLayout","owner":"MagicLab-team","description":"Custom collection view layout inspired by Pinterest layout. Written in Swift.","archived":false,"fork":false,"pushed_at":"2020-04-08T08:59:25.000Z","size":18788,"stargazers_count":251,"open_issues_count":8,"forks_count":55,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-10-31T15:50:28.015Z","etag":null,"topics":["collectionview","collectionviewlayout","custom","customlayout","ios","layout","pinterest","pinterest-like","pinterestlayout","swift"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MagicLab-team.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-04T11:19:31.000Z","updated_at":"2024-09-28T12:27:11.000Z","dependencies_parsed_at":"2022-11-01T23:46:05.906Z","dependency_job_id":null,"html_url":"https://github.com/MagicLab-team/PinterestLayout","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicLab-team%2FPinterestLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicLab-team%2FPinterestLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicLab-team%2FPinterestLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MagicLab-team%2FPinterestLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MagicLab-team","download_url":"https://codeload.github.com/MagicLab-team/PinterestLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225868401,"owners_count":17537026,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["collectionview","collectionviewlayout","custom","customlayout","ios","layout","pinterest","pinterest-like","pinterestlayout","swift"],"created_at":"2024-11-22T08:29:33.659Z","updated_at":"2024-11-22T08:29:52.843Z","avatar_url":"https://github.com/MagicLab-team.png","language":"Swift","funding_links":[],"categories":["OOM-Leaks-Crash"],"sub_categories":["FlowLayout"],"readme":"# PinterestLayout\n\nCustom collection view layout with different image and text sizes. \n\n\n|             PinterestVC         |         Custom Cell          |\n|---------------------------------|------------------------------|\n|![Demo](https://github.com/MagicLab-team/PinterestLayout/blob/master/PinterestLayoutExample/DemoAssets/Demo_1.gif)|![Demo](https://github.com/MagicLab-team/PinterestLayout/blob/master/PinterestLayoutExample/DemoAssets/Demo_2.gif)|\n\n## Contents\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Tips](#tips)\n- [Contact us](#contact-us)\n- [License](#license)\n\n\n## Requirements\n\n- iOS 8.0+\n- Swift 3.0+\n\n## Installation\n\n### CocoaPods\n\n[CocoaPods](http://cocoapods.org) is a dependency manager for Cocoa projects. You can install it with the following command:\n\n```bash\n$ gem install cocoapods\n```\n\n\u003e CocoaPods 1.1.0+ is required to build Reusable 1.0.0+.\n\nTo integrate Reusable into your Xcode project using CocoaPods, specify it in your `Podfile`:\n\n```ruby\nsource 'https://github.com/CocoaPods/Specs.git'\nplatform :ios, '8.0'\nuse_frameworks!\n\ntarget '\u003cYour Target Name\u003e' do\n    pod 'PinterestLayout'\nend\n```\n\nThen, run the following command:\n\n```bash\n$ pod install\n```\n\n## Usage\n\n### PinterestVC subclass\n\n- All you need to do is to sublcass from PinterestVC and provide items to be shown.\n- PinterestVC will calculate image and text sizes.\n\n```swift\nimport UIKit\nimport PinterestLayout\n\nclass MyPinterestVC: PinterestVC {\n    \n    override public func viewDidLoad() {\n        super.viewDidLoad()\n        \n        let text = \"Some text. Some text. Some text. Some text.\"\n        \n        items = [\n            PinterestItem(image: UIImage(named: \"new_york\"), text: text),\n            PinterestItem(image: UIImage(named: \"bigben_river\"), text: text),\n            PinterestItem(image: UIImage(named: \"dubai\"), text: text),\n            PinterestItem(image: UIImage(named: \"4\"), text: text),\n            PinterestItem(image: UIImage(named: \"tiger\"), text: text)\n        ]\n    }\n}\n```\n\n### Using custom cell\n\n0 - Import PinterestLayout\n```swift\nimport PinterestLayout\n```\n\n1 - Set PinterestLayout to your collection view.\n```swift\nlet layout = PinterestLayout()\ncollectionView.collectionViewLayout = layout\n```\n\n2 - Setup layout \n```swift\nlayout.delegate = self\nlayout.cellPadding = 5\nlayout.numberOfColumns = 2\n```\n\n3 - Implement methods of [PinterestLayoutDelegate](https://github.com/MagicLab-team/PinterestLayout/blob/master/PinterestLayout/PinterestLayoutDelegate.swift)\n```swift \n/**\nHeight for image view in cell.\n     \n@param collectionView - collectionView\n@param indexPath - index path for cell\n     \nReturns height of image view.\n*/\nfunc collectionView(collectionView: UICollectionView,\n                    heightForImageAtIndexPath indexPath: IndexPath,\n                    withWidth: CGFloat) -\u003e CGFloat\n    \n/**\nHeight for annotation view (label) in cell.\n     \n@param collectionView - collectionView\n@param indexPath - index path for cell\n     \nReturns height of annotation view.\n*/\nfunc collectionView(collectionView: UICollectionView,\n                    heightForAnnotationAtIndexPath indexPath: IndexPath,\n                    withWidth: CGFloat) -\u003e CGFloat\n```\n\n- PinterestLayout provides public API to easily calculate the best imageview and text heigths based on available width. \n\n```swift\npublic extension UIImage {\n    /**\n     Calculates the best height of the image for available width.\n     */\n    public func height(forWidth width: CGFloat) -\u003e CGFloat\n//...\npublic extension String {\n    /**\n     Calculates the best height of the text for available width and font used.\n     */\n    public func heightForWidth(width: CGFloat, font: UIFont) -\u003e CGFloat \n```\n- So implementation of PinterestLayoutDelegate might be:\n```swift\nextension CustomCollectionVC: PinterestLayoutDelegate {\n    \n    func collectionView(collectionView: UICollectionView,\n                        heightForImageAtIndexPath indexPath: IndexPath,\n                        withWidth: CGFloat) -\u003e CGFloat {\n        let image = images[indexPath.item]\n        \n        return image.height(forWidth: withWidth)\n    }\n    \n    func collectionView(collectionView: UICollectionView,\n                        heightForAnnotationAtIndexPath indexPath: IndexPath,\n                        withWidth: CGFloat) -\u003e CGFloat {\n        let textFont = UIFont(name: \"Arial-ItalicMT\", size: 11)!                \n        return \"Some text\".heightForWidth(width: withWidth, font: textFont)\n    }\n}\n```\n\n4 - Create custom cell and apply [PinterestLayoutAttributes](https://github.com/MagicLab-team/PinterestLayout/blob/master/PinterestLayout/PinterestLayoutAttributes.swift)\n- Example is [here](https://github.com/MagicLab-team/PinterestLayout/blob/master/PinterestLayoutExample/CollectionViewCell.swift)\n```swift\nclass CollectionViewCell: UICollectionViewCell {\n//...\noverride func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {\n        super.apply(layoutAttributes)\n        if let attributes = layoutAttributes as? PinterestLayoutAttributes {\n            //change image view height by changing its constraint\n            imageViewHeightLayoutConstraint.constant = attributes.imageHeight\n        }\n    }\n}\n```\n\n## Tips\n\n### Headers/Footers\n\nPinterestLayout fully supports collection view headers and footers. So you can have many sections.\n\n### When you load data from service \n\nIn case you load data asynchronously please follow next steps:\n\n1. Do not use PinterestVC as parent class to your view controller. Use [custom cell approach](#using-custom-cell).\n2. Make sure server returns image sorce with its sizes (height and width)\n```json\n{\n    \"src\": \"/upload/resize_cache/iblock/8e7/204_265_2/8e7f1f04d5e835f596ef33da74946847.jpg\",\n    \"width\": 204,\n    \"height\": 265\n}\n```\n3. when data is loaded invalidate layout as well as reload data on collection view.\n```swift\ncollectionView.collectionViewLayout.invalidateLayout()\ncollectionView.reloadData()\n```\n\n## Contact us\n\nContact our team on email - roman.sorochak@gmail.com\n\n\n## License\n\nPinterestLayout is released under the MIT license. See [LICENSE](https://github.com/MagicLab-team/PinterestLayout/blob/master/LICENSE) for details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMagicLab-team%2FPinterestLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMagicLab-team%2FPinterestLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMagicLab-team%2FPinterestLayout/lists"}