View Hierarchy of Calculator

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

Reads in 5 minutes Updated 1 year 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 a 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 three gestures to the view - swipe, long-press and tap.

 The input window class DisplayView
The input window class DisplayView

The constraints control the height of the label with the result. 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".