There was a slight change in concept of how I want my magic hours app main screen to look, comparing to what I’ve presented in my previous post. I’ve decided that timeline control would be, maybe, more suitable. So I had to finally deal with proper positioning of various ui elements in my app’s main screen and face iOS auto layout engine.
As for UI designing: one thing I really like is that a storyboard presents all the views at once, so it’s easy to understand how the application is organized in terms of navigation and launching one view from another.
I’ve been playing around with navigation controller, so there’s my app’s main screen and one test view on the above screenshot.
The next great thing is that you can test how your layout looks on different devices without launching the app. There are several icons in interface builder that switch between different versions of iPhone and iPad:
This would be even cooler if it worked ;) Somehow the view presented to me in interface builder doesn’t match what I see in simulator after launching the app. Have no idea why :(
As far as iOS auto layout engine is concerned.. this seems to me just too complicated. I miss good old silverlight grids, where I was able to build any layout in seconds using fixed column sizes and stars for filling up parent container. In iOS there are constraints: for size and for positions. There is a StackView control which is something like a StackPanel but with additional properties that define how the children fill parent container. And there are magic properties, that define how the element behaves in terms of taking more size or squeezing its content, they are called: Content Hugging Priority and Content Compression Resistance Priority.
There was a moment I faced a huge blank space in my app and I had no idea where the hell this was coming from. I played around with these values and finally got what I wanted. This stackoverflow question has a good explanation on these two.
Xcode warns you if you create constraints that conflict with each other and it happened to me all the time. At some point I was afraid to move the ui elements because I always ended up with conflicting constraints :) The fact that ui designer doesn’t show how the app look in runtime doesn’t help either. So for now designing iOS interface feels for me like I’m standing in front of a giant dashboard with hundreds of switches and I just press them one by one and see what happens :) I have also noticed that it’s popular among iOS developers to apply constraints directly in code. This is like a nightmare to me right now :)
I know that it is just a matter of time, with every next view I will, hopefully, spend less time trying to figure out how to autolayout it the right way. And this is the most recent magic hours app screenshot, not the final version though :)
