Reverse engineering iOS weather app UI components

2019-05-11 16:42发布

问题:

I am trying to write down a summary of the iOS weather App. The main components that I am interested are labelled in the image below as 1, 2, 3, 4 and 5.

The UI should be obtained as following:

A ViewController with:

  • 1 - is a UILabel
  • 2 - is a UIButton that changes either text or gets hidden to display a 2nd button
  • 3 - UIScrollView with horizontal scroll? I guess it has custom cell types.
  • 4 - Same as above but vertical cells.

And a PageView controller (5).

Storyboard creation (would like to follow this):

  • 1-4 - belong to the same ViewController
  • 5 - is above this hierarchy.

Doubts:

  • Is my interpretation correct?
  • Are 3/4 vertical view controllers?
  • Is there any disadvantage in implementing this using interface/story builder?

回答1:

Before I go on, I should state the obvious: the Weather app is closed source! As such all of this is educated guesswork.

Is my interpretation correct?
Not entirely. My guess is that both 3 and 4 are not vanilla UIScrollViews, but are instead probably UICollectionViews. That makes horizontal scrolling (for 3) easy as well as layout and totally custom cells. Also, I suspect that 3 is a subview of 4, because it scrolls up and down with the content of 4.

You'll notice that 1 and 2 move in the same direction as 3 and 4 when scrolled, but not the same speed. This means it's probably a driven animation associated with callbacks from the 4 scroll view.

Are 3 and 4 vertical view controllers?
Probably not. Using child view controllers here would be overkill in my opinion.

Is there any disadvantage in implementing this using interface builder/storyboards?
Yes. I would definitely not recommend that. These behaviors are rather custom, and I guarantee that you'll eventually find yourself forced to write a fair amount of layout and animation code. If you start with storyboarding, you'll end up with two sources of truth, so to speak, so I just wouldn't bother.