Storyboard of a mockup

Question

I am working on an e-commerce based app, and the designer has passed on the mockup to me. !

This is the mockup the designer has passed.

I am working on storyboard of this mockup and I have managed to get to this level as of now.

There are several views and features which cannot be included in this storyboard now because of the limited space. I know the designer has passed on me the rendered view, which can be seen on scrolling the app.

I wonder which could be the best approach to include all these views in a single storyboard or render them in a single view. I have looked onto using xib files and calling them from my viewcontroller class, which could be a possible solution. But, I want to know, what could be the best solution?

Answer 1

Best solution is use Storyboard so that you have all screens at one place. But keep one thing in mind that start doing the whole project in XCODE 8 storyboard (Because XCODE 7 and 8 storyboards are not fully compatible with each other). So that you get compatibility with previous iOS versions also (< iOS 10)

Now as far as design is concerned, I would like to suggest you use autolayouts and proportional layout.

your View controller will always have self.view. Start on that view. First add navigation controller (with root view controller as your first prefered view controller on app start) or simply add one toolbar. Then add one UIScrollView to whole remaining space. Then start with your design inside UIScrollView. Don't forget to provide contentSize of UIScrollView.

For any help, feel free to ask.

Answer 2

The best solution would be using a tableView with multiple prototype cells for this kind of problem. Well, going through the concept as mentioned, I could easily scroll in the storyboard and maintain my design as per the mockup.