In Chapter 11, Simon Says, we created a simple UI with four subviews, each representing a color in the Simon Says memory game. Toward the end of the chapter, we tried to run our application on a device with a different screen size and noted how our UI elements did not scale and the interface ended up looking different from how we wanted it to look. In this section, we will dive deeper into how GUI works in order to come up with a better strategy to lay out our UI.
A UI in iOS is built using something we refer to as
views. A view represents an element, such as an icon, menu, text field, or a button. A view can have multiple child views or subviews and a view can have one parent view. Let's illustrate this with a simple example:
This UI is supposed to look like a chat interface, where the user of the app is able to write messages back and forth with John. Let's go through the different UI elements:
Profile section, which is the blue area at the top...