{"id":13318133,"url":"https://github.com/Mindinventory/BubbleCollectionViewLayout","last_synced_at":"2025-03-11T01:31:23.631Z","repository":{"id":38375293,"uuid":"113303901","full_name":"Mindinventory/BubbleCollectionViewLayout","owner":"Mindinventory","description":"Create bubble layout of UICollectionView using custom layout","archived":false,"fork":false,"pushed_at":"2023-04-20T09:50:56.000Z","size":465,"stargazers_count":115,"open_issues_count":0,"forks_count":54,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-02T16:02:22.646Z","etag":null,"topics":["bubblelayout","objective-c","swift","uicollectionview","uicollectionviewlayout"],"latest_commit_sha":null,"homepage":"https://www.mindinventory.com/iphone-application-development.php","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/Mindinventory.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-12-06T10:45:28.000Z","updated_at":"2025-01-06T09:19:49.000Z","dependencies_parsed_at":"2023-01-19T16:03:54.630Z","dependency_job_id":null,"html_url":"https://github.com/Mindinventory/BubbleCollectionViewLayout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FBubbleCollectionViewLayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FBubbleCollectionViewLayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FBubbleCollectionViewLayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FBubbleCollectionViewLayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mindinventory","download_url":"https://codeload.github.com/Mindinventory/BubbleCollectionViewLayout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242955384,"owners_count":20212317,"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":["bubblelayout","objective-c","swift","uicollectionview","uicollectionviewlayout"],"created_at":"2024-07-29T18:29:38.187Z","updated_at":"2025-03-11T01:31:23.604Z","avatar_url":"https://github.com/Mindinventory.png","language":"Swift","readme":"# BubbleCollectionViewLayout\nUsed to get layout like following screens in UICollectionView using custom layout.\n\n\n![bubble_landscape](https://user-images.githubusercontent.com/84714866/176373657-19d4f9e2-131e-48f5-9f2c-77a370808c03.png)\n![bubble_portrait](https://user-images.githubusercontent.com/84714866/176371515-989f8bc7-6e45-4d6f-87a1-c3d0e87fa803.png)\n![Simulator Screen Shot - iPhone 14 Pro - 2023-04-20 at 15 11 17](https://user-images.githubusercontent.com/42262083/233327928-31ac781d-adb1-427f-82b5-97fc41e76577.png)\n\n# Requirements\nMinimum OS 8.1 and later\n\n# Manual Installation\nYou can directly add Below the source files from Class folder to your project.\n\n# Objective C\n1) MIBubbleCollectionViewCell.h\n2) MIBubbleCollectionViewCell.m\n3) MICollectionViewBubbleLayout.h\n4) MICollectionViewBubbleLayout.m\n# Swift\n1) MIBubbleCollectionViewCell.swift\n2) MICollectionViewBubbleLayout.swift\n3) RoundImageView.swift\n4) HeaderView.swift\n\n# Introduce\nMICollectionViewBubbleLayout is subclass of UICollectionViewFlowLayout with the custom layout.\n\n# Usage\n\n- The easy way is to use UICollectionViewFlowLayout as it is. You can also subclass it if you intend to change the default behaviour.\n- Either use it as a list to select the different tags and it's values or add the tags or value and show it in a list\n\n\nHere is the instruction of how to use UICollectionViewFlowLayout in the Storyboard.\n\n1) Add native UICollectionView to the storyboard, establish relationships with its view controllers.\n2) Add UICollectionViewCell in the UICollectionView to the storyboard.\n3)Chose the MIBubbleCollectionViewCell as a custom class inside the UICollectionViewCell to the storyboard.\nConfiguration for change DefaultInterItemSpacing \u0026 DefaultLineSpacing of collecttionview cell you just have to change the value of below two constant in MICollectionViewBubbleLayout.h\n\n#define kDefaultInterItemSpacing    5.0f\n\n#define kDefaultLineSpacing         5.0f\n\n### Objective C -\n1. Add \"MICollectionViewBubbleLayout\" ObjectiveC files to your project.\n\n2. Conform delegate \"MICollectionViewBubbleLayoutDelegate\" to your class.\n\n3. Set bubble layout in collectionview. \n\n        MICollectionViewBubbleLayout *layout = [[MICollectionViewBubbleLayout alloc] initWithDelegate:self];\n        [layout setMinimumLineSpacing:6.0f];\n        [layout setMinimumInteritemSpacing:6.0f];\n        [collVData setCollectionViewLayout:layout];\n    \n4. Implement MICollectionViewBubbleLayoutDelegate method to return size according to your text content.\n\n        - (CGSize)collectionView:(UICollectionView *)collectionView itemSizeAtIndexPath:(NSIndexPath *)indexPath {\n    \n            NSString *title = arrData[indexPath.row];\n            CGSize size = [title sizeWithAttributes:@{NSFontAttributeName:[UIFont fontWithName:@\"HelveticaNeue-Bold\" size:15]}];\n            size.width = ceilf(size.width + CTitlePadding * 2);\n            size.height = 24;\n    \n            //...Checking if item width is greater than collection view width then set item width == collection view width.\n            if (size.width \u003e collectionView.frame.size.width)\n                size.width = collectionView.frame.size.width;\n             return size;\n        }\n    \n    \n### Swift -\n1. Add \"MICollectionViewBubbleLayout\" Swift file to your project.\n\n2. Conform delegate \"MICollectionViewBubbleLayoutDelegate\" to your class.\n\n3. Set bubble layout in collectionview.\n\n        let bubbleLayout = MICollectionViewBubbleLayout()\n        bubbleLayout.minimumLineSpacing = 6.0\n        bubbleLayout.minimumInteritemSpacing = 0\n        bubbleLayout.horizontalAlignment = .leading\n        collVData.setCollectionViewLayout(bubbleLayout, animated: false)\n        bubbleLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize\n\n4. Implement MICollectionViewBubbleLayoutDelegate method to return size according to your text content.\n\n        func collectionView(_ collectionView:UICollectionView, itemSizeAt indexPath:NSIndexPath) -\u003e CGSize\n        {\n            let title = arrData[indexPath.row].name\n            var size = title.size(withAttributes: [NSAttributedString.Key.font: UIFont(name: \"HelveticaNeue-Bold\", size: 15)!])\n            let closeButtonWidth = 20.0\n            let imageWidth = 20.0\n            let spacing = 18.0\n            let totalWidth = Float(size.width + closeButtonWidth + imageWidth + spacing + CGFloat(kItemPadding * 2))\n            size.width = CGFloat(ceilf(totalWidth))\n            size.height = 40\n        \n            //...Checking if item width is greater than collection view width then set item width == collection view width.\n            if size.width \u003e collectionView.frame.size.width {\n                size.width = collectionView.frame.size.width\n            }\n        \n            return size;\n        }\n        \n        \n5. If require to add header view \n\n        func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -\u003e             UICollectionReusableView {\n                switch kind {\n                case UICollectionView.elementKindSectionHeader:\n            \n                let headerView = collVData.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: \"HeaderView\", for: indexPath) as! HeaderView\n                headerView.lblTitleText.text = arrData[indexPath.section].title\n                headerView.lblTitleText.sizeToFit()\n                return headerView\n            \n                default:\n                  return UICollectionReusableView()\n            \n                }\n        }\n\n\n\n# LICENSE!\n\nBubbleCollectionViewLayout is [MIT-licensed](https://github.com/mindinventory/BubbleCollectionViewLayout/blob/master/LICENSE).\n\n## Let us know!\nWe’d be really happy if you send us links to your projects where you use our component. Just send an email to sales@mindinventory.com And do let us know if you have any questions or suggestion regarding our work.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMindinventory%2FBubbleCollectionViewLayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMindinventory%2FBubbleCollectionViewLayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMindinventory%2FBubbleCollectionViewLayout/lists"}