Recreating screen from Fabulous app in Swift using LayoutCode

In this blog post, we are recreating a screen from Fabuous app using LayoutCode, as shown below.

**Left**: Screenshot from the app, **Right**: Screenshot from LayoutCode project

We are not recreating the design be 100% exact, but this post is to show how the design can be created using LayoutCode. This is also because text font, background image or other images can easily be replaced.

Scroll to the end of this post to download the complete project.

Required time to create the design (and use directly in Xcode): ~18mins

Watch complete walkthrough (mostly unedited) on how to recreate the design on youtube.

Why collection view?

There are probably few other ways on how to recreate the design in swift. However in this post, we are recreating the design using collection view. There are few advantages using collection view:

In LayoutCode, by using only few clicks you can

Update header design or layout
Update cell design or layout
Add/remove section if needed
Set cell count
Using generated code, you can easily add new data, remove data or replace data with automatic transition animation. Automatic transition animation is a feature of collection view

Using generated code in Xcode, you can

Replace/insert/remove data with only a few lines of code.
Insert/remove or replace data and get the transition animation for free

Steps Summary

1. To get started, create a collection view and open object editor by double click at the collection view. Add text to a cell view to be used as our top view that shows “your morning routine” text. Add constraints so the text is centered to the cell view

2. Select default layout that is automatically created, set leading and trailing inset to 15, we want the top view to have some spacing to edge end. Select root group for the layout and set its absolute height to 200, so the top view have a fixed height.

3. Create a new cell view which we will used to show routine row cell view. Add rounded rect and text to the cell view, add layout constraints so it is vertically centered to the cell view.

4. Create a new section layout, then set its absolute height to 30. This will be used as layout to the routine row cell view.

5. After creating the cell views and layouts both for the top view and routine row view, we need to set them using datasource inspector. Select datasource, then

Set section count to 2
Rename first section to top and set cell count to to 1. Select layout and select cell view that we have created for the top section.
Rename second section to routine and set cell count to 3. Select layout and select cell view that we have created for the routine section.
Figure below shows our project until this step.

6. Select routineLayout again, set leading inset to 40 because want to display the routines near to the center.

6. Next, we want to add header view to the routine section. Create a new cell view, add image and text and set their layout constraints so that they leading aligned and vertically centered to the cell view. Rename the cell to routineHeaderView. Drag a pie chart image to the image view.

7. Then we need to have a new layout for the header view too. At routine layout artboard, hover at the top of the layout, click and add top left header add a new header layout.

8. Select datasource and select routineHeaderView as view for top left header for routine section.

8. Select the newly added header layout, set its absolute height to 45. Figure below shows our latest progress.

9. We have not set the top view text properly. Set “your morning routine” text so it is centered using layout constraints to the cell view and update the text font and size to be a bit bigger.

10. Select datasource again, add two new sections, and replicated layout and cell views used same as used for routine section. Then select routineLayout and set top and bottom inset so we have some padding between sections.

11. Next, we want to add header top right header for all three routine sections. The header can be used to display image that stick the section top position.

12. Add a new cell view, then add an image view with layout constraints centered to its cell view. Add any suitable image to the image view.

13. Again, we need to add a set a new header layout for the top right header. Hover to the top edge of a layout item in routineLayout, then add header to the top right. Figure belows show the updated routineLayout. Now we have two headers for the layout indicated by the black color.

14. Select datasource, then for all routine sections, set the top right header layout and cell views.

15. Select routine layout header, set both leading and trailing inset to 40 so the design is not too close to the screen edges. Then, select top right header and set both absolute height and width to 80. Set y offset of the header to 50. By using section header, we can make the image stick to the section based on size and offset set.

16. Next, we will use derived attributes so we can individually edit a cell data.

17. Select the text in routine cell view.

18. While selecting the text, hover to text attribute at attribute inspector, click derived attribute icon to add it as derived attribute. After adding the derived attribute, you can edit individual data for each cell.

19. Select datasource again, when you select a section with routineRowView, additional attribute below cells popup is now added with the added derived attribute, in this case “routineText”. Select each cell using the cells popup then set the data.

20. This is our update project state. Individual cell rows are now shown properly.

21. Next, select header top right header view, then set the image as derived attribute so we can use different images for each section.

22. We also want to set header top left text as derived attribute too, so we can change “15 MINS” text for each section.

23. Figure below shows the collection view after we have set the derived attributes and update the data.

24. The final step is to set the background color. Select the collection view then at the inspector attribute, set its background color. If you want to use a background image, you need to set the background color alpha to 0, the put an image view behind the collection view to show the image. But for this example, we will use a background color.

Using Generated Code

LayoutCode generates a complete swift code which can be used directly for iOS development in Xcode without extra coding. However realistically, you may want to edit the data in code. The generated code include several helper methods that let you insert, remove or replace data. This method also includes with automatic transition animation.

1. Inserting data