AppStore in Objective-C with Compositional Layout
The WWDC 2019 took all of us by storm, be it Swift-UI , Combine, Diffable DataSources and many other important toolsets to help grow any iOS developer’s productivity. Moreover, one of the important announcements in my opinion was the advancement in CollectionViews.
The compositional layout is a revolutionary step towards creating dynamic and beautiful layouts in collectionView. The sample code provided with WWDC 2019 illustrated and served the purpose for many examples such as per-section layout, scrolling-behavior-layout and even the AppStore Layout. However, the code they provided was only in Swift. I myself am mainly focused on Swift but times and often I play with Objective-C. We all know the documentation of UIKit and feel like there should be more to it. It was a hopeless scenario for Objective-C in for compositional layout as everyone is moving towards Swift UI and Swift and searching for code references for it was a futile task.
Translating the knowledge of Swift to Objective-C is often a tedious task and the lack of resources makes feel anyone frustrated. Here, I am trying to present the Compositional Layout for CollectionView in Objective-C and hope that it will help the needed. For this tutorial, I am assuming that the audience is versed with topics of creating ViewController and Objective-C classes and the header(.h) and implementation (.m ) and Compositional Layouts in Swift as well. If not then I highly recommend watching the WWDC 2019 videos for Compositional Layout and Diffable DataSources .
First of all, we need aViewController to hold our collectionView. Let’s add property which represents the collection view. Let’s look at the header and implementation files.
There is a lot going on within these brackets which do deserve an explanation. First of all, we are adding properties for our collectionView and diffableDataSource. The implementation file serves the purpose of initializing and configuring those. As I am trying to re-create the app store ui I need multiple sections hence I had to initialize the layout with UICollectionViewCompositionalLayoutConfiguration block which provides access to create per-section layout. After that, the check of the sections helps to determine the itemSize, itemHeight, itemWidth, groupWidth, groupHeight properties for each section. Basically, the initialization of collectionView should not be considered a tough task.
A lot of hustle arrives when you need to add sections to your collection views. The documentation for compositional layout suggests that the dataSource should define the sections and items it wishes to show inside the collectionView. However, we cannot do that in Objective-C. Moreover, the sections should conform to Hashable protocol and the item should also do the exact.
Nevertheless, the need of Hashable object in Objective-C is fulfilled by the inheritance of NSObject superclass. But for saftey I added an UUID property which uniquely identifies our sections. Let’s look at the gist.
This should be simple, we are adding an UUID property to uniquely identify the section object. Let’s move our focus the the configureDataSource from the ViewController.m file. First of all, the _dataSource automatically synthesized property is initialized with the appropriate block syntax which helps to determine the cell and identify the background color according to the section. Finally while determining the sections for the collection views, we create section objects such as firstSection, secondSection and thirdSection and add these sections to array. The Objective-C documentation for Compositional layout suggests that the sectionIdentifierType and itemIdentifierType should be the objects of NSArray hence we added the previously created sections to the property sectionArray declared on the implementation file.
Finally we append our items and sections to the snapshot which gives us the layout out which looks like the attached gif.
I have intentionally left the explanation of the dance of the autolayout and adding subviews and creating cells. I hope the readers have enjoyed the article. The full code for this project can be found at.
Thank you for reading.
