What Apple didn’t inform you…
When Apple introduces UIHostingConfiguration in WWDC, they primarily concentrate on showcasing how we are able to use it to create customized cells for desk and assortment view. This makes me marvel whether it is attainable to create a customized header and footer utilizing UIHostingConfiguration.
After a couple of hours of poking round, it seems that it’s completely viable! And the best way to make that occur is surprisingly easy. In actual fact, options similar to knowledge binding, animation, and self-resizing all work like a allure on the customized header and footer created utilizing UIHostingConfiguration.
These are some thrilling findings and I can’t wait to share them with you, so let’s get proper into it!
Supplementary views registration
To be able to show a customized header and footer, we should first register the customized header and footer to the gathering view. Thus, let’s go forward and outline the registration objects.
Discover that we’re utilizing UICollectionViewCell because the supplementary view sort. Doing so will allow us to outline the header and footer utilizing UIHostingConfiguration when initializing the registration objects.
Each headerRegistration and footerRegistration are initialized utilizing the identical initializer, simply be sure that to cross within the right elementKind, then you’re good to go.
Dequeuing the supplementary views
With each of the registration objects in place, we are able to go forward and dequeue the customized header and footer. We are going to do this within the collectionView(_:viewForSupplementaryElementOfKind:at:) knowledge supply technique.
Do take be aware that the elementKind right here should match with the elementKind that we cross in throughout the registration object initialization. In any other case, we are going to get an NSInternalInconsistencyException with purpose:
The view returned from -collectionView:viewForSupplementaryElementOfKind:atIndexPath: doesn't match the component sort it's getting used for.
Enabling header and footer in compositional format
The final piece of the puzzle is to configure the gathering view’s format to indicate a header and footer.
Right here’s learn how to do it if you’re utilizing a compositional checklist format:
For conditions the place you’re constructing a customized format, you are able to do it like this:
There you might have it, that’s all it takes to create a customized header and footer utilizing UIHostingConfiguration. Right here’s a screenshot of the header and footer we simply created.
At this stage, we are able to principally create any type of format and interplay so long as it’s achievable utilizing SwiftUI. Right here’s a format with a customized header, footer, and cell I constructed purely utilizing UIHostingConfiguration and SwiftUI.
UIHostingConfiguration and SwiftUIDo you assume you may construct one by your self?
Listed below are a couple of tricks to get you began:
- You should use the idea offered in this article to create a customized cell.
- Use the cell’s
configurationUpdateHandlerto focus on the chosen cell with a crimson border. You’ll find out extra right here. - Use the SwiftUI knowledge binding method to replace the footer with the chosen image identify. Extra on that right here.
- The header top change animation is only a primary SwiftUI transition animation, no additional work must be carried out because of the self-resizing nature of
UICollectionViewCellin iOS 16.
Don’t fear if you happen to one way or the other get caught. You possibly can at all times seek advice from the total pattern code right here on Github.
