triotalent.blogg.se - Instagram layout

Instagram layout how to#
Instagram layout code#

Instagram layout code#

I omitted them here so the code can work without these extra convenience methods. In my "real" projects I have a few extensions for registering and dequeuing cells to remove the as! and longer parameter lists. You can also experiment with extensions to clean up some of the code. Or maybe for example give user the option to change size of the photos or implement fake loading with the shimmer effect. You can add more components to this screen.

If you want to practice collection layout and diffable data sources.

Does it make sense to create practical examples like these? Or is it better to just explain the concepts? Huge thanks for following along! The complete example is available on GitHub.Īnd let me know if you have any feedback.

Create definition of compositional layout (with single section for now)įunc createHighlightsSection () -> NSCollectionLayoutSection.

Here are the basic steps needed for the initial setup: We can move to the more interesting part and define our compositional layout together with the diffable data source. Since this is an example, I will create them in the storyboard. The cells itself would be better either 100% in code or as separate. I am going to use Storyboard, mainly because it is faster and I can easily screenshot progress. I will build it in chunks so we can continually test the screen and see how it looks like. Now we have an overview of the parts, we can begin implementing the screen. The last section (" D") will be vertical section with three items on each row. I will go with header because I want to show it as part of the tutorial and it does not require any data. We could either build this as a cell or header for the section.

Moving down we have header used to toggle what the rest of the screen displays (" C"). This is a horizontal section where each highlight is collection view cell. The highlights part (" B") is pretty straightforward.

Instagram layout how to#

My goal with this post is not to show how to copy Instagram but rather how to deconstruct complex screen and build it with compositional layout and diffable data source. In this example we are going to build simpler header because the precise UI is not the point. Because accessing data is cleaner and reusing it will be easier with cell than with header (or rather supplementary). Even though this is the header, we are going to use cell for it. Then these buttons would work better as separate cell or footer view. If we wanted to maybe show it without the buttons ("Following", "Message", etc). Here this depends on how we might want to use it elsewhere. The header (" A") could be sliced even more. I have highlighted the individual parts with colors and also with letters to make it clear what I am referring to. One way to slice this screen, would be something like this: When building complex screens such as this, it is best to start by mentally "slicing" the screen into individual components. I have choosen Instagram because it is a popular, well-known app and the profile offers an opportunity to really showcase compositional layout. I am going to show how we could build screen similar to the Instagram profile detail. In this post I want to try something totally different and more practical. I have written about Compositional Layout quite a bit already, but always in an abstract way describing the individual part.