Using GeometryReader for Orientation Layouts

In MyChronoPro, the stopwatch is tailored for both portrait and landscape orientations. When developing for the iPhone and iPad, it's crucial to utilize the available space effectively. We'll explore how to use GeometryReader to enhance the layout of your containers and also examine the @ViewBuilder to understand its application.

Download from the App Store:

https://apps.apple.com/us/app/mychronopro/id6746975883

The reference swift file is placed on my Github at: https://github.com/lioneldude83/GeometryReaderExample/tree/main

ViewBuilder Macro

Let's begin by discussing how to reuse sections of your code. Declare these variables outside the View body. For the primary blue circle of the face, which is enclosed in a ZStack, the @ViewBuilder is unnecessary. However, for the row of buttons, since they aren't contained within a structure like HStack, VStack, or ZStack, you should use the @ViewBuilder macro.

The @ViewBuilder macro in SwiftUI is a result builder that allows you to create views from closures, simplifying the way you define the structure and content of your user interface. It's particularly useful for constructing complex views with conditional logic or multiple child views, enabling you to write more concise and readable code. 

UPDATE: The @ViewBuilder macro is needed if the result does not return a View. If there are conditional statements or any variables, either a return statement on a container is needed or use the @ViewBuilder macro. If the ViewBuilder was left out, and the compiler error message is "Function declares an opaque return type, but has no return statements in all execution paths" or "Function produces expected type ‘some View’; did you mean to return a value?" then either you need the ViewBuilder or explicity place return ahead of the container.

The first example returns a ZStack container, so no ViewBuilder is needed. But the second is laying out two Image(), so a ViewBuilder is required.

GeometryReader

To accommodate the layout, start by declaring a Boolean variable, `isLandscape`, to monitor orientation. Place the `GeometryReader` outside the main container, which is the container whose size you want to read. When the view appears, use the `onAppear` modifier to set `isLandscape` to true if the width is greater than the height; otherwise, it indicates a portrait orientation. Next, use the `onChange` modifier to detect any changes in geometry size, which will update the `isLandscape` Boolean.

By checking `if isLandscape`, you can position elements for both landscape and portrait layouts accordingly. You can also set the frame based on a specific size by utilizing the width or height from the geometry reader.

That's how you adjust your elements for both portrait and landscape layouts. Keep in mind that in landscape mode, particularly on the iPhone, there is less vertical space for displaying content. This is why most iPhone apps are designed to support only portrait orientation, and leaving to certain types of content to allow for displaying in landscape, like watching a video or playing a mobile game.

Portrait Layout

Landscape Layout