View Hierarchy of Calculator

Using Auto Layout and Frames. Made with UIScene Buttons are the UIButtons.

Reads in 5 minutes Updated 5 months ago

The application is made on scenes, but only one root scene is used. The window class is called CalculatorWindow.

Controller

The Root Controller is named CalculatorController. All elements fit into the Safe Area Layout Guide.

Added gesture UISystemGestureGateGestureRecognizer to the whole screen, it is not clear what it does. Perhaps the gesture animates the buttons if you move your finger across the screen.

Keyboard

The buttons are in the CalculatorKeypadView container. The buttons are arranged in frames, and the button container itself is left with constraints.

 Keypad class CalculatorKeypadView.
Keypad class CalculatorKeypadView.

All buttons are objects of class CalculatorKeypadButton, it inherits from UIButton. Inside the buttons is the system UILabel, even the C - Clear button is made of text.

 The class of the CalculatorKeypadButton.
The class of the CalculatorKeypadButton.

There are letters under the numbers in the dialer, where Apple has converted all the text into pictures.

Input Area

The window with the entered digits is called a DisplayView. The width of the label inside the container is recalculated each time a new digit or operation is entered. They added 3 gestures to the view - swipe, long-press and tap.

 The input window class DisplayView.
The input window class DisplayView.

The height of the label with the result is controlled by the constraints. For landscape orientation you get a strange value of 71.5.

Landscape

 Hierarchy of the Calculator's landscape orientation views.
Hierarchy of the Calculator's landscape orientation views.

In portrait mode, there are no hidden UIView. So, when you rotate the device, new buttons are added and arranged on the fly. Buttons from portrait mode are saved between rotations. This is what the transition between portrait and landscape orientation looks like:

Toggle between portrait and landscape orientation.

Accessibility

The app supports Voice Over and Voice Control for all interactive elements.

 Поддержка Accessibility.
Поддержка Accessibility.

The window with the result is dictated as "Result, 89, Summary Element".