A UI that is as complicated as the one required can be really difficult to implement if we don't take the correct precautions.
A good way to minimize the complexity is to split the problem into more manageable sub-problems, so we'll define three sub-views: CurrentWeatherView, HourlyForecastView, and DailyForecastView. We'll implement them as separate entities. The following screenshot shows the view's structure:
As we just said, we implement the UI by creating three custom views, whose size and position we are temporarily hardcoding.
Let's start with CurrentWeatherView, adding it to PrettyWeatherViewController
:
private let scrollView = UIScrollView() private let currentWeatherView = CurrentWeatherView(frame: CGRectZero)
As the height of the three elements is more than the height of the view, we create a scroll view to contain them:
func setup(){ //... scrollView.showsVerticalScrollIndicator = false scrollView.addSubview(currentWeatherView) ...