![\"[object](\"\/\/images.ctfassets.net\/o6514hijae09\/7bCB57Udn1acgUWo4emevC\/7c7bc6c583a4a1811fe5e5d048f7ef51\/Video1.webp\" "\\"[object")
<\/figure>\n\n\n\nWhat is UICollectionViewCompositionalLayout?<\/h3>\n\n\n\n
We couldn\u2019t move forward with the gesture issues in SwiftUI ScrollView\u201a so we explored using UICollectionView.<\/p>\n\n\n\n
At WWDC 2019<\/b><\/a>\u201a Apple introduced a simple and powerful API for building complex layouts. UICollectionViewCompositionalLayout<\/b><\/a> was made to simplify the collection view layouts using a declarative way without the need for nested collection views to maximise customization. I\u2019m not going to talk about UICollectionView in detail\u201a but here are some helpful links:<\/p>\n\n\n\n https:\/\/developer.apple.com\/documentation\/uikit\/uicollectionview<\/a>https:\/\/www.kodeco.com\/18895088-uicollectionview-tutorial-getting-started<\/a><\/p>\n\n\n\n To build a similar layout using a CollectionView\u201a we would have had vertical scrolling sections with a horizontal UICollectionView in each section. Here\u2019s the interesting part the UICollectionViewCompositionalLayout<\/b><\/a> lets you build the layout without adding nested UICollectionViews. It does that by introducing Groups.<\/p>\n\n\n\n NSCollectionLayoutGroup<\/b><\/a> is an additional layer between sections and items. It determines how the items in a collection view lay out in relation to each other Horizontal\u201a vertical or custom.Each group specifies its own size in terms of a width dimension and a height dimension. Groups can express their dimensions relative to their container\u201a as an absolute value\u201a or as an estimated value that might change at runtime\u201a like in response to a change in system font size.Because a group is a subclass of NSCollectionLayoutItem<\/b><\/a>\u201a it behaves like an item. You can combine a group with other items and groups into more complex layouts.<\/p>\n\n\n\n Enough of the theoretical part\u201a let\u2019s see how we can achieve the behaviour we want with the help of the layout.<\/p>\n\n\n\n Let\u2019s define our item\u201a we want our item to have same width and height as the containing Group. So we provide it as .fractionalWidth(1.0)<\/i><\/b> <\/b>and .fractionalHeight(1.0)<\/i><\/b>. You can also provide the absolute<\/b><\/a> or estimated<\/b><\/a> size of the item.<\/p>\n\n\n\n Next\u201a we define a Group Size. For the width of the group we provide it as a fraction value of 0.90 with respect to the section. Since we want the item to fill 90% of the width of the section so it makes the last and next item slightly visible the item inside the group will fill the group completely so we don\u2019t have to make any changes there.We provide an absolute height for the group\u201a it can be anything but we\u2019d like the item to have a square appearance so provided it with height equal to the screen width minus the left and right margins.<\/p>\n\n\n\n To define a group we use horizontal(layoutSize:repeatingSubitem:count:)<\/b><\/a>\u201a<\/b> pretty straightforward\u201a we want our group to be horizontal and it will have one item.<\/p>\n\n\n\n Next we create our section with the group and initialise our layout with the section<\/p>\n\n\n\n Now that we know how sections and groups work\u201a let\u2019s go ahead and put it together. We\u2019ll create a static var in extension of UICollectionViewCompositionalLayout\u201a horizontalPagingLayout<\/b><\/p>\n\n\n\n Let\u2019s setup our model\u201a we\u2019re going to use images from our asset library and will put that in a Section class and make an array of Section objects. Also\u201a going to create a custom UICollectionViewCell that has an imageView and property named image which when set will set the image of UIImageView.<\/p>\n\n\n\n After that we\u2019ll setup our ViewController with a collectionView.<\/p>\n\n\n\n We\u2019re almost done\u201a let\u2019s see how it looks.<\/p>\n\n\n\n It loads all the items but all items are appearing vertically. To change that we need set the property of section orthogonalScrollingBehaviour<\/b><\/a> to .groupPagingCentered<\/i><\/b> which will make the items in section scroll perpendicular to the scroll direction of CollectionView and its going to centre the element in the middle of screen. It looks much better now. Let\u2019s set some spacings on group and section so there\u2019s spacing between them.We\u2019re going to use contentInsets property on group and section to get the spacing.<\/p>\n\n\n\nWhat is a Group?<\/h3>\n\n\n\n
![\"[object](\"\/\/images.ctfassets.net\/o6514hijae09\/28EOVj89BTV2mgo2euZc50\/07cd09579ecc6cec24463f778a7c0022\/Mobile-phone-screen-icons.webp\" "\\"[object"){kind=icon}
<\/figure>\n\n\n\nImplementation<\/h3>\n\n\n\n
let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0)\u201a\t\t\t\t heightDimension: .fractionalHeight(1.0))let item = NSCollectionLayoutItem(layoutSize: itemSize)<\/code><\/p>\n\n\n\n let groupSize = NSCollectionLayoutSize( widthDimension: .fractionalWidth(0.92)\u201a heightDimension: .absolute(UIScreen.main.bounds.width - \/* left and right margins *\/))<\/code><\/p>\n\n\n\n
\n\n\n\nlet group = NSCollectionLayoutGroup.horizontal( layoutSize: groupSize\u201a repeatingSubitem: item\u201a count: 1)<\/code><\/p>\n\n\n\nlet section = NSCollectionLayoutSection(group: group)let layout = UICollectionViewCompositionalLayout(section: section)<\/code><\/p>\n\n\n\nextension UICollectionViewCompositionalLayout { static var horizontalPagingLayout: UICollectionViewCompositionalLayout { let itemSize = NSCollectionLayoutSize( widthDimension: .fractionalWidth(1.0)\u201a heightDimension: .fractionalHeight(1.0)) let item = NSCollectionLayoutItem(layoutSize: itemSize) let side = UIScreen.main.bounds.width - \/* left and right margins *\/) let groupFractionalWidth = 0.92 let groupSize = NSCollectionLayoutSize( widthDimension: .fractionalWidth(groupFractionalWidth)\u201a heightDimension: .absolute(side)) let group = NSCollectionLayoutGroup.horizontal( layoutSize: groupSize\u201a repeatingSubitem: item\u201a count: 1) let section = NSCollectionLayoutSection(group: group) let layout = UICollectionViewCompositionalLayout(section: section) return layout }}<\/code><\/p>\n\n\n\nlet someCatImages: [String] = (0\u20267).map { \"cat($0)\" }class Section { var images: [String] init(images: [String]) { self.images = images }}extension Section { static var allSections: [Section] = [ Section(images: someCatImages)\u201a Section(images: someCatImages)\u201a Section(images: someCatImages) ]}<\/code><\/p>\n\n\n\nclass ImageCollectionViewCell: UICollectionViewCell { @IBOutlet weak var contentImageView: UIImageView! var image: String? { didSet { if let image = image { self.contentImageView.image = UIImage(named: image) } } }}<\/code><\/p>\n\n\n\nimport UIKitclass CompositionalLayoutViewController: UIViewController { @IBOutlet weak var collectionView: UICollectionView! let sections = Section.allSections override func viewDidLoad() { super.viewDidLoad() collectionView.showsVerticalScrollIndicator = false collectionView.collectionViewLayout = UICollectionViewCompositionalLayout.horizontalPagingLayout }}extension CompositionalLayoutViewController: UICollectionViewDataSource { func numberOfSections(in collectionView: UICollectionView) -> Int { sections.count } func collectionView(_ collectionView: UICollectionView\u201a numberOfItemsInSection section: Int) -> Int { sections[section].images.count } func collectionView(_ collectionView: UICollectionView\u201a cellForItemAt indexPath: IndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCell(withReuseIdentifier: \"ImageCollectionViewCell\"\u201a for: indexPath) as! ImageCollectionViewCell cell.image = sections[indexPath.section].images[indexPath.item] return cell }}<\/code><\/p>\n\n\n\n![\"[object](\"\/\/images.ctfassets.net\/o6514hijae09\/3pvscwKUSKN7uplfG3LYkC\/2945aa88e25e2c11e23065001f11fee2\/Video2.webp\" "\\"[object")
<\/figure>\n\n\n\nsection.contentInsets = NSDirectionalEdgeInsets(top: 10.0\u201a leading: 0.0\u201a bottom: 0.0\u201a trailing: 0.0)group.contentInsets = NSDirectionalEdgeInsets(top: 0\u201a leading: 8.0\u201a bottom: 0\u201a trailing: 8.0)<\/code><\/p>\n\n\n\n
![\"[object](\"\/\/images.ctfassets.net\/o6514hijae09\/2nTQy4yn1WzY03gGIhCg7\/1d7ab7c4a745fd3efe3333f82b381b0a\/Video3.webp\" "\\"[object")
<\/figure>\n\n\n\n![\"[object](\"\/\/images.ctfassets.net\/o6514hijae09\/2TcPtZlz3AtyymWqCbt5OT\/3bd486432b4e923e16c6f9f7340b24a8\/Video4.webp\" "\\"[object")
<\/figure>\n\n\n\n